/* =====================================================================
   KLYME — Design Tokens v3.0  (Paper + Bordeaux + Jade)
   ---------------------------------------------------------------------
   Light: off-white paper + bordeaux primary + jade secondary
   Dark:  мокрый асфальт + 3 варианта акцента (управляется data-dark-accent)
   ===================================================================== */

:root {
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --fs-h1:      clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h4:      1.375rem;
  --fs-body-l:  1.1875rem;
  --fs-body-m:  1rem;
  --fs-caption: 0.875rem;
  --fs-meta:    0.8125rem;
  --fs-rubric:  0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-display: 700;

  --tracking-display: -0.025em;
  --tracking-h:       -0.018em;
  --tracking-body:    0;
  --tracking-rubric:  0.16em;
  --tracking-wide:    0.04em;

  --lh-tight:   1.05;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px;  --space-8: 64px;  --space-9: 96px; --space-10: 128px;
  --container: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

/* ── LIGHT — paper + bordeaux + jade ──────────────────────────────── */
:root,
[data-theme="light"] {
  --bg-deep:     oklch(0.962 0.013 84);
  --bg-surface:  oklch(0.978 0.010 84);
  --bg-elevated: oklch(0.992 0.006 86);

  --text-primary:   oklch(0.235 0.010 42);
  --text-secondary: oklch(0.430 0.011 42);
  --text-muted:     oklch(0.580 0.012 42);

  --accent:          oklch(0.440 0.130 18);
  --accent-hover:    oklch(0.380 0.135 16);
  --accent-soft:     oklch(0.440 0.130 18 / 0.10);
  --accent-contrast: oklch(0.984 0.008 86);

  --jade:          oklch(0.470 0.075 165);
  --jade-hover:    oklch(0.405 0.080 165);
  --jade-soft:     oklch(0.470 0.075 165 / 0.10);
  --jade-contrast: oklch(0.984 0.008 86);

  --brass:          oklch(0.485 0.110 60);
  --brass-soft:     oklch(0.485 0.110 60 / 0.10);

  --success: oklch(0.520 0.110 150);
  --warning: oklch(0.600 0.120 70);
  --error:   oklch(0.535 0.170 28);
  --info:    oklch(0.500 0.090 240);

  --border:        oklch(0.868 0.013 84);
  --border-strong: oklch(0.775 0.015 80);
  --overlay:       oklch(0.235 0.010 42 / 0.35);
  --hairline:      oklch(0.235 0.010 42 / 0.07);

  --shadow-sm: 0 1px 2px oklch(0.40 0.03 40 / 0.09);
  --shadow-md: 0 10px 30px oklch(0.40 0.03 40 / 0.10);
  --shadow-lg: 0 28px 70px oklch(0.38 0.04 40 / 0.14);
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 16px 44px oklch(0.440 0.130 18 / 0.15);
}

/* ── DARK — мокрый асфальт ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-deep:     oklch(0.205 0.008 240);
  --bg-surface:  oklch(0.243 0.009 240);
  --bg-elevated: oklch(0.282 0.010 240);

  --text-primary:   oklch(0.948 0.006 80);
  --text-secondary: oklch(0.758 0.008 80);
  --text-muted:     oklch(0.588 0.010 75);

  --jade:          oklch(0.640 0.080 165);
  --jade-hover:    oklch(0.700 0.075 165);
  --jade-soft:     oklch(0.640 0.080 165 / 0.16);
  --jade-contrast: oklch(0.205 0.008 240);

  --brass:          oklch(0.685 0.110 65);
  --brass-soft:     oklch(0.685 0.110 65 / 0.16);

  --success: oklch(0.690 0.115 150);
  --warning: oklch(0.760 0.120 75);
  --error:   oklch(0.665 0.165 30);
  --info:    oklch(0.690 0.095 240);

  --border:        oklch(0.323 0.010 240);
  --border-strong: oklch(0.423 0.012 240);
  --overlay:       oklch(0.130 0.008 240 / 0.66);
  --hairline:      oklch(0.948 0.006 80 / 0.07);

  --shadow-sm: 0 1px 2px oklch(0.10 0.005 240 / 0.5);
  --shadow-md: 0 10px 30px oklch(0.10 0.005 240 / 0.45);
  --shadow-lg: 0 28px 70px oklch(0.08 0.005 240 / 0.55);
}

/* DARK accent — BRASS (по умолчанию) */
[data-theme="dark"][data-dark-accent="brass"],
[data-theme="dark"]:not([data-dark-accent]) {
  --accent:          oklch(0.745 0.110 70);
  --accent-hover:    oklch(0.800 0.100 72);
  --accent-soft:     oklch(0.745 0.110 70 / 0.16);
  --accent-contrast: oklch(0.205 0.008 240);
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 16px 44px oklch(0.745 0.110 70 / 0.22);
}

/* DARK accent — AQUA */
[data-theme="dark"][data-dark-accent="aqua"] {
  --accent:          oklch(0.685 0.095 200);
  --accent-hover:    oklch(0.740 0.090 202);
  --accent-soft:     oklch(0.685 0.095 200 / 0.16);
  --accent-contrast: oklch(0.205 0.008 240);
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 16px 44px oklch(0.685 0.095 200 / 0.22);
}

/* DARK accent — PLUM (сливовый, мягче чем чистый бордо) */
[data-theme="dark"][data-dark-accent="plum"] {
  --accent:          oklch(0.605 0.145 20);
  --accent-hover:    oklch(0.665 0.135 22);
  --accent-soft:     oklch(0.605 0.145 20 / 0.16);
  --accent-contrast: oklch(0.205 0.008 240);
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 16px 44px oklch(0.605 0.145 20 / 0.22);
}