/* ===================== tokens/colors.css ===================== */
/* ============================================================
   Jeanius AI — Color tokens
   Deep emerald base, off-white ink, icy-blue accent,
   watermelon pink used sparingly.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --emerald-900: #001A00;   /* deepest — voids, footer */
  --emerald-800: #002500;   /* PRIMARY background */
  --emerald-700: #053019;   /* raised surface */
  --emerald-600: #0A3D22;   /* card / panel */
  --emerald-500: #18512F;   /* hairline / hover surface */

  --offwhite: #F6F5F3;      /* primary ink */
  --offwhite-dim: #CFD6CE;  /* secondary ink (cool tint) */

  --ice-300: #C6E6F0;       /* accent light */
  --ice-400: #A0D4E4;       /* PRIMARY accent */
  --ice-500: #79BDD2;       /* accent deep (hover) */

  --melon-400: #FC6C85;     /* watermelon pink — sparing accent */
  --melon-500: #E6536D;     /* pink pressed */

  /* ---- Surfaces ---- */
  --surface-base: var(--emerald-800);
  --surface-sunken: var(--emerald-900);
  --surface-raised: var(--emerald-700);
  --surface-card: var(--emerald-600);
  --surface-overlay: rgba(0, 26, 0, 0.72);
  --surface-glass: rgba(10, 61, 34, 0.55);

  /* ---- Text ---- */
  --text-primary: var(--offwhite);
  --text-secondary: var(--offwhite-dim);
  --text-muted: rgba(246, 245, 243, 0.55);
  --text-faint: rgba(246, 245, 243, 0.32);
  --text-on-accent: var(--emerald-900);
  --text-accent: var(--ice-400);

  /* ---- Lines & borders ---- */
  --border-subtle: rgba(246, 245, 243, 0.10);
  --border-default: rgba(246, 245, 243, 0.16);
  --border-strong: rgba(246, 245, 243, 0.28);
  --border-accent: rgba(160, 212, 228, 0.45);

  /* ---- Accents (semantic) ---- */
  --accent: var(--ice-400);
  --accent-hover: var(--ice-300);
  --accent-press: var(--ice-500);
  --accent-soft: rgba(160, 212, 228, 0.12);
  --accent-glow: rgba(160, 212, 228, 0.35);

  --highlight: var(--melon-400);
  --highlight-press: var(--melon-500);
  --highlight-soft: rgba(252, 108, 133, 0.14);

  /* ---- Status ---- */
  --success: #6FCF97;
  --warning: #F2C57C;
  --danger: var(--melon-400);
  --info: var(--ice-400);

  /* ---- Focus ring ---- */
  --ring: rgba(160, 212, 228, 0.55);
}

/* ===================== tokens/fonts.css ===================== */
/* ============================================================
   Jeanius AI — Webfonts
   Poppins (display, headlines, body & UI — full weight range)
   Instrument Serif italic (accent only — emphasized words
   inside a headline; never body).
   Loaded from Google Fonts; consumers receive these @font-face
   rules transitively through the Google CSS endpoints.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Instrument+Serif:ital@0;1&display=swap');

/* ===================== tokens/typography.css ===================== */
/* ============================================================
   Jeanius AI — Typography tokens
   Display, headlines, body & UI: Poppins (full weight range)
   Accent: Instrument Serif italic (emphasized words in a
   headline only — never body).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Poppins', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', system-ui, 'Segoe UI', sans-serif;
  --font-ui: var(--font-body);
  /* Italic accent for emphasized words inside a headline. Never body. */
  --font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  /* Instrument Serif sits a little smaller than Poppins — bump accent words
     by this factor so they read at the same visual size as the headline. */
  --accent-em-size: 1.18em;

  /* ---- Fluid display scale (Poppins) ---- */
  --text-hero: clamp(3.5rem, 6vw, 6.5rem);   /* 56 → 104 */
  --text-display: clamp(2.75rem, 4.5vw, 4.5rem);
  --text-h1: clamp(2.25rem, 3.4vw, 3.25rem);
  --text-h2: clamp(1.75rem, 2.4vw, 2.4rem);
  --text-h3: clamp(1.4rem, 1.7vw, 1.7rem);

  /* ---- UI / body scale (Poppins) ---- */
  --text-xl: 1.375rem;   /* 22 */
  --text-lg: 1.125rem;   /* 18 */
  --text-md: 1rem;       /* 16 — base body */
  --text-sm: 0.875rem;   /* 14 */
  --text-xs: 0.75rem;    /* 12 */
  --text-2xs: 0.6875rem; /* 11 — overline / micro */

  /* ---- Weights (Poppins full range carries hierarchy) ---- */
  --weight-display: 600;   /* headlines — confident semibold */
  --weight-display-bold: 700;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Line heights ---- */
  --leading-tight: 1.02;   /* big display */
  --leading-snug: 1.18;
  --leading-normal: 1.55;  /* body */
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;   /* large Poppins display */
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;    /* overlines / eyebrows (Poppins caps) */
  --tracking-widest: 0.28em;
}

/* ===================== tokens/spacing.css ===================== */
/* ============================================================
   Jeanius AI — Spacing & layout tokens
   8px base rhythm with generous negative space.
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 — section breathing room */
  --space-11: 12rem;   /* 192 */

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.5rem, 5vw, 5rem);    /* @kind spacing */
  --section-y: clamp(5rem, 12vw, 11rem); /* @kind spacing */
}

/* ===================== tokens/effects.css ===================== */
/* ============================================================
   Jeanius AI — Effects: radii, borders, shadows, motion, blur
   ============================================================ */

