/* ============================================================
   LabelLedger · design tokens
   Studied DNA: the "Factory" system (terminal war room at midnight) ·
   #101010 canvas, Geist 400 at tight negative tracking, mono as the
   instrument voice, zero shadows, depth by figure/ground contrast.

   Three deliberate deviations from the source system, all requested:
   1. NEUTRAL LADDER IS COOL GRAPHITE, not warm carbon. Hue 285.7°
      instead of ~60°. Matches macOS dark + the labelledger product's own
      dark mode (--card #1c1c21, --inset #2a2a31 are lifted verbatim).
   2. RADII ARE ROUNDER. Source: 3px buttons / 10px cards / 20px panels.
      Here: 10px controls / 18px cards / 24px panels · the labelledger
      product's own --r-card 18px and --r-pill 980px.
   3. CHROMATIC DATA PALETTE. The source allows two functional accents;
      this system carries six, drawn from Apple's dark system colours ·
      which are already the product's status semantics. The source's
      DISCIPLINE is kept intact: colour is data-voice only. Chrome (nav,
      buttons, cards) stays monochrome. Never a chromatic button fill.

   Contrast, measured against --color-paper / --color-surface:
     ink 17.7 / 15.6  ·  ink-2 7.7 / 6.8  ·  ink-3 5.6 / 5.0
     ink-4 2.9 / 2.6 -> NON-TEXT ONLY (hairlines, disabled, decoration)
     every ch-* channel >= 4.6 on both -> safe for data labels + focus ring
   ============================================================ */

