/* ==========================================================================
   Walden Design System — tokens.css
   Зеркало: tokens/tokens.json. Темы: light (по умолчанию), dark, black (OLED).
   Брейкпоинты (используйте в @media — CSS-переменные в media не работают):
   sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1440px
   ========================================================================== */

/* ---------- Primitives ---------- */
:root {
  --paper-0: #ffffff;
  --paper-50: #fbf9f5;
  --paper-100: #f4f1ea;
  --paper-200: #ebe7df;
  --paper-300: #e8e6e2;
  --paper-400: #d6d1c8;
  --paper-500: #b4ada2;
  --paper-600: #8c7b6c;
  --paper-700: #6b5a4b;
  --paper-800: #3a332d;
  --paper-900: #2a2725;
  --paper-950: #121110;
  --gray-100: #f1f1f1;
  --gray-300: #d4d4d4;
  --gray-500: #787878;
  --gray-600: #5e5e5e;
  --gray-800: #1d1e20;
  --gray-900: #1a1a1a;
  --ochre-300: #e9b67a;
  --ochre-500: #c8752e;
  --ochre-700: #8a4a17;
  --oxide-300: #e08c7a;
  --oxide-500: #b5432f;
  --oxide-700: #7d2a1c;
  --teal-300: #8fb8b0;
  --teal-500: #3f7b72;
  --teal-700: #24504a;
  --font-display: 'Walden Sans', 'Karla', system-ui, sans-serif;
  --font-sans: 'Walden Sans', 'Karla', system-ui, sans-serif;
  --font-mono: 'Walden Mono', 'JetBrains Mono', ui-monospace, monospace;
  --text-display: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --leading-display: 1.2;
  --tracking-display: 0.04em;
  --weight-display: 400;
  --text-h1: 1.5rem;
  --leading-h1: 1.3;
  --tracking-h1: 0.03em;
  --weight-h1: 400;
  --text-h2: 1.25rem;
  --leading-h2: 1.35;
  --tracking-h2: 0.01em;
  --weight-h2: 400;
  --text-h3: 1rem;
  --leading-h3: 1.4;
  --tracking-h3: 0;
  --weight-h3: 600;
  --text-h4: 0.9375rem;
  --leading-h4: 1.4;
  --tracking-h4: 0;
  --weight-h4: 600;
  --text-h5: 0.8125rem;
  --leading-h5: 1.4;
  --tracking-h5: 0.12em;
  --weight-h5: 400;
  --text-lead: 1.125rem;
  --leading-lead: 1.7;
  --tracking-lead: 0;
  --weight-lead: 400;
  --text-body: 1rem;
  --leading-body: 1.75;
  --tracking-body: 0;
  --weight-body: 400;
  --text-body-sm: 0.875rem;
  --leading-body-sm: 1.6;
  --tracking-body-sm: 0;
  --weight-body-sm: 400;
  --text-small: 0.8125rem;
  --leading-small: 1.5;
  --tracking-small: 0;
  --weight-small: 400;
  --text-caption: 0.8125rem;
  --leading-caption: 1.5;
  --tracking-caption: 0;
  --weight-caption: 400;
  --text-label: 0.8125rem;
  --leading-label: 1.4;
  --tracking-label: 0.02em;
  --weight-label: 400;
  --text-mono: 0.8125rem;
  --leading-mono: 1.6;
  --tracking-mono: 0;
  --weight-mono: 400;
  --space-0: 0;
  --space-px: 1px;
  --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;
  --space-32: 128px;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 8px;
  --radius-pill: 1000px;
  --shadow-none: none;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 700;
  --z-tooltip: 800;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --container: 1040px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 96px;
  --section-y: clamp(48px, 7vw, 96px);
}