:root {
  /* ---- Corner radii (soft, modern, never pill-everything) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thick: 1.5px;

  /* ---- Shadows — dark base, so shadows are deep + low-spread,
          lift comes mostly from a faint top inner highlight ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px var(--border-accent), 0 0 32px -6px var(--accent-glow);
  --inner-highlight: inset 0 1px 0 rgba(246, 245, 243, 0.06); /* @kind shadow */

  /* ---- Blur (glass) ---- */
  --blur-sm: 6px;
  --blur-md: 16px;
  --blur-lg: 28px;

  /* ---- Motion: alive but premium — long, eased, never bouncy ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 260ms;   /* @kind other */
  --dur-slow: 520ms;   /* @kind other */
  --dur-reveal: 900ms; /* @kind other */
}

/* ===================== tokens/base.css ===================== */
/* ============================================================
   Jeanius AI — Base styles & a few utility primitives
   Element resets + opt-in helper classes that bind to tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-glow);
  color: var(--offwhite);
}

/* ---- Display headings ---- */
.jn-hero, .jn-display, .jn-h1, .jn-h2, .jn-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.jn-hero    { font-size: var(--text-hero); }
.jn-display { font-size: var(--text-display); }
.jn-h1      { font-size: var(--text-h1); line-height: var(--leading-snug); }
.jn-h2      { font-size: var(--text-h2); line-height: var(--leading-snug); }
.jn-h3      { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

/* Instrument Serif italic = the brand's emphasis gesture (headlines only) */
.jn-em { font-family: var(--font-accent); font-style: italic; font-weight: var(--weight-regular); font-size: var(--accent-em-size); line-height: 1; }

/* ---- Eyebrow / overline (Poppins, tracked caps) ---- */
.jn-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-accent);
}

/* ---- Body copy ---- */
.jn-lead { font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.jn-body { font-size: var(--text-md); line-height: var(--leading-normal); }
.jn-small { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Layout helpers ---- */
.jn-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.jn-section { padding-block: var(--section-y); }

/* ---- A faint grid/scanline texture utility for backgrounds ---- */
.jn-grid-bg {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ===================== styles.css ===================== */
/* ============================================================
   Jeanius AI — Design System
   Global entry point. Import this one file.
   This file is @import lines only — no rules.
   ============================================================ */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');
@import url('tokens/base.css');


/* ===================== resolved components (Button / Eyebrow) ===================== */
.dsbtn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:600;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;border:0;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;letter-spacing:.01em}
.dsbtn--lg{font-size:1rem;padding:0 32px;height:58px}
.dsbtn--sm{font-size:.875rem;padding:0 20px;height:38px}
.dsbtn:not(.dsbtn--secondary){background:var(--ice-400);color:var(--emerald-900)}
.dsbtn:not(.dsbtn--secondary):hover{background:var(--ice-300);transform:translateY(-2px);box-shadow:0 12px 26px rgba(160,212,228,.24)}
.dsbtn--secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}
.dsbtn--secondary:hover{border-color:var(--border-accent)}
.dseyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent)}
.dseyebrow::before{content:"";width:28px;height:1px;background:var(--text-accent);display:inline-block;flex:none}

/* ===================== intake form ===================== */
.flbl{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ice-400);margin-bottom:10px}
.flbl .opt{color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0;font-size:11px}
.fld{width:100%;box-sizing:border-box;background:var(--emerald-800);border:1px solid var(--border-strong);border-radius:12px;padding:15px 16px;font-family:var(--font-body);font-size:1rem;color:var(--offwhite);outline:none;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.fld:focus{border-color:var(--ice-400);box-shadow:0 0 0 3px rgba(160,212,228,.18)}
.fld::placeholder{color:var(--text-muted)}
textarea.fld{resize:vertical;min-height:130px;line-height:1.6}
select.fld{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0D4E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
select.fld option{background:var(--emerald-800);color:var(--offwhite)}
.fopts{display:flex;flex-direction:column;gap:10px}
.fopt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--emerald-800);border:1px solid var(--border-strong);border-radius:12px;cursor:pointer;font-family:var(--font-body);font-size:.97rem;line-height:1.45;color:var(--text-secondary);transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.fopt:hover{border-color:var(--border-accent)}
.fopt input{margin:1px 0 0;width:17px;height:17px;flex:none;accent-color:var(--ice-400);cursor:pointer}
.fnote{margin:18px 0 0;font-family:var(--font-body);font-size:.95rem;line-height:1.6;color:var(--text-muted);max-width:52ch}
.fmsg{padding:18px 20px;border-radius:12px;font-family:var(--font-body);font-size:1rem;line-height:1.6}
.fmsg--ok{background:rgba(160,212,228,.1);border:1px solid var(--border-accent);color:var(--offwhite)}
.fmsg--err{background:rgba(252,108,133,.12);border:1px solid var(--melon-500);color:var(--offwhite)}

/* ===================== intake: trust rail + form ===================== */
.applywrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,5vw,80px);align-items:start}
.applyrail{position:sticky;top:100px}
.railitem h3{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-0.01em;color:var(--offwhite);margin:0 0 6px}
.railitem p{font-size:1rem;line-height:1.6;color:var(--text-secondary);margin:0}
@media (max-width:880px){.applywrap{grid-template-columns:1fr;gap:clamp(40px,8vw,56px)}.applyrail{position:static;order:2;margin-top:clamp(48px,11vw,72px);padding-top:clamp(40px,9vw,56px);border-top:1px solid var(--border-subtle)}.applyform{order:1}}