/* ==========================================================================
   Tessel 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 {
  --ink-0: #000000;
  --ink-50: #0a0a0a;
  --ink-100: #111111;
  --ink-150: #191919;
  --ink-200: #1f1f1f;
  --ink-250: #272727;
  --ink-300: #333333;
  --ink-400: #555555;
  --ink-500: #8c8c8c;
  --ink-600: #a6a6a6;
  --ink-700: #d4d4d4;
  --ink-800: #e8e8e6;
  --ink-900: #f4f4f1;
  --ink-1000: #ffffff;
  --sky-100: #e6ecea;
  --sky-200: #cfdad8;
  --sky-300: #b8c7c4;
  --sky-500: #95aba7;
  --sky-700: #4d6662;
  --sky-900: #22302e;
  --cloud-100: #f6f1e7;
  --cloud-300: #efe7d6;
  --cloud-500: #d9c7a4;
  --cloud-700: #8a7449;
  --signal-green: #3ddc84;
  --signal-green-d: #11663a;
  --signal-blue: #3d7bff;
  --signal-blue-d: #1f4fcf;
  --signal-amber: #f2a33a;
  --signal-amber-d: #94590c;
  --signal-red: #ff5a52;
  --signal-red-d: #c4231b;
  --font-display: 'Tessel Display', 'DM Sans', 'Inter Tight', system-ui, sans-serif;
  --font-sans: 'Tessel Grotesk', 'Space Grotesk', 'Golos Text', system-ui, sans-serif;
  --font-mono: 'Tessel Mono', 'Space Mono', 'PT Mono', ui-monospace, monospace;
  --text-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --leading-display: 1;
  --tracking-display: -0.025em;
  --weight-display: 500;
  --text-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --leading-h1: 1;
  --tracking-h1: -0.02em;
  --weight-h1: 500;
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --leading-h2: 1.06;
  --tracking-h2: -0.03em;
  --weight-h2: 500;
  --text-h2-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --leading-h2-xl: 1.08;
  --tracking-h2-xl: -0.02em;
  --weight-h2-xl: 500;
  --text-h3: 1.25rem;
  --leading-h3: 1.1;
  --tracking-h3: -0.01em;
  --weight-h3: 500;
  --text-h4: 1.125rem;
  --leading-h4: 1.25;
  --tracking-h4: -0.01em;
  --weight-h4: 500;
  --text-h5: 1rem;
  --leading-h5: 1.3;
  --tracking-h5: -0.01em;
  --weight-h5: 500;
  --text-lead: 1.125rem;
  --leading-lead: 1.33;
  --tracking-lead: -0.01em;
  --weight-lead: 400;
  --text-body: 0.875rem;
  --leading-body: 1.43;
  --tracking-body: -0.01em;
  --weight-body: 400;
  --text-body-sm: 0.8125rem;
  --leading-body-sm: 1.45;
  --tracking-body-sm: -0.01em;
  --weight-body-sm: 400;
  --text-small: 0.75rem;
  --leading-small: 1.4;
  --tracking-small: -0.02em;
  --weight-small: 400;
  --text-caption: 0.75rem;
  --leading-caption: 1.33;
  --tracking-caption: -0.02em;
  --weight-caption: 400;
  --text-label: 0.6875rem;
  --leading-label: 1.3;
  --tracking-label: 0.02em;
  --weight-label: 400;
  --text-mono: 0.8125rem;
  --leading-mono: 1.6;
  --tracking-mono: -0.02em;
  --weight-mono: 400;
  --text-mono-xs: 0.625rem;
  --leading-mono-xs: 1.4;
  --tracking-mono-xs: 0;
  --weight-mono-xs: 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: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 40px;
  --radius-pill: 100px;
  --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: 140ms;
  --duration-base: 260ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --frame: 1368px;
  --container: 1192px;
  --container-narrow: 720px;
  --gutter: clamp(16px, 4vw, 52px);
  --rail-inset: clamp(0px, 2.5vw, 36px);
  --header-h: 56px;
  --announce-h: 32px;
  --section-y: clamp(64px, 9vw, 128px);
}

/* ---------- Light (default) ---------- */
:root,
[data-theme="light"] {
  --bg: var(--ink-900);
  --bg-alt: #ecece8;
  --bg-soft: #f8f8f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #ecece8;
  --surface-hover: rgba(10,10,10,.035);
  --surface-inverse: #0a0a0a;
  --border: #dcdcd7;
  --border-strong: rgba(10,10,10,.2);
  --border-subtle: #e8e8e4;
  --dot: rgba(10,10,10,.16);
  --rail: #dcdcd7;
  --text-primary: #0a0a0a;
  --text-secondary: #555553;
  --text-tertiary: #6b6b68;
  --text-disabled: #b5b5b0;
  --text-inverse: #ffffff;
  --accent: #0a0a0a;
  --accent-hover: #272727;
  --accent-fg: #ffffff;
  --accent-text: var(--sky-700);
  --accent-soft: rgba(77,102,98,.1);
  --accent-line: rgba(77,102,98,.3);
  --chip-bg: #ecece8;
  --chip-fg: #333333;
  --line-art: rgba(10,10,10,.82);
  --line-dim: rgba(10,10,10,.2);
  --live: var(--signal-green-d);
  --chart-1: #0a0a0a;
  --chart-2: var(--sky-500);
  --success: var(--signal-green-d);
  --success-bg: rgba(22,122,69,.1);
  --warning: var(--signal-amber-d);
  --warning-bg: rgba(242,163,58,.16);
  --danger: var(--signal-red-d);
  --danger-bg: rgba(255,90,82,.12);
  --info: var(--signal-blue-d);
  --info-bg: rgba(61,123,255,.1);
  --code-bg: #0a0a0a;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-key: #b8c7c4;
  --code-str: #efe7d6;
  --code-num: #5fe39a;
  --code-line: rgba(255,255,255,.07);
  --sky-grad: linear-gradient(180deg, #a9bcb8 0%, #95aba7 38%, #c9cdbf 70%, #e7dcc4 100%);
  --spectrum: conic-gradient(from 0deg, #f28a00, #f6b300, #f4d21a, #6fd34a, #16c7d9, #1a9dff, #1f5bff, #6b2bd1, #f28a00);
  --fade-bottom: linear-gradient(rgba(244,244,241,0) 0%, #f4f4f1 60%);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(77,102,98,.6);
  --overlay: rgba(10,10,10,.4);
  --shadow-xs: 0 1px 2px rgba(10,10,10,.06);
  --shadow-card: 0 2px 30px rgba(10,10,10,.03), 0 2px 50px rgba(10,10,10,.06);
  --shadow-float: 0 24px 60px -20px rgba(10,10,10,.28), 0 0 0 1px rgba(10,10,10,.06);
  --shadow-glow: 0 0 40px rgba(10,10,10,.08);
  color-scheme: light;
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --bg: var(--ink-50);
  --bg-alt: var(--ink-100);
  --bg-soft: #0d0d0d;
  --surface: var(--ink-100);
  --surface-raised: var(--ink-150);
  --surface-sunken: #070707;
  --surface-hover: rgba(255,255,255,.04);
  --surface-inverse: #ffffff;
  --border: var(--ink-250);
  --border-strong: rgba(255,255,255,.18);
  --border-subtle: #1a1a1a;
  --dot: rgba(255,255,255,.16);
  --rail: var(--ink-250);
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #8c8c8c;
  --text-disabled: #4d4d4d;
  --text-inverse: #0a0a0a;
  --accent: #ffffff;
  --accent-hover: #e8e8e6;
  --accent-fg: #0a0a0a;
  --accent-text: var(--sky-300);
  --accent-soft: rgba(149,171,167,.14);
  --accent-line: rgba(149,171,167,.35);
  --chip-bg: var(--ink-150);
  --chip-fg: #d4d4d4;
  --line-art: rgba(255,255,255,.85);
  --line-dim: rgba(255,255,255,.22);
  --live: var(--signal-green);
  --chart-1: #ffffff;
  --chart-2: var(--sky-500);
  --success: #5fe39a;
  --success-bg: rgba(61,220,132,.12);
  --warning: #f6bd6d;
  --warning-bg: rgba(242,163,58,.12);
  --danger: #ff8a84;
  --danger-bg: rgba(255,90,82,.12);
  --info: #9cbcff;
  --info-bg: rgba(61,123,255,.14);
  --code-bg: #070707;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-key: #b8c7c4;
  --code-str: #efe7d6;
  --code-num: #5fe39a;
  --code-line: rgba(255,255,255,.07);
  --sky-grad: linear-gradient(180deg, #a9bcb8 0%, #95aba7 38%, #c9cdbf 70%, #e7dcc4 100%);
  --spectrum: conic-gradient(from 0deg, #f28a00, #f6b300, #f4d21a, #6fd34a, #16c7d9, #1a9dff, #1f5bff, #6b2bd1, #f28a00);
  --fade-bottom: linear-gradient(rgba(10,10,10,0) 0%, #0a0a0a 60%);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(184,199,196,.7);
  --overlay: rgba(0,0,0,.66);
  --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card: 0 2px 30px rgba(0,0,0,.01), 0 2px 50px rgba(0,0,0,.11);
  --shadow-float: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-glow: 0 0 40px rgba(255,255,255,.12);
  color-scheme: dark;
}

/* ---------- Total Black (OLED) ---------- */
[data-theme="black"] {
  --bg: #000000;
  --bg-alt: #070707;
  --bg-soft: #040404;
  --surface: #0b0b0b;
  --surface-raised: #111111;
  --surface-sunken: #000000;
  --surface-hover: rgba(255,255,255,.04);
  --surface-inverse: #ffffff;
  --border: #1f1f1f;
  --border-strong: rgba(255,255,255,.18);
  --border-subtle: #141414;
  --dot: rgba(255,255,255,.16);
  --rail: #1c1c1c;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #8c8c8c;
  --text-disabled: #4d4d4d;
  --text-inverse: #0a0a0a;
  --accent: #ffffff;
  --accent-hover: #e8e8e6;
  --accent-fg: #0a0a0a;
  --accent-text: var(--sky-300);
  --accent-soft: rgba(149,171,167,.14);
  --accent-line: rgba(149,171,167,.35);
  --chip-bg: #121212;
  --chip-fg: #d4d4d4;
  --line-art: rgba(255,255,255,.85);
  --line-dim: rgba(255,255,255,.22);
  --live: var(--signal-green);
  --chart-1: #ffffff;
  --chart-2: var(--sky-500);
  --success: #5fe39a;
  --success-bg: rgba(61,220,132,.12);
  --warning: #f6bd6d;
  --warning-bg: rgba(242,163,58,.12);
  --danger: #ff8a84;
  --danger-bg: rgba(255,90,82,.12);
  --info: #9cbcff;
  --info-bg: rgba(61,123,255,.14);
  --code-bg: #050505;
  --code-fg: #e8e8e6;
  --code-muted: #8c8c8c;
  --code-key: #b8c7c4;
  --code-str: #efe7d6;
  --code-num: #5fe39a;
  --code-line: rgba(255,255,255,.07);
  --sky-grad: linear-gradient(180deg, #a9bcb8 0%, #95aba7 38%, #c9cdbf 70%, #e7dcc4 100%);
  --spectrum: conic-gradient(from 0deg, #f28a00, #f6b300, #f4d21a, #6fd34a, #16c7d9, #1a9dff, #1f5bff, #6b2bd1, #f28a00);
  --fade-bottom: linear-gradient(rgba(0,0,0,0) 0%, #000 60%);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(184,199,196,.7);
  --overlay: rgba(0,0,0,.66);
  --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card: 0 2px 30px rgba(0,0,0,.01), 0 2px 50px rgba(0,0,0,.11);
  --shadow-float: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-glow: 0 0 40px rgba(255,255,255,.12);
  color-scheme: dark;
}

/* ---------- System preference ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--ink-50);
    --bg-alt: var(--ink-100);
    --bg-soft: #0d0d0d;
    --surface: var(--ink-100);
    --surface-raised: var(--ink-150);
    --surface-sunken: #070707;
    --surface-hover: rgba(255,255,255,.04);
    --surface-inverse: #ffffff;
    --border: var(--ink-250);
    --border-strong: rgba(255,255,255,.18);
    --border-subtle: #1a1a1a;
    --dot: rgba(255,255,255,.16);
    --rail: var(--ink-250);
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-tertiary: #8c8c8c;
    --text-disabled: #4d4d4d;
    --text-inverse: #0a0a0a;
    --accent: #ffffff;
    --accent-hover: #e8e8e6;
    --accent-fg: #0a0a0a;
    --accent-text: var(--sky-300);
    --accent-soft: rgba(149,171,167,.14);
    --accent-line: rgba(149,171,167,.35);
    --chip-bg: var(--ink-150);
    --chip-fg: #d4d4d4;
    --line-art: rgba(255,255,255,.85);
    --line-dim: rgba(255,255,255,.22);
    --live: var(--signal-green);
    --chart-1: #ffffff;
    --chart-2: var(--sky-500);
    --success: #5fe39a;
    --success-bg: rgba(61,220,132,.12);
    --warning: #f6bd6d;
    --warning-bg: rgba(242,163,58,.12);
    --danger: #ff8a84;
    --danger-bg: rgba(255,90,82,.12);
    --info: #9cbcff;
    --info-bg: rgba(61,123,255,.14);
    --code-bg: #070707;
    --code-fg: #e8e8e6;
    --code-muted: #8c8c8c;
    --code-key: #b8c7c4;
    --code-str: #efe7d6;
    --code-num: #5fe39a;
    --code-line: rgba(255,255,255,.07);
    --sky-grad: linear-gradient(180deg, #a9bcb8 0%, #95aba7 38%, #c9cdbf 70%, #e7dcc4 100%);
    --spectrum: conic-gradient(from 0deg, #f28a00, #f6b300, #f4d21a, #6fd34a, #16c7d9, #1a9dff, #1f5bff, #6b2bd1, #f28a00);
    --fade-bottom: linear-gradient(rgba(10,10,10,0) 0%, #0a0a0a 60%);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(184,199,196,.7);
    --overlay: rgba(0,0,0,.66);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
    --shadow-card: 0 2px 30px rgba(0,0,0,.01), 0 2px 50px rgba(0,0,0,.11);
    --shadow-float: 0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
    --shadow-glow: 0 0 40px rgba(255,255,255,.12);
    color-scheme: dark;
  }
}

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