/* ============================================================
   KOAF&K STARTNOW — INVESTOR CINEMATIC PRODUCT FILM
   tokens.css — the single source of truth for the visual system
   ------------------------------------------------------------
   Palette is derived from the live STARTNOW product UI so the
   film and the product read as one brand:
       deep green  #0B3E27   (product hero surfaces)
       lime        #CDF546   (product accent / CTA)
       cream       #F3E9D2   (product page background)
       gold        #C9A227   (reserved for investor / financial
                              sections only — see rule below)
   The film inverts the product: the product is cream-on-green,
   the film is green-black with light. Same family, night mode.
   ============================================================ */

:root {

  /* ---- Surfaces: a GREEN-black, never a neutral black -------- */
  --void:            #030806;   /* deepest backdrop            */
  --ink-deep:        #061310;   /* stage floor                 */
  --ink:             #081914;   /* raised surface              */
  --ink-panel:       #0B2119;   /* glass panel base            */
  --ink-line:        #16362A;   /* hairline dividers           */

  /* ---- Brand greens ----------------------------------------- */
  --green-core:      #0B3E27;
  --green-lift:      #12634A;
  --green-glow:      #1C8A63;

  /* ---- Accents ---------------------------------------------- */
  --lime:            #CDF546;
  --lime-soft:       #E4FF9A;
  --lime-dim:        #8FAE3C;
  --gold:            #C9A227;   /* investor / money sections    */
  --gold-soft:       #E8CE72;

  /* ---- Neutrals --------------------------------------------- */
  --cream:           #F3E9D2;
  --white:           #FFFFFF;
  --mist-90:         rgba(243, 233, 210, 0.92);
  --mist-70:         rgba(243, 233, 210, 0.70);
  --mist-52:         rgba(243, 233, 210, 0.52);
  --mist-34:         rgba(243, 233, 210, 0.34);
  --mist-18:         rgba(243, 233, 210, 0.18);
  --mist-08:         rgba(243, 233, 210, 0.08);

  /* ---- Glass ------------------------------------------------- */
  --glass-fill:      rgba(14, 42, 33, 0.42);
  --glass-fill-hi:   rgba(24, 62, 48, 0.55);
  --glass-edge:      rgba(205, 245, 70, 0.16);
  --glass-edge-soft: rgba(243, 233, 210, 0.10);
  /* Backdrop blur is the single most expensive property in the film
     and it is applied to every glass panel. 26px was costing more
     than it was worth; 12px is visually equivalent over these
     backgrounds. js/app.js drops it to 0 automatically on machines
     that cannot keep frame rate. */
  --glass-blur:      12px;

  /* ---- Typography -------------------------------------------
     No web fonts are fetched. On macOS this resolves to SF Pro —
     the same family used in Apple keynote typography — and on
     Windows to Segoe UI Variable. Both are optically sized and
     hold up at display weights, which a fetched fallback would
     not guarantee offline.
     ----------------------------------------------------------- */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI Variable Display", "Segoe UI", Inter,
                  system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "SF Pro Text", -apple-system, BlinkMacSystemFont,
                  "Segoe UI Variable Text", "Segoe UI", Inter,
                  system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-utility: "SF Mono", "JetBrains Mono", "Cascadia Mono",
                  ui-monospace, Menlo, Consolas, monospace;

  /* Display scale.
     Deliberately fixed pixels, not viewport units: the whole film
     composes inside a 1920x1080 frame that is scaled to fit, so
     viewport units would re-flow the layout at every window size
     and break the guarantee that a 1080p and a 4K recording are
     the same composition. These values are the 1920-frame sizes.
     Tracking tightens as size grows, the way optical sizing does. */
  --t-mega:      132px;
  --t-hero:      92px;
  --t-title:     54px;
  --t-sub:       30px;
  --t-lead:      19px;
  --t-body:      16px;
  --t-caption:   12.5px;
  --t-eyebrow:   11.5px;

  --track-mega:   -0.045em;
  --track-hero:   -0.036em;
  --track-title:  -0.026em;
  --track-sub:    -0.014em;
  --track-body:    0em;
  --track-eyebrow: 0.30em;

  --w-thin: 200;
  --w-reg:  400;
  --w-med:  500;
  --w-semi: 600;
  --w-bold: 700;

  /* ---- Space ------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --gutter: 110px;

  /* ---- Radius ------------------------------------------------ */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 34px;
  --r-phone: 52px;

  /* ---- Elevation --------------------------------------------- */
  --shadow-soft:  0 18px 60px rgba(0, 0, 0, 0.45);
  --shadow-deep:  0 60px 160px rgba(0, 0, 0, 0.72);
  --shadow-lime:  0 0 70px rgba(205, 245, 70, 0.18);
  --shadow-gold:  0 0 70px rgba(201, 162, 39, 0.18);

  /* ---- Motion ------------------------------------------------ */
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drift:     cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- Stage --------------------------------------------------
     The film composes against a fixed 16:9 design frame and is
     scaled to fit any viewport, so a 1080p recording and a 4K
     recording are identical compositions, not reflowed layouts. */
  --frame-w: 1920;
  --frame-h: 1080;
}

/* Motion-reduced viewers still get the film, but the ambient
   drift, particle field and glow pulses are stilled. */
@media (prefers-reduced-motion: reduce) {
  :root { --ambient-motion: 0; }
}
:root { --ambient-motion: 1; }