/*
 * tokens.css — every colour, radius, space and type size the page uses.
 *
 * The values are lifted from the approved mockups: `docs/plans/2026-09-09-mosaic-edit-mockups/
 * gen_mocks.py` (`PAL["orange"]` and the `CSS` block it renders `shots/GuidedStudio.png` from).
 * The rule for every component from here on: **no file but this one names a colour.** A component
 * that needs a new shade adds a token here, so the second theme keeps working and so the design can
 * change without touching behaviour (spec section 5, "built to evolve").
 *
 * Two themes live here, exactly as the palette sheet shows them (shots/Palette.png):
 *   default            burgundy + light orange — the owner's choice, 2026-09-09
 *   [data-theme=silver] burgundy + silver — the palette the videos already use, kept as a second set
 * Switch with `document.documentElement.dataset.theme = "silver"`. Only the accent family changes;
 * the burgundy ground, the geometry and the type scale are shared, because they are the identity.
 *
 * `--font-*` name the families; `styles.css` carries the `@font-face` rules that load them from
 * `assets/fonts/` (self-hosted: the CSP is `default-src 'self'` and there is no CDN).
 */

:root {
  /* ---- accent family (PAL["orange"]) ------------------------------------------------------- */
  --accent: #F2B27C;                    /* handles, active states, primary button, hairlines      */
  --accent2: #EE9A57;                   /* hover, low-confidence marks                            */
  --hair: rgba(242, 178, 124, .45);     /* a visible hairline                                     */
  --hairsoft: rgba(242, 178, 124, .18); /* a structural divider                                   */
  --glow: rgba(242, 178, 124, .22);     /* selection fill, focus ring                             */
  --text: #F7EFE9;                      /* body text                                              */
  --dim: #DCC0B9;                       /* secondary text                                         */
  --faint: #B48E90;                     /* labels, hints                                          */
  --onaccent: #3A0910;                  /* text ON the accent (never white)                       */

  /* ---- the burgundy ground (brand.json burgundy family; shared by both themes) -------------- */
  --bg0: #6B1424;                       /* top of the page gradient                               */
  --bg1: #4B0E1A;                       /* bottom of the gradient, and the page behind it         */
  --panel: rgba(255, 255, 255, .055);   /* a card on the ground                                   */
  --panel-strong: rgba(255, 255, 255, .085);
  --track: rgba(0, 0, 0, .30);          /* a timeline track                                       */
  --sunk: rgba(0, 0, 0, .18);           /* the top bar                                            */
  --sunk-soft: rgba(0, 0, 0, .12);      /* a pill                                                 */
  --sunk-faint: rgba(0, 0, 0, .10);     /* a ghost button                                         */
  --scrim: rgba(0, 0, 0, .55);          /* over video                                             */
  --sheen: radial-gradient(ellipse 60% 40% at 50% -8%, rgba(255, 255, 255, .09), transparent 60%);

  /* The brushed-silver sweep of the wordmark (mockup `.wordmark`). A gradient, so it is a token
   * here rather than four hex values in a rule — and it is the same in both themes: the wordmark
   * is the brand, not the accent. */
  --wordmark-sheen: linear-gradient(178deg, #FFFFFF 12%, #EAECEF 38%, #C9CED6 62%, #9BA1AB 88%);

  /* ---- the caption identity (locked; shown, never configurable — spec section 2) ------------ */
  --capsilver: #C9CED6;                 /* caption body                                           */
  --capred: #A4232E;                    /* caption emphasis, and the page's only "wrong" colour   */
  /* The caption's own shadow, which is what keeps it legible on a bright frame. One token because
   * it is one value of the identity, exactly as the mockup's `.capline` wrote it. */
  --capshadow: 0 2px 10px rgba(0, 0, 0, .92), 0 0 26px rgba(0, 0, 0, .6), 0 0 3px rgba(0, 0, 0, .9);

  /* ---- over the video (Task 18) -------------------------------------------------------------- */
  /* The player's ground is not the page's: it is the black a video is letterboxed against, and it
   * is the same in both themes because it is not a brand colour — it is the absence of one. The HUD
   * sits ON it, so it is a near-white rather than the burgundy-tinted `--text`. */
  --videobg: #120406;                   /* the player box behind the picture (mockup `.player`)   */
  --onvideo: #EAECEF;                   /* the timecode and HUD drawn over the video              */

  /* ---- the timeline (Task 17) ---------------------------------------------------------------- */
  /* Achromatic on purpose, so both themes share them: the section shading and the playhead are
   * "where you are", not "what brand this is", and a tinted playhead over a filmstrip disappears
   * the moment the footage is that colour. Values from the mockup's `.range` and `.playhead`. */
  --tl-range: rgba(255, 255, 255, .035); /* the section, shaded across every track                */
  --tl-chip: rgba(255, 255, 255, .07);   /* a word chip on the Words track                        */
  --playhead: #FFFFFF;                   /* where the player is                                   */
  --playhead-glow: rgba(255, 255, 255, .7);

  /* ---- geometry ----------------------------------------------------------------------------- */
  --radius: 14px;                       /* panel                                                  */
  --radius-md: 10px;                    /* tile, note, small card                                 */
  --radius-sm: 6px;                     /* track, chip on video                                   */
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---- space (the mockup's own rhythm) ------------------------------------------------------ */
  --s1: 4px;
  --s2: 6px;
  --s3: 8px;
  --s4: 10px;
  --s5: 12px;
  --s6: 14px;
  --s7: 16px;
  --s8: 20px;
  --s9: 24px;
  --topbar-h: 56px;
  --page-max: 1440px;                   /* the artboard width the mockups were drawn at           */

  /* ---- type --------------------------------------------------------------------------------- */
  --font-head: "Sora";
  --font-body: "Manrope";
  --font-ar: "Cairo";
  --stack-head: var(--font-head), var(--font-ar), "Segoe UI", system-ui, sans-serif;
  --stack-body: var(--font-body), var(--font-ar), "Segoe UI", system-ui, sans-serif;
  --stack-ar: var(--font-ar), "Segoe UI", system-ui, sans-serif;

  --t-xs: 10px;
  --t-s: 11px;
  --t-sm: 12px;
  --t-base: 13px;
  --t-md: 14px;
  --t-lg: 15px;
  --t-xl: 18px;
  --t-2xl: 20px;
  --t-3xl: 24px;
  --lh-body: 1.35;
  --lh-read: 1.55;
  --track-caps: .07em;                  /* letter-spacing of the small uppercase labels           */

  /* ---- motion (one duration, one curve; a component never invents its own) ------------------ */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 120ms;
  --slow: 240ms;

  /* ---- what a status MEANS (the chips in the jobs list) ------------------------------------- */
  --state-live: var(--accent);          /* ingesting · queued · running — the pipeline is working  */
  --state-done: var(--accent);          /* done — filled, not outlined                            */
  --state-idle: var(--faint);           /* draft · ready — waiting for a person                   */
  --state-bad: var(--capred);           /* failed                                                 */
}

/* The second token set. Same geometry, same ground, silver accent family (PAL["silver"]). */
:root[data-theme="silver"] {
  --accent: #C9CED6;
  --accent2: #EAECEF;
  --hair: rgba(201, 206, 214, .42);
  --hairsoft: rgba(201, 206, 214, .16);
  --glow: rgba(201, 206, 214, .18);
  --text: #F4F1EE;
  --dim: #D4C9C9;
  --faint: #AC989C;
  --onaccent: #3A0910;
}

/* Arabic is an interface language, not a translation: when the page is Arabic, Cairo leads every
 * stack (spec section 5). Latin text inside Arabic keeps working — Cairo carries Latin glyphs — and
 * Arabic inside an English page also renders correctly, because Cairo is the fallback in every
 * stack above. Reem Kufi is deliberately absent: it belongs to the videos, never to this page. */
:root[lang="ar"] {
  --stack-head: var(--font-ar), "Segoe UI", system-ui, sans-serif;
  --stack-body: var(--font-ar), "Segoe UI", system-ui, sans-serif;
}