/* tokens.css — Дозор design system tokens
   Three directions (cool / warm / terminal) × two themes (dark / light)
   All tokens are CSS custom properties. No hex literals in components. */

:root {
  /* Type scale (rem) */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-36: 2.25rem;
  --t-48: 3rem;
  --t-60: 3.75rem;
  --t-72: 4.5rem;
  --t-96: 6rem;

  /* Motion vocabulary */
  --m-instant: 0ms;
  --m-fast: 120ms;
  --m-medium: 220ms;
  --m-slow: 380ms;
  --m-slower: 600ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing (8pt) */
  --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;
  --s-20: 80px; --s-24: 96px;

  /* Radii (overridden by --r tweak) */
  --r: 10px;
  --r-sm: calc(var(--r) * 0.5);
  --r-lg: calc(var(--r) * 1.4);
  --r-pill: 999px;

  /* Density (overridden by --density tweak) */
  --row-h: 40px;
  --pad-y: 14px;

  /* Brand accent (overridden) — default cool */
  --accent-h: 232;
  --accent-s: 84%;
  --accent-l: 62%;
  --brand: oklch(0.66 0.18 264);
  --brand-hover: oklch(0.71 0.18 264);
  --brand-active: oklch(0.61 0.18 264);
  --brand-soft: oklch(0.66 0.18 264 / 0.14);
  --on-brand: #fff;
  --focus-ring: oklch(0.66 0.18 264 / 0.45);

  /* Severity — same across themes */
  --sev-critical: oklch(0.55 0.21 22);
  --sev-high: oklch(0.66 0.19 35);
  --sev-medium: oklch(0.78 0.16 75);
  --sev-low: oklch(0.82 0.10 95);
  --sev-info: oklch(0.66 0.06 240);
  --sev-ok: oklch(0.68 0.13 155);
  --sev-hygiene: oklch(0.55 0.02 200);

  /* Fonts (overridden by tweak) */
  --font-display: "Fraunces", "EB Garamond", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ─────── Direction: COOL (Linear-influenced) ─────── */
[data-dir="cool"][data-theme="dark"] {
  --surface-0: oklch(0.18 0.012 260);
  --surface-1: oklch(0.215 0.013 260);
  --surface-2: oklch(0.245 0.014 260);
  --surface-3: oklch(0.28 0.015 260);
  --surface-4: oklch(0.32 0.016 260);
  --text-1: oklch(0.97 0.005 260);
  --text-2: oklch(0.78 0.008 260);
  --text-3: oklch(0.6 0.01 260);
  --text-4: oklch(0.42 0.012 260);
  --border-1: oklch(0.3 0.013 260 / 0.5);
  --border-2: oklch(0.35 0.014 260 / 0.7);
  --border-strong: oklch(0.45 0.014 260);
}
[data-dir="cool"][data-theme="light"] {
  --surface-0: oklch(0.985 0.003 260);
  --surface-1: oklch(0.998 0.002 260);
  --surface-2: oklch(0.965 0.005 260);
  --surface-3: oklch(0.94 0.007 260);
  --surface-4: oklch(0.99 0.002 260);
  --text-1: oklch(0.18 0.014 260);
  --text-2: oklch(0.4 0.012 260);
  --text-3: oklch(0.55 0.01 260);
  --text-4: oklch(0.72 0.008 260);
  --border-1: oklch(0.9 0.005 260);
  --border-2: oklch(0.85 0.007 260);
  --border-strong: oklch(0.7 0.01 260);
}

/* ─────── Direction: WARM (Resend/Anthropic-influenced) ─────── */
[data-dir="warm"][data-theme="dark"] {
  --surface-0: oklch(0.19 0.012 60);
  --surface-1: oklch(0.225 0.014 60);
  --surface-2: oklch(0.255 0.015 60);
  --surface-3: oklch(0.29 0.016 60);
  --surface-4: oklch(0.33 0.017 60);
  --text-1: oklch(0.965 0.012 70);
  --text-2: oklch(0.78 0.018 65);
  --text-3: oklch(0.6 0.02 65);
  --text-4: oklch(0.42 0.018 60);
  --border-1: oklch(0.31 0.015 60 / 0.55);
  --border-2: oklch(0.36 0.016 60 / 0.75);
  --border-strong: oklch(0.46 0.018 60);
}
[data-dir="warm"][data-theme="light"] {
  --surface-0: oklch(0.97 0.012 80);
  --surface-1: oklch(0.992 0.008 80);
  --surface-2: oklch(0.945 0.014 80);
  --surface-3: oklch(0.91 0.018 80);
  --surface-4: oklch(0.985 0.01 80);
  --text-1: oklch(0.2 0.018 60);
  --text-2: oklch(0.42 0.018 60);
  --text-3: oklch(0.56 0.018 60);
  --text-4: oklch(0.72 0.014 60);
  --border-1: oklch(0.88 0.012 70);
  --border-2: oklch(0.82 0.014 70);
  --border-strong: oklch(0.65 0.016 60);
}

/* ─────── Direction: TERMINAL (Cursor/Raycast-influenced) ─────── */
[data-dir="terminal"][data-theme="dark"] {
  --surface-0: oklch(0.16 0.005 260);
  --surface-1: oklch(0.19 0.006 260);
  --surface-2: oklch(0.22 0.007 260);
  --surface-3: oklch(0.26 0.008 260);
  --surface-4: oklch(0.3 0.009 260);
  --text-1: oklch(0.96 0.003 260);
  --text-2: oklch(0.74 0.005 260);
  --text-3: oklch(0.55 0.006 260);
  --text-4: oklch(0.38 0.006 260);
  --border-1: oklch(0.28 0.007 260 / 0.6);
  --border-2: oklch(0.34 0.008 260 / 0.8);
  --border-strong: oklch(0.45 0.008 260);
}
[data-dir="terminal"][data-theme="light"] {
  --surface-0: oklch(0.96 0.003 260);
  --surface-1: oklch(0.99 0.002 260);
  --surface-2: oklch(0.93 0.004 260);
  --surface-3: oklch(0.89 0.005 260);
  --surface-4: oklch(0.985 0.002 260);
  --text-1: oklch(0.16 0.005 260);
  --text-2: oklch(0.38 0.006 260);
  --text-3: oklch(0.52 0.006 260);
  --text-4: oklch(0.7 0.005 260);
  --border-1: oklch(0.86 0.005 260);
  --border-2: oklch(0.78 0.006 260);
  --border-strong: oklch(0.6 0.007 260);
}

/* Density variants applied via [data-density] */
[data-density="compact"] {
  --row-h: 32px;
  --pad-y: 8px;
  --s-base: 0.92;
}
[data-density="comfy"] {
  --row-h: 48px;
  --pad-y: 18px;
  --s-base: 1.05;
}

/* Reset + base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--surface-0);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
body.terminal-vibe { font-family: var(--font-mono); }

::selection { background: var(--brand-soft); color: var(--text-1); }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────── Brand mark — abstract concentric arcs (proposal) ─────── */
.dz-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.dz-mark svg { width: 100%; height: 100%; }
.dz-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 18px;
  font-feature-settings: "ss01";
}