/**
 * UXD-VS-01 v1.1 · B. Tokens — exact values, both themes.
 *
 * Light is the default theme (VS-3): `:root` alone carries the light
 * palette, `:root[data-theme="dark"]` overrides it. Nothing here reads
 * `prefers-color-scheme` directly — resolution of the "system" preference
 * into a concrete `data-theme` value is `apps/web/src/client/theme.ts`'s job,
 * applied before first paint (FTP-026 commit 1).
 *
 * Token names are a proposal to the next reader, not a citation: UXD-VS-01
 * says so explicitly ("Имена токенов — предложение исполнителю"). The
 * values beside them are not.
 */

:root {
  color-scheme: light;

  /* B.1.1 Surfaces */
  --bg-canvas: #F1F2F4;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F6F6F7;
  --bg-hover: #F1F2F4;
  --bg-pressed: #E4E5E9;
  --bg-selected: #EDF3FE;

  /* B.1.2 Text */
  --text-1: #1A1C1F;
  --text-2: #55585F;
  --text-3: #666A72;
  --text-disabled: #9AA0A6;
  --text-on-accent: #FFFFFF;

  /* B.1.3 Accent */
  --accent: #2350C8;
  --accent-solid: #2350C8;
  --accent-solid-hover: #1C42A6;
  --accent-solid-pressed: #16357F;
  --accent-bg: #E8EEFC;
  --accent-border: #B9CBF5;

  /* B.1.4 States — three meanings, never a fourth */
  --ok-text: #0F7A4A;
  --ok-bg: #E6F4EC;
  --ok-border: #A8D5BE;
  --warn-text: #8A5A00;
  --warn-bg: #FDF3DC;
  --warn-border: #E8C77A;
  --err-text: #B3261E;
  --err-bg: #FCEBEA;
  --err-border: #E9A7A2;
  --neutral-bg: #EDEEF1;
  --neutral-border: #D9DBE0;

  /* B.1.5 Borders and focus */
  --border-subtle: #E6E7EB;
  --border: #D9DBE0;
  --border-strong: #82878F;
  --focus-ring: #2350C8;

  /* B.2 Typography — mobile values; desktop overrides below at 768px */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --t-700-size: 20px; --t-700-line: 28px; --t-700-weight: 600; --t-700-tracking: -0.01em;
  --t-600-size: 17px; --t-600-line: 24px; --t-600-weight: 600; --t-600-tracking: -0.005em;
  --t-500-size: 15px; --t-500-line: 22px; --t-500-weight: 600; --t-500-tracking: 0em;
  --t-400-size: 15px; --t-400-line: 22px; --t-400-weight: 400; --t-400-tracking: 0em;
  --t-400-label-size: 14px; --t-400-label-line: 20px; --t-400-label-weight: 600; --t-400-label-tracking: 0em;
  --t-300-size: 13px; --t-300-line: 18px; --t-300-weight: 400; --t-300-tracking: 0em;
  --t-200-size: 12px; --t-200-line: 16px; --t-200-weight: 500; --t-200-tracking: 0.01em;
  --t-mono-size: 13px; --t-mono-line: 18px; --t-mono-weight: 400; --t-mono-tracking: 0em;

  /* B.3 Spacing scale — 4px base step, no value outside this list */
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px;
  --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px;

  /* B.3 Layout constants */
  --nav-width: 240px;
  --workarea-inset: 16px;
  --list-max-width: 1280px;
  --main-column-width: 720px;
  --main-column-max-width: 840px;
  --side-column-width: 320px;
  --side-column-width-tablet: 280px;
  --side-column-gap: 24px;
  --tap-target-phone: 44px;
  --tap-target-pointer: 32px;
  --tap-target-minimum: 24px;

  /* B.4 Radii — no fifth radius, nothing rounder than 8px */
  --r-0: 0px;
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;

  /* B.5 Border widths */
  --bw-1: 1px;
  --bw-2: 2px;

  /* B.6 Shadows — cards and tables carry none by default (sh-0) */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(16, 18, 22, 0.10);
  --sh-2: 0 8px 24px rgba(16, 18, 22, 0.16);

  /* B.7 Motion */
  --mo-state-duration: 120ms;
  --mo-state-easing: ease-out;
  --mo-layer-duration: 200ms;
  --mo-layer-easing: cubic-bezier(0.2, 0, 0, 1);

  /* B.8 Layers */
  --z-header: 10;
  --z-nav: 20;
  --z-overlay: 30;
  --z-dialog: 40;
  --z-toast: 50;
}

@media (min-width: 768px) {
  :root {
    --t-700-size: 24px; --t-700-line: 32px;
    --t-600-size: 18px; --t-600-line: 26px;
    --t-400-size: 14px; --t-400-line: 20px;
    --t-400-label-size: 13px; --t-400-label-line: 18px;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: #16181C;
  --bg-surface: #1D2025;
  --bg-subtle: #23262C;
  --bg-hover: #2A2E35;
  --bg-pressed: #32363E;
  --bg-selected: #1D2A47;

  --text-1: #ECEEF2;
  --text-2: #B2B8C2;
  --text-3: #8E95A1;
  --text-disabled: #626873;
  --text-on-accent: #FFFFFF;

  --accent: #7DA2F5;
  --accent-solid: #3A63CC;
  --accent-solid-hover: #2F53AE;
  --accent-solid-pressed: #264592;
  --accent-bg: #1D2A47;
  --accent-border: #3B5484;

  --ok-text: #4FBF87;
  --ok-bg: #12281E;
  --ok-border: #2C5F45;
  --warn-text: #E0B155;
  --warn-bg: #2A2010;
  --warn-border: #5C4820;
  --err-text: #F08C86;
  --err-bg: #2C1614;
  --err-border: #6A2F2B;
  --neutral-bg: #2A2E35;
  --neutral-border: #363B44;

  --border-subtle: #2B2F37;
  --border: #363B44;
  --border-strong: #707784;
  --focus-ring: #7DA2F5;

  /* Shadows do not read in the dark theme; popped layers add a border there
     (B.6) — see .layer-popped in global.css. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.65);
}