/* ==========================================================================
   SHOTREAD design tokens, v2: "bright room, dark monitor, yellow marker"
   One file for the marketing site and the app.

   Why v2 exists: v1 (cream paper, serif, hairlines, numbered sections) was
   the generic AI look and had nothing of the product's world in it. v2 is
   built from that world: the edit suite (a bright room with a dark monitor),
   the highlighter and marker colours editors use to mark moments and label
   clips, and the loud, condensed type of thumbnails and lower thirds.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- The room: bright, cool, chalky. Never cream. ---------------------- */
  --bg:            #FFFFFF;
  --bg-2:          #F1F2EF;   /* studio grey: panels, rails, table heads */
  --bg-3:          #E4E6E1;   /* pressed / hover grey */
  --line:          #D3D6D0;   /* ordinary 1px separation */
  --line-ink:      #0E0F0C;   /* 2px black outline for emphasised containers */

  /* ---- Ink ------------------------------------------------------------- */
  --ink:           #0E0F0C;
  --ink-2:         #45483F;
  --ink-3:         #676B63;   /* captions, 13px and up only */
  --ink-4:         #A8ACA4;   /* disabled */

  /* ---- The monitor: a dark canvas inside the bright room. ---------------
     Used only where footage lives: the player, the filmstrip, the retention
     scope, a frame's timecode badge. It is a surface, not a theme. ----- */
  --monitor:       #0F1110;
  --monitor-2:     #1B1E1C;
  --monitor-line:  #2E3230;
  --monitor-ink:   #F5F6F2;
  --monitor-dim:   #9DA29B;

  /* ---- The mark: highlighter yellow. Means "marked", "selected", "now".
     Never means warning. Black text on it only. ------------------------- */
  --mark:          #FFE500;
  --mark-2:        #FFF3A6;   /* soft highlight sweep behind text */
  --mark-ink:      #0E0F0C;

  /* ---- Signals: data only, never decoration. --------------------------- */
  --ok:            #15A35E;  --ok-soft:     #DCF5E8;
  --warn:          #FF7A1A;  --warn-soft:   #FFE6D3;
  --bad:           #F0243A;  --bad-soft:    #FFE0E4;
  --bad-strong:    #C8102E;  /* filled danger buttons: white text at 5.9:1 (--bad gives 4.2:1, below WCAG AA) */
  --live:          #F0243A;   /* tally light: a live review room is "on air" */

  /* ---- Heat: energy and pacing, cool to hot. No yellow in the ramp. ---- */
  --heat-low:      #58BDFF;
  --heat-mid:      #FF7A1A;
  --heat-high:     #F0243A;

  /* ---- Labels: the marker colours editors put on clips. Six, fixed.
     Clients, lenses, note authors and chart series pick from these. ----- */
  --label-lemon:     #FFE500;
  --label-tangerine: #FF7A1A;
  --label-magenta:   #FF3D8E;
  --label-violet:    #7A5CFF;
  --label-cerulean:  #1E8FFF;
  --label-mint:      #1FD1A5;

  /* ---- Focus ----------------------------------------------------------- */
  --focus:         #1E8FFF;

  /* ---- Type -----------------------------------------------------------
     One family with a width axis does the whole job: condensed and heavy
     for numerals and headlines (thumbnail energy), normal width for UI,
     expanded for small uppercase labels (lower-third energy). Mono for
     timecode only. ----------------------------------------------------- */
  --font:          'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'Azeret Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --wdth-condensed: 62;
  --wdth-narrow:    80;
  --wdth-normal:    100;
  --wdth-wide:      118;

  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem;    --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem;    --fs-32: 2rem;    --fs-40: 2.5rem;
  --fs-56: clamp(2.75rem, 1.6rem + 3.8vw, 3.5rem);
  --fs-80: clamp(3.5rem, 1.6rem + 6.4vw, 5rem);
  --fs-120: clamp(4.5rem, 1.2rem + 10vw, 7.5rem);

  --lh-display: 0.92;
  --lh-tight: 1.1;
  --lh-ui: 1.35;
  --lh-body: 1.5;

  /* ---- Space (4px) ----------------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- Radii: three, by role. Frames and the monitor are square. -------
     Controls are 6px. Labels and chips are pills. Nothing else. --------- */
  --r-frame: 0;
  --r-control: 6px;
  --r-pill: 999px;

  /* ---- Motion: fast and flat. The only things that move are the playhead,
     a filmstrip scrub, and a highlight sweep on first paint. ------------ */
  --t-fast: 110ms cubic-bezier(.3,.7,.3,1);
  --t-base: 180ms cubic-bezier(.3,.7,.3,1);
  --t-sweep: 420ms cubic-bezier(.2,.8,.2,1);

  /* ---- Layout ---------------------------------------------------------- */
  --console-h: 44px;         /* the black bar across the top of the app */
  --rail-w: 224px;
  --rail-w-collapsed: 56px;
  --margin-w: 336px;
  --site-max: 1280px;
  --gutter: 16px;
}

@media (min-width: 720px)  { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-sweep: 0ms; } }