/* Hallmark · genre: modern-minimal · theme: custom «Голос» (Voice)
 * vibe: "warm human voice, linen call sheet, quiet office daylight"
 * paper oklch(97.8% 0.005 80) · accent oklch(52% 0.135 45) voice-terracotta · Onest + JetBrains Mono
 * axes: light / geometric-grotesk sans / warm accent
 *
 * Govorun design tokens. Colour space: OKLCH. Three layers:
 *   1. primitives  (--voice-*, --linen-*, --graphite-*, hue ramps)  — raw values, never used in components
 *   2. semantic    (--surface-*, --text-*, --line-*, --accent-*, --tone-*) — what pages use
 *   3. component   (--btn-*, --control-*, --chip-*, --ribbon-*)          — what components.css uses
 * Every colour in the product traces to this file. A value that is missing gets a token here first.
 */

:root {
  /* ── 1. Primitives ─────────────────────────────────────────────── */

  /* Linen: warm, barely tinted neutrals (hue 75–80, chroma ≤ 0.012) */
  --linen-0:   oklch(99.6% 0.002 80);
  --linen-50:  oklch(97.8% 0.005 80);
  --linen-100: oklch(95.6% 0.007 80);
  --linen-200: oklch(92.4% 0.008 78);
  --linen-300: oklch(88.6% 0.009 76);
  --linen-400: oklch(80% 0.010 74);
  --linen-500: oklch(64% 0.011 70);

  /* Graphite: the ink, warm (hue 60–70) */
  --graphite-400: oklch(58% 0.010 68);
  --graphite-500: oklch(48% 0.011 66);
  --graphite-600: oklch(38% 0.012 64);
  --graphite-700: oklch(30% 0.012 62);
  --graphite-800: oklch(23% 0.012 60);
  --graphite-900: oklch(18% 0.011 58);

  /* Voice: warm terracotta, the colour of the robot speaking. 500 is the signature fill, 600 the text/link value */
  --voice-50:  oklch(96.8% 0.020 60);
  --voice-100: oklch(93% 0.045 58);
  --voice-200: oklch(87% 0.075 55);
  --voice-300: oklch(78% 0.110 52);
  --voice-500: oklch(62% 0.150 46);
  --voice-600: oklch(52% 0.135 45);
  --voice-700: oklch(44% 0.115 44);

  /* Outcome hues. Chosen far from the voice accent (45°) so a status never reads as brand */
  --leaf-50:  oklch(96% 0.035 150);
  --leaf-200: oklch(86% 0.080 150);
  --leaf-600: oklch(50% 0.120 150);
  --sky-50:   oklch(96.2% 0.022 245);
  --sky-200:  oklch(87% 0.055 245);
  --sky-600:  oklch(50% 0.130 250);
  --straw-50:  oklch(96.5% 0.045 98);
  --straw-200: oklch(89% 0.100 98);
  --straw-600: oklch(50% 0.100 92);
  --dusk-50:  oklch(96% 0.020 300);
  --dusk-200: oklch(87% 0.045 300);
  --dusk-600: oklch(48% 0.100 300);
  --lagoon-50:  oklch(96.2% 0.025 195);
  --lagoon-200: oklch(86% 0.060 195);
  --lagoon-600: oklch(48% 0.090 200);
  --crimson-50:  oklch(96.2% 0.025 18);
  --crimson-200: oklch(86% 0.070 18);
  --crimson-600: oklch(50% 0.170 20);

  /* ── 2. Semantic ───────────────────────────────────────────────── */

  /* Surfaces — light mode only; elevation is a ring + soft shadow, not a colour jump */
  --surface-page:    var(--linen-50);
  --surface-card:    var(--linen-0);
  --surface-sunken:  var(--linen-100);   /* inputs, wells, table header */
  --surface-hover:   var(--linen-100);
  --surface-selected: var(--voice-50);
  --surface-inverse: var(--graphite-900);

  /* Text — four levels */
  --text-strong:  var(--graphite-900);   /* headings, figures */
  --text-body:    var(--graphite-700);   /* running text */
  --text-muted:   var(--graphite-500);   /* labels, metadata */
  --text-faint:   var(--graphite-400);   /* disabled, placeholders on large controls only */
  --text-inverse: var(--linen-50);

  /* Lines */
  --line-soft:    var(--linen-200);      /* dividers inside a card */
  --line:         var(--linen-300);      /* card edges */
  --line-control: var(--linen-500);      /* input / checkbox boundary, ≥ 3:1 on card */

  /* Accent: voice. Fill for the signature, text value for links and active nav */
  --accent:        var(--voice-500);
  --accent-text:   var(--voice-600);
  --accent-strong: var(--voice-700);
  --accent-soft:   var(--voice-50);
  --accent-tint:   var(--voice-100);
  --focus-ring:    var(--voice-500);

  /* Outcome tones: text value, soft background, border */
  --tone-ready-text: var(--leaf-600);    --tone-ready-bg: var(--leaf-50);    --tone-ready-line: var(--leaf-200);
  --tone-info-text:  var(--sky-600);     --tone-info-bg:  var(--sky-50);     --tone-info-line:  var(--sky-200);
  --tone-warn-text:  var(--straw-600);   --tone-warn-bg:  var(--straw-50);   --tone-warn-line:  var(--straw-200);
  --tone-machine-text: var(--dusk-600);  --tone-machine-bg: var(--dusk-50);  --tone-machine-line: var(--dusk-200);
  --tone-danger-text: var(--crimson-600); --tone-danger-bg: var(--crimson-50); --tone-danger-line: var(--crimson-200);
  --tone-person-text: var(--lagoon-600); --tone-person-bg: var(--lagoon-50); --tone-person-line: var(--lagoon-200);
  --tone-neutral-text: var(--graphite-600); --tone-neutral-bg: var(--linen-100); --tone-neutral-line: var(--linen-300);

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-sans: 'Onest', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Scale: base 14 (cabinet) / 16 (landing), steps on a 1.25 ratio, rounded to whole px */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  44px;
  --fs-display: clamp(36px, 3.6vw + 18px, 64px);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-caps:    0.06em;

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

  /* ── Radius ────────────────────────────────────────────────────── */
  --radius-xs: 4px;    /* chips inside tables, ribbon segments */
  --radius-sm: 6px;    /* inputs, small buttons */
  --radius-md: 8px;    /* buttons, menus */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* panels, dialogs */
  --radius-pill: 999px;

  /* ── Elevation: ring + soft depth (light mode) ─────────────────── */
  --shadow-color: oklch(30% 0.02 60 / 0.07);
  --shadow-ring:  oklch(30% 0.02 60 / 0.08);
  --shadow-1: 0 0 0 1px var(--shadow-ring), 0 1px 2px -1px var(--shadow-color), 0 2px 6px var(--shadow-color);
  --shadow-2: 0 0 0 1px var(--shadow-ring), 0 4px 10px -2px var(--shadow-color), 0 12px 28px -6px var(--shadow-color);
  --scrim: oklch(18% 0.011 58 / 0.4);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 260ms;

  /* ── Layout ────────────────────────────────────────────────────── */
  --sidebar-w: 240px;
  --content-max: 1200px;
  --landing-max: 1160px;
  --control-h: 36px;
  --control-h-sm: 28px;
  --control-h-lg: 44px;

  /* ── 3. Component ──────────────────────────────────────────────── */
  --btn-primary-bg:      var(--graphite-900);
  --btn-primary-bg-hover: var(--graphite-700);
  --btn-primary-text:    var(--linen-50);
  --btn-accent-bg:       var(--voice-600);
  --btn-accent-bg-hover: var(--voice-700);
  --btn-accent-text:     var(--linen-0);
  --btn-secondary-bg:    var(--linen-0);
  --btn-secondary-line:  var(--linen-400);
  --btn-danger-text:     var(--crimson-600);

  --control-bg:        var(--linen-0);
  --control-bg-sunken: var(--linen-100);
  --control-line:      var(--line-control);
  --control-line-hover: var(--graphite-400);
  --switch-off:        var(--linen-500);
  --switch-on:         var(--leaf-600);
  --switch-knob:       var(--linen-0);

  /* Ribbon (Лента реплик): robot turns in voice, callee turns in graphite */
  --ribbon-robot:   var(--voice-500);
  --ribbon-robot-strong: var(--voice-700);
  --ribbon-quiet-robot: var(--linen-500);
  --ribbon-quiet-callee: var(--graphite-600);
  --ribbon-callee:  var(--graphite-600);
  --ribbon-silence: var(--linen-200);
  --ribbon-playhead: var(--graphite-900);

  /* Data and state colours for charts, lines and the ribbon */
  --data-ready:   var(--leaf-600);
  --data-info:    var(--sky-600);
  --data-warn:    var(--straw-600);
  --data-machine: var(--dusk-600);
  --data-neutral: var(--linen-500);
  --data-muted:   var(--linen-500);
  --data-person:  var(--lagoon-600);
  --data-strong:  var(--graphite-700);
  --status-off:      var(--linen-400);
  --status-dial:     var(--graphite-600);
  --status-stopping: var(--straw-600);
  --ribbon-callee-pending: var(--graphite-400);
  --ribbon-callee-played:  var(--graphite-900);

  /* On the inverse (dark) band of the landing */
  --accent-on-inverse: var(--voice-300);
  --text-inverse-muted: var(--linen-400);
}