:root {
  /* ---- surfaces: the void, then four steps up ---- */
  --color-paper: oklch(16.5% 0.006 285.7); /* #0e0e11 page canvas */
  --color-paper-2: oklch(20.6% 0.008 285.7); /* #17171b alt band, footer */
  --color-surface: oklch(22.9% 0.010 285.6); /* #1c1c21 card */
  --color-surface-2: oklch(25.9% 0.013 285.5); /* #23232a raised */
  --color-inset: oklch(28.8% 0.013 285.6); /* #2a2a31 inset well */
  --color-inset-2: oklch(32.8% 0.014 285.6); /* #34343c active well */

  /* ---- the bright figure on dark ground (the system's signature move) ---- */
  --color-light: oklch(95.6% 0.003 286.3); /* #f0f0f2 light card */
  --color-light-2: oklch(98.3% 0.003 286.0); /* #fbfbfd light control */

  /* ---- ink ladder ---- */
  --color-ink: oklch(97.1% 0.003 286.4); /* #f5f5f7 */
  --color-ink-2: oklch(71.9% 0.014 286.0); /* #a3a3ad body muted */
  --color-ink-3: oklch(63.6% 0.013 286.0); /* #8a8a93 tertiary, labels */
  --color-ink-4: oklch(47.8% 0.016 285.8); /* #5c5c66 NON-TEXT ONLY */

  /* ---- hairlines: depth by tone, never by shadow ---- */
  --color-rule: oklch(100% 0 0 / 0.1);
  --color-rule-soft: oklch(100% 0 0 / 0.055);
  --color-rule-strong: oklch(100% 0 0 / 0.16);
  --color-rule-on-light: oklch(0% 0 0 / 0.1);

  /* ---- chromatic data channels (Apple dark system colours) ---- */
  --color-ch-blue: oklch(62.4% 0.206 255.5); /* #0a84ff tenant accent, primary series */
  --color-ch-green: oklch(75.6% 0.208 147.0); /* #30d158 delivered, positive */
  --color-ch-amber: oklch(82.0% 0.152 73.2); /* #ffb340 held, pending */
  --color-ch-red: oklch(66.3% 0.224 28.3); /* #ff453a blocked, negative */
  --color-ch-violet: oklch(65.6% 0.227 312.4); /* #bf5af2 rights, protection */
  --color-ch-cyan: oklch(81.7% 0.119 227.7); /* #64d2ff reach, streams */

  /* soft washes of the channels · fills for chips and chart bodies only */
  --color-ch-blue-soft: oklch(62.4% 0.206 255.5 / 0.16);
  --color-ch-green-soft: oklch(75.6% 0.208 147.0 / 0.16);
  --color-ch-amber-soft: oklch(82.0% 0.152 73.2 / 0.16);
  --color-ch-red-soft: oklch(66.3% 0.224 28.3 / 0.16);
  --color-ch-violet-soft: oklch(65.6% 0.227 312.4 / 0.16);
  --color-ch-cyan-soft: oklch(81.7% 0.119 227.7 / 0.16);

  /* chart series. Store colours read from distro lib/platform-colors.ts so a
     trend here carries the same colour per store as the dashboards do. These
     are page level, not tenant level, so they live on :root. */
  --color-series-total: #2f70ff;
  --color-series-spotify: #1db954;
  --color-series-apple: #fa243c;
  --color-series-amazon: #00a8e1;
  --color-series-youtube: #ff0000;
  --color-series-other: #868e96;

  --color-focus: oklch(62.4% 0.206 255.5);
  --color-glass: oklch(16.5% 0.006 285.7 / 0.72);

  /* ---- type ---- */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Authority comes from size and tightness, never from weight. 400 is the
     voice of the whole page; 500 appears only where a label must dominate
     a dense instrument surface. */
  --weight-regular: 400;
  --weight-medium: 500;

  /* fluid scale, source values as the desktop ceiling */
  --text-display: clamp(2.5rem, 1.35rem + 5.1vw, 4.5rem); /* 40 -> 72 */
  --text-display-s: clamp(2rem, 1.3rem + 3.1vw, 2.75rem); /* 32 -> 44 */
  --text-h: clamp(1.5rem, 1.15rem + 1.55vw, 2.25rem); /* 24 -> 36 */
  --text-h-s: 1.25rem; /* 20 */
  --text-body: 1rem; /* 16 */
  --text-body-s: 0.875rem; /* 14 */
  --text-caption: 0.75rem; /* 12 · mono, uppercase */
  --text-micro: 0.6875rem; /* 11 · densest instrument labels */

  --leading-display: 1;
  --leading-h: 1.1;
  --leading-body: 1.5;
  --leading-tight: 1.2;
  --leading-flat: 1;

  /* tracking scales with size: -0.04em at 72px down to -0.02em at 12px */
  --tracking-display: -0.04em;
  --tracking-display-s: -0.031em;
  --tracking-h: -0.025em;
  --tracking-body: -0.011em;
  --tracking-caption: -0.02em;
  --tracking-wide: 0.09em; /* the wordmark and rail labels only */

  /* ---- 8pt space scale ---- */
  --space-2xs: 0.5rem; /* 8 */
  --space-xs: 1rem; /* 16 */
  --space-sm: 1.5rem; /* 24 */
  --space-md: 2rem; /* 32 */
  --space-lg: 2.5rem; /* 40 */
  --space-xl: 3.5rem; /* 56 */
  --space-2xl: 5rem; /* 80 */
  --space-3xl: 6rem; /* 96 · the section gap */
  --space-4xl: 7.5rem; /* 120 */

  --section-gap: clamp(var(--space-2xl), 8vw, var(--space-4xl));
  --page-max: 1200px;
  --page-max-wide: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --card-pad: clamp(1.25rem, 2.4vw, 1.5rem);

  /* ---- radii: rounder than the source system, per the product's own ---- */
  --radius-xs: 6px; /* tags, dots, chips */
  --radius-sm: 10px; /* buttons, inputs, nav controls */
  --radius-md: 12px; /* inner surfaces inside a card */
  --radius-lg: 18px; /* cards */
  --radius-xl: 24px; /* large panels, product figures */
  --radius-pill: 980px;

  /* ---- hairline weights ---- */
  --rule-hair: 1px;
  --rule-heavy: 2px;

  /* ---- elevation ----
     Cards are lifted, not outlined. A 1px stroke around every card is the
     drawn-box look; this is the labelledger product's own single shadow,
     lifted verbatim from its dark tokens: a 0.5px light ring that defines
     the edge, a tight 1px contact shadow, and one wide soft cast. That
     ring is what replaces the border, so the card still has a crisp edge
     without a line drawn around it.
     Hairlines survive only as DIVIDERS between rows inside a card. */
  --shadow-card:
    0 0 0 0.5px oklch(100% 0 0 / 0.05), 0 1px 1.5px oklch(0% 0 0 / 0.5),
    0 14px 30px -18px oklch(0% 0 0 / 0.85);
  --shadow-raised:
    0 0 0 0.5px oklch(100% 0 0 / 0.07), 0 2px 4px oklch(0% 0 0 / 0.5),
    0 24px 50px -24px oklch(0% 0 0 / 0.9);
  --shadow-overlay: 0 24px 60px -20px oklch(0% 0 0 / 0.62);
  /* the one shadow that sits on a LIGHT surface (the closing card) */
  --shadow-on-light:
    0 0 0 0.5px oklch(0% 0 0 / 0.06), 0 1px 1.5px oklch(0% 0 0 / 0.06),
    0 18px 40px -20px oklch(0% 0 0 / 0.45);

  /* ---- motion: short and mechanical, the feel of a CLI ---- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- z scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 500;
  --z-overlay: 1000;

  --nav-h: 64px;
}

/* ============================================================
   TENANT PREVIEW SURFACE (.pv)
   These are NOT page tokens. Inside the live preview the product uses the
   tenant's own literal identity values, not LabelLedger's, and the source
   stylesheet says so outright. They are reproduced here verbatim from
   styles StudioPreview.module.css (.pvdark branch) so the recreated screen
   is the shipping screen, not an interpretation of it.
   ============================================================ */
.pv {
  --pv-accent: #0071e3;
  --pv-accent-soft: rgba(0, 113, 227, 0.26);
  --pv-r: 16px;
  --pv-ri: 10px;
  --pv-gap: 18px;
  --pv-pad: 22px;
  --pv-fs: 1;

  /* dark neutral ladder · only these flip by mode, never the accent or type */
  --pv-bg: #121316;
  --pv-card: #1c1c21;
  --pv-inset: #2a2a31;
  --pv-ink: #f5f5f7;
  --pv-ink-2: #a3a3ad;
  --pv-ink-3: #8a8a93;
  --pv-ink-4: #5c5c66;
  --pv-ink-invert: #15151a;
  --pv-hair: rgba(255, 255, 255, 0.1);
  --pv-seam: rgba(255, 255, 255, 0.06);
  --pv-seam-2: rgba(255, 255, 255, 0.08);
  --pv-chrome: rgba(28, 28, 33, 0.85);

  /* status semantics · mode independent in light, these are the dark values */
  --pv-pos: #30d158;
  --pv-pos-soft: rgba(48, 209, 88, 0.16);
  --pv-hold: #ffb340;
  --pv-hold-soft: rgba(255, 179, 64, 0.16);
  --pv-neg: #ff453a;

  /* the product's one card shadow, dark branch */
  --pv-sh: 0 0 0 0.5px rgba(255, 255, 255, 0.05), 0 1px 1.5px rgba(0, 0, 0, 0.5),
    0 12px 28px -16px rgba(0, 0, 0, 0.7);

  /* DSP brand colours, from the Connections panel data */
  --pv-spotify: #1db954;
  --pv-apple: #fa243c;
  --pv-youtube: #86868b;
  --pv-deezer: #a238ff;
}