/* ---------- Light (default) ---------- */
:root,
[data-theme="light"] {
  --bg: var(--paper-50);
  --bg-alt: var(--paper-300);
  --bg-soft: var(--paper-100);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--gray-100);
  --surface-hover: rgba(18,17,16,.04);
  --surface-inverse: var(--paper-950);
  --surface-dark: var(--paper-950);
  --border: rgba(18,17,16,.12);
  --border-strong: rgba(18,17,16,.3);
  --border-subtle: rgba(18,17,16,.06);
  --text-primary: var(--paper-950);
  --text-secondary: var(--gray-800);
  --text-tertiary: #64605c;
  --text-disabled: #aaa49c;
  --text-inverse: #ffffff;
  --heading-alt: var(--paper-700);
  --accent: #000000;
  --accent-hover: #2a2725;
  --accent-fg: #ffffff;
  --accent-text: var(--paper-950);
  --accent-soft: var(--paper-200);
  --accent-strong: #000000;
  --accent-strong-hover: #2a2725;
  --muted-warm: var(--paper-700);
  --footer-bg: var(--paper-300);
  --input-bg: var(--gray-100);
  --frame: #ffffff;
  --chip-bg: var(--paper-200);
  --chip-fg: var(--paper-900);
  --success: #2f6b3a;
  --success-bg: #e4efe2;
  --warning: #7a4d0c;
  --warning-bg: #f6ead2;
  --danger: #a3271c;
  --danger-bg: #f7e1dd;
  --info: #24504a;
  --info-bg: #dfecea;
  --code-bg: var(--paper-950);
  --code-fg: #f4f1ea;
  --code-muted: #b4ada2;
  --code-key: var(--ochre-300);
  --code-str: var(--teal-300);
  --code-num: var(--oxide-300);
  --code-line: rgba(255,255,255,.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(18,17,16,.6);
  --overlay: rgba(18,17,16,.55);
  --shadow-xs: 0 1px 2px rgba(18,17,16,.06);
  --shadow-card: 0 4px 16px rgba(0,0,0,.12);
  --shadow-float: 0 12px 36px rgba(18,17,16,.18);
  --shadow-btn: 0 4px 16px rgba(0,0,0,.12);
  color-scheme: light;
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --bg: #171513;
  --bg-alt: #211e1b;
  --bg-soft: #1c1a17;
  --surface: #211e1b;
  --surface-raised: #2a2622;
  --surface-sunken: #100f0d;
  --surface-hover: rgba(244,241,234,.05);
  --surface-inverse: var(--paper-50);
  --surface-dark: #0c0b0a;
  --border: rgba(244,241,234,.13);
  --border-strong: rgba(244,241,234,.3);
  --border-subtle: rgba(244,241,234,.06);
  --text-primary: #f4f1ea;
  --text-secondary: rgba(244,241,234,.84);
  --text-tertiary: rgba(244,241,234,.64);
  --text-disabled: rgba(244,241,234,.3);
  --text-inverse: var(--paper-950);
  --heading-alt: var(--paper-400);
  --accent: #f4f1ea;
  --accent-hover: #ffffff;
  --accent-fg: #121110;
  --accent-text: #f4f1ea;
  --accent-soft: rgba(244,241,234,.1);
  --accent-strong: #f4f1ea;
  --accent-strong-hover: #ffffff;
  --muted-warm: var(--paper-500);
  --footer-bg: #211e1b;
  --input-bg: #262320;
  --frame: #2a2622;
  --chip-bg: rgba(244,241,234,.1);
  --chip-fg: #ebe7df;
  --success: #9fd4a3;
  --success-bg: rgba(80,160,90,.16);
  --warning: var(--ochre-300);
  --warning-bg: rgba(200,117,46,.16);
  --danger: #f0a196;
  --danger-bg: rgba(181,67,47,.2);
  --info: var(--teal-300);
  --info-bg: rgba(63,123,114,.22);
  --code-bg: #0c0b0a;
  --code-fg: #f4f1ea;
  --code-muted: #b4ada2;
  --code-key: var(--ochre-300);
  --code-str: var(--teal-300);
  --code-num: var(--oxide-300);
  --code-line: rgba(255,255,255,.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(244,241,234,.7);
  --overlay: rgba(0,0,0,.65);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-card: 0 0 0 1px rgba(244,241,234,.08);
  --shadow-float: 0 16px 40px rgba(0,0,0,.6);
  --shadow-btn: none;
  color-scheme: dark;
}

/* ---------- Total Black (OLED) ---------- */
[data-theme="black"] {
  --bg: #000000;
  --bg-alt: #0d0c0b;
  --bg-soft: #070606;
  --surface: #0f0e0d;
  --surface-raised: #171513;
  --surface-sunken: #000000;
  --surface-hover: rgba(244,241,234,.05);
  --surface-inverse: var(--paper-50);
  --surface-dark: #000000;
  --border: rgba(244,241,234,.13);
  --border-strong: rgba(244,241,234,.3);
  --border-subtle: rgba(244,241,234,.06);
  --text-primary: #f4f1ea;
  --text-secondary: rgba(244,241,234,.84);
  --text-tertiary: rgba(244,241,234,.64);
  --text-disabled: rgba(244,241,234,.3);
  --text-inverse: var(--paper-950);
  --heading-alt: var(--paper-400);
  --accent: #f4f1ea;
  --accent-hover: #ffffff;
  --accent-fg: #121110;
  --accent-text: #f4f1ea;
  --accent-soft: rgba(244,241,234,.1);
  --accent-strong: #f4f1ea;
  --accent-strong-hover: #ffffff;
  --muted-warm: var(--paper-500);
  --footer-bg: #0d0c0b;
  --input-bg: #151311;
  --frame: #151311;
  --chip-bg: rgba(244,241,234,.1);
  --chip-fg: #ebe7df;
  --success: #9fd4a3;
  --success-bg: rgba(80,160,90,.16);
  --warning: var(--ochre-300);
  --warning-bg: rgba(200,117,46,.16);
  --danger: #f0a196;
  --danger-bg: rgba(181,67,47,.2);
  --info: var(--teal-300);
  --info-bg: rgba(63,123,114,.22);
  --code-bg: #0a0908;
  --code-fg: #f4f1ea;
  --code-muted: #b4ada2;
  --code-key: var(--ochre-300);
  --code-str: var(--teal-300);
  --code-num: var(--oxide-300);
  --code-line: rgba(255,255,255,.08);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(244,241,234,.7);
  --overlay: rgba(0,0,0,.65);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-card: 0 0 0 1px rgba(244,241,234,.08);
  --shadow-float: 0 16px 40px rgba(0,0,0,.6);
  --shadow-btn: none;
  color-scheme: dark;
}

/* ---------- System preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #171513;
    --bg-alt: #211e1b;
    --bg-soft: #1c1a17;
    --surface: #211e1b;
    --surface-raised: #2a2622;
    --surface-sunken: #100f0d;
    --surface-hover: rgba(244,241,234,.05);
    --surface-inverse: var(--paper-50);
    --surface-dark: #0c0b0a;
    --border: rgba(244,241,234,.13);
    --border-strong: rgba(244,241,234,.3);
    --border-subtle: rgba(244,241,234,.06);
    --text-primary: #f4f1ea;
    --text-secondary: rgba(244,241,234,.84);
    --text-tertiary: rgba(244,241,234,.64);
    --text-disabled: rgba(244,241,234,.3);
    --text-inverse: var(--paper-950);
    --heading-alt: var(--paper-400);
    --accent: #f4f1ea;
    --accent-hover: #ffffff;
    --accent-fg: #121110;
    --accent-text: #f4f1ea;
    --accent-soft: rgba(244,241,234,.1);
    --accent-strong: #f4f1ea;
    --accent-strong-hover: #ffffff;
    --muted-warm: var(--paper-500);
    --footer-bg: #211e1b;
    --input-bg: #262320;
    --frame: #2a2622;
    --chip-bg: rgba(244,241,234,.1);
    --chip-fg: #ebe7df;
    --success: #9fd4a3;
    --success-bg: rgba(80,160,90,.16);
    --warning: var(--ochre-300);
    --warning-bg: rgba(200,117,46,.16);
    --danger: #f0a196;
    --danger-bg: rgba(181,67,47,.2);
    --info: var(--teal-300);
    --info-bg: rgba(63,123,114,.22);
    --code-bg: #0c0b0a;
    --code-fg: #f4f1ea;
    --code-muted: #b4ada2;
    --code-key: var(--ochre-300);
    --code-str: var(--teal-300);
    --code-num: var(--oxide-300);
    --code-line: rgba(255,255,255,.08);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(244,241,234,.7);
    --overlay: rgba(0,0,0,.65);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-card: 0 0 0 1px rgba(244,241,234,.08);
    --shadow-float: 0 16px 40px rgba(0,0,0,.6);
    --shadow-btn: none;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}