/* Dispop — tokens. modern-minimal direction · steel accent · Telegram-dark canvas */

:root {
  /* Type stack */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale (px) */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-base: 14px;
  --t-lg: 15px;
  --t-xl: 17px;
  --t-2xl: 20px;
  --t-3xl: 24px;
  --t-4xl: 32px;
  --t-5xl: 44px;
  --t-display: clamp(36px, 4.5vw, 56px);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Lines */
  --hairline: 1px;
  --line-medium: 1.5px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 260ms;

  /* Z layers */
  --z-dock: 10;
  --z-sticky: 20;
  --z-toast: 60;
  --z-modal: 80;
  --z-overlay: 100;
}

/* ---------- DARK (primary) — Telegram-dark, slight blue night ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        oklch(22% 0.018 250);
  --bg-deep:   oklch(18% 0.018 250);
  --surface:   oklch(26% 0.02 250);
  --surface-2: oklch(30% 0.022 250);
  --elev:      oklch(34% 0.022 250);
  --fg:        oklch(96% 0.005 250);
  --fg-strong: oklch(99% 0.003 250);
  --muted:     oklch(66% 0.015 250);
  --muted-2:   oklch(54% 0.015 250);
  --border:    oklch(34% 0.02 250);
  --border-strong: oklch(42% 0.022 250);
  --hover:     oklch(32% 0.022 250);
  --active:    oklch(36% 0.024 250);

  --shadow-1: 0 1px 0 0 oklch(100% 0 0 / 0.04) inset, 0 0 0 1px oklch(0% 0 0 / 0.1);
  --shadow-2: 0 8px 24px -8px oklch(0% 0 0 / 0.45), 0 2px 6px -2px oklch(0% 0 0 / 0.4);
  --shadow-3: 0 24px 48px -12px oklch(0% 0 0 / 0.55), 0 8px 16px -8px oklch(0% 0 0 / 0.4);

  /* status */
  --success: oklch(72% 0.13 155);
  --warn:    oklch(78% 0.14 80);
  --danger:  oklch(68% 0.18 25);
  --info:    oklch(72% 0.10 230);

  /* accent — steel default */
  --accent:        oklch(68% 0.04 250);
  --accent-strong: oklch(74% 0.045 250);
  --accent-soft:   oklch(40% 0.04 250 / 0.5);
  --accent-fg:     oklch(98% 0.003 250);

  /* chat canvas (slightly bluer than bg) */
  --chat-bg: oklch(20% 0.022 250);

  /* bubbles */
  --bub-mine-bg: var(--accent);
  --bub-mine-fg: oklch(99% 0.003 250);
  --bub-them-bg: oklch(30% 0.022 250);
  --bub-them-fg: var(--fg);
}

/* ---------- LIGHT (secondary) ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg:        oklch(99% 0.002 240);
  --bg-deep:   oklch(96% 0.004 240);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(98% 0.003 240);
  --elev:      oklch(100% 0 0);
  --fg:        oklch(18% 0.012 250);
  --fg-strong: oklch(12% 0.012 250);
  --muted:     oklch(50% 0.012 250);
  --muted-2:   oklch(62% 0.01 250);
  --border:    oklch(92% 0.005 250);
  --border-strong: oklch(86% 0.006 250);
  --hover:     oklch(96% 0.004 250);
  --active:    oklch(93% 0.005 250);

  --shadow-1: 0 0 0 1px oklch(0% 0 0 / 0.04);
  --shadow-2: 0 4px 12px -4px oklch(0% 0 0 / 0.08), 0 2px 4px -2px oklch(0% 0 0 / 0.06);
  --shadow-3: 0 18px 40px -12px oklch(0% 0 0 / 0.18), 0 8px 16px -8px oklch(0% 0 0 / 0.1);

  --success: oklch(54% 0.14 155);
  --warn:    oklch(68% 0.14 75);
  --danger:  oklch(56% 0.20 25);
  --info:    oklch(56% 0.12 230);

  --accent:        oklch(52% 0.04 250);
  --accent-strong: oklch(46% 0.05 250);
  --accent-soft:   oklch(90% 0.02 250);
  --accent-fg:     oklch(99% 0.003 250);

  --chat-bg: oklch(97% 0.004 250);

  --bub-mine-bg: var(--accent);
  --bub-mine-fg: oklch(99% 0.003 250);
  --bub-them-bg: oklch(100% 0 0);
  --bub-them-fg: var(--fg);
}

/* ---------- Accent variants — dark ---------- */
[data-theme="dark"][data-accent="steel"],   [data-accent="steel"]   { --accent: oklch(68% 0.04 250); --accent-strong: oklch(74% 0.045 250); --accent-soft: oklch(40% 0.04 250 / 0.5); }
[data-theme="dark"][data-accent="blue"],    [data-accent="blue"]    { --accent: oklch(66% 0.16 250); --accent-strong: oklch(72% 0.17 250); --accent-soft: oklch(40% 0.14 250 / 0.5); }
[data-theme="dark"][data-accent="green"],   [data-accent="green"]   { --accent: oklch(70% 0.14 155); --accent-strong: oklch(76% 0.15 155); --accent-soft: oklch(40% 0.12 155 / 0.5); }
[data-theme="dark"][data-accent="purple"],  [data-accent="purple"]  { --accent: oklch(66% 0.18 295); --accent-strong: oklch(72% 0.19 295); --accent-soft: oklch(40% 0.16 295 / 0.5); }
[data-theme="dark"][data-accent="orange"],  [data-accent="orange"]  { --accent: oklch(72% 0.16 50);  --accent-strong: oklch(78% 0.17 50);  --accent-soft: oklch(45% 0.14 50  / 0.5); }
[data-theme="dark"][data-accent="pink"],    [data-accent="pink"]    { --accent: oklch(70% 0.16 350); --accent-strong: oklch(76% 0.17 350); --accent-soft: oklch(42% 0.14 350 / 0.5); }

/* light overrides */
[data-theme="light"][data-accent="steel"]   { --accent: oklch(52% 0.04 250); --accent-strong: oklch(44% 0.05 250); --accent-soft: oklch(90% 0.02 250); }
[data-theme="light"][data-accent="blue"]    { --accent: oklch(54% 0.18 255); --accent-strong: oklch(46% 0.20 255); --accent-soft: oklch(94% 0.03 255); }
[data-theme="light"][data-accent="green"]   { --accent: oklch(54% 0.14 155); --accent-strong: oklch(46% 0.15 155); --accent-soft: oklch(93% 0.04 155); }
[data-theme="light"][data-accent="purple"]  { --accent: oklch(52% 0.18 295); --accent-strong: oklch(46% 0.20 295); --accent-soft: oklch(94% 0.03 295); }
[data-theme="light"][data-accent="orange"]  { --accent: oklch(60% 0.16 50);  --accent-strong: oklch(54% 0.18 50);  --accent-soft: oklch(95% 0.04 50);  }
[data-theme="light"][data-accent="pink"]    { --accent: oklch(58% 0.16 350); --accent-strong: oklch(50% 0.18 350); --accent-soft: oklch(95% 0.04 350); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--fg-strong); }
a { color: inherit; text-decoration: none; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* focus */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}