/* ============================================================
   Kraven Design System — B-roll Animation Subsystem
   Clean, premium, minimalist keyword B-roll for short-form &
   landscape video. Light canvas, dark-gray text, one restrained
   brand accent. Recomposes for 9:16 and 16:9 — not a resize.

   Fonts inherited from foundations: Geist (sans), Geist Mono.
   Consume these tokens inside the B-roll engine only; the rest
   of the system stays dark-first.
   ============================================================ */

:root {
  /* ---------- Canvas (clean white / warm off-white) ---------- */
  --broll-bg:        #FAFAF8;   /* default warm off-white */
  --broll-bg-pure:   #FFFFFF;
  --broll-bg-warm:   #F7F7F5;

  /* ---------- Text (dark gray — never pure black) ---------- */
  --broll-fg:        #1D1D1F;   /* primary keyword */
  --broll-fg-alt:    #262626;
  --broll-fg-2:      #737373;   /* supporting label */
  --broll-fg-3:      #86868B;   /* faint meta */

  /* ---------- Accent (single restrained brand indigo) ---------- */
  --broll-accent:      #6366F1;   /* brand-500 */
  --broll-accent-soft: rgba(99,102,241,.12);
  --broll-accent-line: rgba(99,102,241,.22);

  /* semantic-only accents (warning / negative / positive B-roll) */
  --broll-warn:      #B7791F;   /* muted amber, AA on off-white */
  --broll-warn-soft: rgba(183,121,31,.12);
  --broll-neg:       #C0392B;
  --broll-pos:       #1E874B;

  --broll-hair:      rgba(29,29,31,.10);   /* hairline dividers */

  /* ---------- Safe area (% inset from each canvas edge) --------
     Keep all critical text within these bounds. 9:16 needs a
     larger vertical inset to clear platform UI controls. */
  --broll-safe-x-916: 8%;
  --broll-safe-y-916: 14%;
  --broll-safe-x-169: 6%;
  --broll-safe-y-169: 9%;

  /* ---------- Type — expressed as % of CANVAS HEIGHT ----------
     9:16 primary 10–18%h · 16:9 primary 8–14%h. */
  --broll-primary-916:   12;    /* @kind other */
  --broll-primary-169:   12;    /* @kind other */
  --broll-support-916:   3.4;   /* @kind other */
  --broll-support-169:   3.2;   /* @kind other */
  --broll-label-916:     2.4;   /* @kind other */
  --broll-label-169:     2.2;   /* @kind other */

  --broll-weight-primary: 680;  /* semibold→bold keyword @kind other */
  --broll-weight-support: 500;  /* @kind other */
  --broll-tracking:      -0.03em; /* @kind other */

  /* ---------- Motion (restrained, meaning-first) ---------- */
  --broll-ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --broll-ease-soft: cubic-bezier(0.33, 0, 0.16, 1);   /* @kind other */
  --broll-in:        320ms;   /* @kind other */
  --broll-hold:      2200ms;  /* @kind other */
  --broll-out:       220ms;   /* @kind other */
  --broll-scale-from: 0.965;  /* @kind other */
  --broll-rise:      3.2%;     /* upward move on reveal (of h) @kind other */
}