/* ============================================================================
   FRAMELITH — Design Tokens v1.0
   "The frame, made permanent."
   ----------------------------------------------------------------------------
   CORE IDEA: the palette encodes the product. Cool cyanotype = the archived
   past (THEN). Molten amber = the rendered present (NOW). The seam between
   them is the brand's signature gesture.
   ========================================================================= */

:root {
  /* ---- FIELD (the theater) ------------------------------------------- */
  --fl-ink:        #0A0A0C;   /* page ground — warm near-black, never #000 */
  --fl-carbon:     #141419;   /* elevated surface / card */
  --fl-graphite:   #24242C;   /* hairline border, divider */
  --fl-slate-deep: #1B1B22;   /* recessed well, input background */

  /* ---- TYPE ---------------------------------------------------------- */
  --fl-paper:      #F2EFE8;   /* primary text — warm archival off-white */
  --fl-ash:        #97949F;   /* secondary text, metadata */
  --fl-mute:       #5E5B67;   /* tertiary, disabled */

  /* ---- NOW (the render) — primary accent ----------------------------- */
  --fl-signal:     #FF5D2E;   /* the accent. Use once per view, with intent. */
  --fl-ember:      #FFA23A;   /* gradient partner, hover lift */
  --fl-now-grad:   linear-gradient(340deg, #FF5D2E 0%, #FFA23A 100%);

  /* ---- THEN (the archive) — secondary accent ------------------------- */
  --fl-cyanotype:  #6E8FA8;   /* archival steel-blue: metadata, "then" state */
  --fl-slate:      #3F5A6B;   /* deep archive fill */
  --fl-then-grad:  linear-gradient(200deg, #48657A 0%, #33485A 100%);

  /* ---- FUNCTIONAL (UI states only — never brand identity) ------------ */
  --fl-verified:   #3E9C88;   /* approved / verified / delivered */
  --fl-caution:    #E0A32E;   /* stale / needs attention */
  --fl-refuse:     #E0523E;   /* blocked / failed / destructive */

  /* ---- TYPEFACES ----------------------------------------------------- */
  /* Display — editorial, film-credit. Instrument Serif (free, Google Fonts) */
  --fl-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  /* UI + wordmark — geometric grotesk. Geist (free, Vercel) */
  --fl-font-ui: 'Geist', 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Technical — timecodes, IDs, licences, metadata. Geist Mono (free) */
  --fl-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- TYPE SCALE (1.25 major third, 16px base) ---------------------- */
  --fl-text-xs:   0.75rem;    /* 12 — mono metadata */
  --fl-text-sm:   0.875rem;   /* 14 — secondary */
  --fl-text-base: 1rem;       /* 16 — body */
  --fl-text-lg:   1.25rem;    /* 20 — lead */
  --fl-text-xl:   1.75rem;    /* 28 — section */
  --fl-text-2xl:  2.5rem;     /* 40 — page title */
  --fl-text-3xl:  3.75rem;    /* 60 — display */
  --fl-text-4xl:  5.5rem;     /* 88 — hero */

  /* Wordmark lockup: uppercase, generous tracking, never condensed */
  --fl-wordmark-tracking: 0.12em;
  --fl-wordmark-weight: 600;

  /* ---- SPACE (4px base) ---------------------------------------------- */
  --fl-1: 0.25rem; --fl-2: 0.5rem;  --fl-3: 0.75rem; --fl-4: 1rem;
  --fl-6: 1.5rem;  --fl-8: 2rem;    --fl-12: 3rem;   --fl-16: 4rem;
  --fl-24: 6rem;   --fl-32: 8rem;

  /* ---- RADII (restrained — this is a film lab, not a toy) ------------- */
  --fl-r-sm: 3px; --fl-r-md: 6px; --fl-r-lg: 12px; --fl-r-slab: 3.5px;

  /* ---- MOTION — "THE WIPE" ------------------------------------------- */
  /* House gesture: directional wipes with a bright leading edge. Hard cuts
     over soft fades — a cut is cinematic, a crossfade is a slideshow.
     (Standing rule: a real morph is never a crossfade. Same principle here.) */
  --fl-dur-instant: 90ms;
  --fl-dur-cut:     140ms;   /* state flips, button press */
  --fl-dur-wipe:    380ms;   /* the signature reveal */
  --fl-dur-scrub:   680ms;   /* then→now transitions, hero */
  --fl-ease-wipe:   cubic-bezier(0.16, 1, 0.3, 1);      /* decisive out-expo */
  --fl-ease-scrub:  cubic-bezier(0.65, 0, 0.35, 1);     /* weighted in-out */
  --fl-ease-cut:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- ELEVATION (light comes from the render, warm) ----------------- */
  --fl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --fl-shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.55);
  --fl-shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.7);
  --fl-glow:      0 0 0 1px rgb(255 93 46 / 0.35), 0 8px 32px -8px rgb(255 93 46 / 0.30);

  /* ---- GRAIN (always present, never loud) ---------------------------- */
  --fl-grain-opacity: 0.035;
}

/* Respect the user. Motion is decoration; content is not. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fl-dur-instant: 0ms; --fl-dur-cut: 0ms;
    --fl-dur-wipe: 0ms; --fl-dur-scrub: 0ms;
  }
}