/* =============================================================
   feel-fuller-tokens.css
   The v4 design system as named tokens.
   Load this ONCE, before any other stylesheet. Every other file
   reads from here and declares no raw values of its own.

   Rule of the system: if a value isn't a token, it isn't legal.
   check-tokens.mjs enforces the two that drift most (size, mono).
   ============================================================= */

:root{

  /* ---- SURFACE ------------------------------------------------ */
  --ff-bg:        #140a04;   /* page */
  --ff-card:      #1e1710;   /* raised */
  --ff-card-2:    #241b13;   /* raised on raised (chips, insets) */
  --ff-line:      rgba(255,255,255,.10);
  --ff-line-soft: rgba(255,255,255,.06);

  /* ---- TEXT — 3 tiers. Contrast measured on --ff-card. -------- */
  --ff-ink:   #F2E9E1;  /* 14.8:1  headings, values, anything primary */
  --ff-mid:   #C6B5A6;  /*  8.9:1  body, descriptions                 */
  --ff-low:   #9A8B7E;  /*  5.4:1  FLOOR. Nothing dimmer holds words. */

  /* ---- ACCENT ------------------------------------------------- */
  --ff-accent:      #FF6A2B;  /* 6.2:1 — safe on text at any size */
  --ff-accent-line: rgba(255,106,43,.42);
  --ff-accent-glow: rgba(255,106,43,.14);
  --ff-ok:          #6FCB86;

  /* The ombre. ONE element per surface. No exceptions.
     Justify it every time: it should mean something on that screen. */
  --ff-ombre:   linear-gradient(120deg,#F5C542,#FF7A18,#D62A6B);
  --ff-ombre-v: linear-gradient(180deg,#F5C542 0%,#FF7A18 45%,#FF4500 70%,#D62A6B 100%);
  --ff-ombre-h: linear-gradient(90deg,#F5C542,#FF7A18,#FF4500);

  /* ---- TYPE ---------------------------------------------------
     5 sizes. If you need a 6th, you have a layout problem.
     --ff-t-cap is the floor: no text smaller than this, ever.     */
  --ff-t-hero: 31px;
  --ff-t-head: 20px;
  --ff-t-body: 16px;
  --ff-t-sub:  14px;
  --ff-t-cap:  12.5px;

  /* The ONLY mono size. One .ff-eyebrow per section, max. */
  --ff-t-eyebrow: 11px;

  /* Bebas. NUMERALS ONLY — never words, never labels.
     Exception: the FEEL FULLER wordmark. */
  --ff-n-lg: 30px;
  --ff-n-md: 22px;

  --ff-font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --ff-font-mono: "DM Mono", ui-monospace, monospace;
  --ff-font-num:  "Bebas Neue", sans-serif;

  --ff-lh-tight: 1.15;
  --ff-lh-body:  1.45;
  --ff-lh-loose: 1.5;

  /* ---- SPACE — 8px grid. Off-grid values are the #1 drift source. */
  --ff-s1:  8px;
  --ff-s2: 16px;
  --ff-s3: 24px;
  --ff-s4: 32px;
  --ff-s5: 48px;

  /* ---- SHAPE -------------------------------------------------- */
  --ff-r:      14px;   /* cards */
  --ff-r-sm:   10px;   /* chips, checkboxes, small tiles */
  --ff-r-full: 999px;

  --ff-maxw: 430px;    /* content column */
}

/* ---- PRIMITIVES ----------------------------------------------- */

.ff-eyebrow{
  font-family:var(--ff-font-mono);
  font-size:var(--ff-t-eyebrow);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ff-low);
}

/* Put on any element containing digits. Keeps columns from dancing. */
.ff-num{
  font-family:var(--ff-font-num);
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
}

.ff-card{
  background:var(--ff-card);
  border:1px solid var(--ff-line);
  border-radius:var(--ff-r);
  padding:var(--ff-s2);
}

/* Ambient warmth in a card corner. Purely decorative, never on text. */
.ff-glow{
  position:absolute; right:-40px; top:-40px;
  width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, var(--ff-accent-glow), transparent 68%);
  pointer-events:none;
}

.ff-h1{font-size:var(--ff-t-hero);font-weight:700;letter-spacing:-.7px;line-height:var(--ff-lh-tight)}
.ff-h2{font-size:var(--ff-t-head);font-weight:700;letter-spacing:-.3px}
.ff-sub{color:var(--ff-mid);font-size:var(--ff-t-sub);line-height:var(--ff-lh-loose)}
.ff-cap{color:var(--ff-low);font-size:var(--ff-t-cap);line-height:var(--ff-lh-body)}

/* The one accent word in a headline. Sentence case, never a whole line. */
.ff-key{font-style:normal;color:var(--ff-accent)}

/* Progress bar — the ombre's most defensible use: it IS progress. */
.ff-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.ff-bar > i{display:block;height:100%;background:var(--ff-ombre-h)}

/* ---- BASELINE -------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--ff-bg);
  color:var(--ff-ink);
  font-family:var(--ff-font-sans);
  font-size:var(--ff-t-body);
  line-height:var(--ff-lh-body);
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:2px solid var(--ff-accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}