/* ===========================================================================
   DimeClip — SHARED DESIGN TOKENS. Single source of truth.

   Every page links this FIRST, before any other stylesheet. Before this file
   existed each base sheet (styles / marketing / widgets / clips / tagger /
   report) carried its own hand-maintained copy of the same :root block, and
   they had already drifted: marketing sat on --bg #0A0B0D while every other
   sheet used #07090D, so the landing page and the app were two different
   blacks; --text3 was #7A828D in styles.css but #8C95A1 in widgets.css; and
   the "hard-edge" geometry law below was contradicted outright by clips,
   tagger and report.

   RULES
   1. Palette, type stack and geometry live HERE and nowhere else.
   2. A base sheet may still override a token, but only when the difference is
      deliberate and commented (e.g. report.css remaps --gold to green for the
      report's own semantics; onboarding.css runs a gold --accent). Never
      re-declare a token just to restate the same value — that is how the
      drift above happened.
   =========================================================================== */
:root {
  /* The product is dark-only by design. Declaring it here (rather than leaving
     it unset) is what makes native UA surfaces — form controls, date pickers,
     scrollbars, autofill — render dark instead of shipping a light widget onto
     a near-black panel. */
  color-scheme: dark;

  /* Surfaces ------------------------------------------------------------- */
  --bg: #07090D;
  --bg2: #0C0D10;
  --surface: #0E1116;
  --surface2: #14181F;
  --surface3: #181E27;
  --border: #1E2127;
  --border2: #2A323E;

  /* Text ----------------------------------------------------------------- */
  --text0: #FBFBF9;
  --text1: #C2C8D0;
  --text2: #9AA2AC;
  /* Canonical --text3 is widgets.css's lighter value: it already served the
     ten studio pages, and it is the higher-contrast of the two that drifted. */
  --text3: #8C95A1;
  --text4: #868F9D;
  --text5: #7C8492;

  /* Call to action -------------------------------------------------------- */
  /* The colour of "the thing to press", kept as its own token on purpose:
     --accent is the DATA colour (a made shot, a positive split, a win). When
     the two shared one value every primary button competed with the numbers
     beside it. Gold wins because it is what a coach meets first. */
  --cta:      #F5B23D;
  --cta-hi:   #FFD27A;
  --cta-ink:  #171106;
  --cta-ring: color-mix(in srgb, var(--cta) 34%, transparent);

  /* BRAND gold is a different gold from the CTA gold above, on purpose: it is
     the logo/wordmark colour, carried by the login page's local palette and by
     the `.brand .mark` chip. It is declared here because premium.css's link
     safety net reads `var(--g-gold, var(--brand-gold, #F4B740))` and, with
     --brand-gold previously existing only inside a scoped rule, every link on
     every page fell through to a bare literal that matched no token. Same
     value, now anchored. */
  --brand-gold: #F4B740;
  --brand-gold-hi: #FFD37A;

  /* Accent (the ONE accent) ----------------------------------------------- */
  --accent: #2BE08C;
  --accent-hi: #3DED9B;
  --accent-weak: #16201B;
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent: #08140E;

  /* Semantic — STRICT PALETTE: no blue/purple/teal. --info is a true warm
     neutral (chrome/secondary), --violet a warm tan-gold. Both stay distinct
     from the green accent and the brand gold while remaining on-palette. */
  --info: #9A9690;
  --violet: #D9A441;
  --info-weak: #1C1B19;
  --violet-weak: #221C0E;
  --warn: #F5B23D;
  --danger: #FF6B6B;
  --danger-weak: #241317;
  --gold-weak: #221C0E;

  /* Type ------------------------------------------------------------------ */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* Geometry — Broadcast OS: hard-edge, absolute zero radius.
     "pill" is a 0px chip/key, never a rounded pill.

     The law used to be declared here and enforced almost nowhere. Roughly 640
     corners were hand-written literals instead — 2px was the most common by
     far, but 1/3/4/5/6/7/8/9/14px all appeared, sometimes for the same kind of
     element in the same file: styles.css alone gave .report-chip the token,
     .review-chip 2px and .stat-pill 6px. So the landing page's badges were
     visibly rounder than the studio's, and the law only governed the third of
     the UI that happened to route through the scale. Every corner now does.

     TWO CARVE-OUTS, and both say so at the point of use:
     1. Round by intent — circles (dots, playheads, avatars) at 50%, and thin
        progress TRACKS at 99px. These never route through these tokens, so
        hardening the scale here can never square off a circle. Five tracks
        that wrote this intent as 3px/4px — round at their height, but
        invisible to this rule — now say 99px like every other track.
     2. Multi-value shorthands (`2px 24px 0 0`) — deliberate directional
        silhouettes: the tagger's cut-corner sheet, the nav's indicator nub,
        segmented-control ends, bar-chart caps. Shape, not corner style.

     A bare single-value px radius anywhere in the app is now a bug. */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --radius-pill: 0px;

  /* Spacing ---------------------------------------------------------------
     A real scale, so padding and gaps match by construction instead of by
     eye. Before this, component padding was ad-hoc literals — 10/12/14/16/18/
     20px used near-interchangeably for the same job in different sheets,
     which is the same drift the palette had, one layer up. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Card surface ----------------------------------------------------------
     The studio card's layered "lit crown" gradient. These were three raw
     hexes inlined in widgets.css's .card; they are tokens now so the one
     card primitive in components.css has no literals of its own. Values are
     unchanged from that original rule. */
  --card-crown: #1A1F28;
  --card-top: #161B22;
  --card-base: #0C0F14;

  /* Tint inks --------------------------------------------------------------
     The two colours the UI tints WITH rather than paints in: white for a lit
     edge or a raised overlay, black for a shadow or a scrim. They were written
     out ~400 times as rgba(255,255,255,α) and rgba(0,0,0,α), which reads as a
     colour but means "lighten by α" / "darken by α".

     Naming them is what makes those two intents addressable, and that is the
     whole reason they exist: 400 copies of the same two decisions is the same
     drift this file was created to end, and it earns its keep today whether or
     not the palette ever moves.

     A second theme would also only have to flip these two — but that is a
     CONSEQUENCE, not a plan. The product is dark-only by design (see
     color-scheme at the top), no light palette exists, and none is in
     progress. Do not read this comment as one being underway. */
  --overlay-ink: #FFFFFF;
  --shadow-ink: #000000;

  /* Light & depth --------------------------------------------------------- */
  /* A crafted 1px border that reads as brushed metal: a hairline highlight on
     top blending to shadow at the base. */
  --hairline: color-mix(in srgb, var(--overlay-ink) 6%, transparent);
  --hairline-2: color-mix(in srgb, var(--overlay-ink) 10%, transparent);
  --shadow: 0 30px 70px -34px color-mix(in srgb, var(--shadow-ink) 72%, transparent);
  --shadow-lg: 0 44px 96px -32px color-mix(in srgb, var(--shadow-ink) 82%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-med: 180ms;

  /* Legacy aliases — older sheets (report.css and friends) inherit the
     current palette automatically instead of carrying stale hexes. */
  --ink: var(--text0);
  --muted: var(--text2);
  --navy-950: var(--bg);
  --navy-900: var(--bg2);
  --navy-800: var(--surface);
  --navy-700: var(--surface2);
  --line: var(--border);
  --gold: var(--warn);
  --green: var(--accent);
  --blue: var(--info);
  --red: var(--danger);
  --purple: var(--violet);
}