/* ------------------------------------------------------------------
   Design tokens — the single source of truth for colour, type, space,
   radius, elevation and motion. Every surface (internal studio, public
   transcript page, anything added later) loads this file first and
   styles itself only through these variables.

   Themes: dark is the default. `html[data-theme="light"]` flips the
   colour layer; nothing else changes.
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* ---- surface (dark) ---- */
  --bg: #0f0f10;             /* app canvas */
  --surface: #151516;        /* panels, cards */
  --sidebar: #151516;        /* the rail; ElevenLabs keeps it one step off the canvas */
  --surface-2: #1c1c1e;      /* inputs, list rows */
  --surface-3: #242427;      /* hover, pressed, selected */
  --line: #27272a;           /* default border (white 8%) */
  --line-strong: #36363b;    /* active edge (white 14%) */
  --thumb: #2e2e32;          /* poster placeholder on a selected row */
  --chip: rgba(255, 255, 255, 0.06);   /* chip and tool-tab fill */

  /* ---- ink (dark) ---- */
  --ink-strong: #f4f4f5;     /* headings, emphasis — 18:1 */
  --ink: #d4d4d8;            /* body copy — 11.5:1 */
  --ink-muted: #9a9aa0;      /* meta, descriptions — 7.4:1 */
  --ink-subtle: #7c7c85;     /* captions, labels — 4.6:1 */
  --ink-on-accent: #06201c;  /* text on an accent fill — 9.7:1 */

  /* ---- accent + status (dark) ---- */
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-quiet: rgba(45, 212, 191, 0.12);   /* selected-row wash */
  --accent-ring: rgba(45, 212, 191, 0.22);    /* focus halo */
  --ok: #8bd17c;
  --ok-line: #2c4a38;
  --ok-quiet: rgba(139, 209, 124, 0.12);
  --warn: #f5b747;
  --warn-line: #4b4022;
  --warn-quiet: rgba(245, 183, 71, 0.12);
  --danger: #f87171;
  --danger-line: #5a2e2e;
  --danger-quiet: rgba(248, 113, 113, 0.12);

  /* ---- shadow colour (theme-dependent) ---- */
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- type ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* eight steps: size / line-height / weight / tracking */
  --text-display: 400 24px/30px var(--font-sans);   /* page titles, ElevenLabs weight */
  --text-title: 500 18px/24px var(--font-sans);
  --text-heading: 500 14px/20px var(--font-sans);
  --text-body: 400 14px/22px var(--font-sans);
  --text-body-sm: 400 13px/20px var(--font-sans);
  --text-label: 500 12px/16px var(--font-sans);
  --text-micro: 500 11px/14px var(--font-sans);
  --text-mono: 400 13px/20px var(--font-mono);
  --tracking-tight: -0.01em;   /* display, title */
  --tracking-caps: 0.08em;     /* micro, uppercase */

  /* ---- space (8px grid, 4 for micro) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- motion ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- layout ---- */
  --rail-w: 320px;
  --topbar-h: 56px;
  --measure: 68ch;   /* transcript reading width */
  --tap-min: 44px;
}

/* The public transcript page (html[data-public]) always runs the light theme. */
html[data-theme="light"],
html[data-public] {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  --sidebar: #fafafa;
  --surface-2: #f4f4f5;
  --surface-3: #e8e8ea;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --thumb: #e8e8ea;
  --chip: rgba(0, 0, 0, 0.043);

  --ink-strong: #0f0f10;
  --ink: #1f1f23;
  --ink-muted: #5c5c63;
  --ink-subtle: #6b6b73;
  --ink-on-accent: #ffffff;

  --accent: #0b6a62;
  --accent-hover: #085850;
  --accent-quiet: rgba(11, 106, 98, 0.1);
  --accent-ring: rgba(11, 106, 98, 0.2);
  --ok: #2f6b45;
  --ok-line: #b9cfbe;
  --ok-quiet: rgba(62, 124, 82, 0.1);
  --warn: #8a5a00;
  --warn-line: #e3cf9a;
  --warn-quiet: rgba(154, 100, 0, 0.1);
  --danger: #c2413a;
  --danger-line: #edb8b4;
  --danger-quiet: rgba(194, 65, 58, 0.1);

  --shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.1);
}