/* =============================================================================
   Korat Design System — colors_and_type.css
   ─────────────────────────────────────────────────────────────────────────────
   Single source of truth for tokens used by every preview card, slide, and
   UI-kit surface in this project. Mirrors the tokens shipped in the Korat
   product (frontend/src/style.css → catalog.css), with light/dark and a few
   semantic typography helpers added on top.

   References:
   - docs/brand/design-system.md (Appendix A — token map)
   - docs/brand/foundation.md  (manifesto v5, voice)
   - docs/brand/catalog/catalog.css (executable reference)

   Brand decisions locked (do NOT diverge):
     • Default theme = dark   (manifesto §IX «жизнь становится тише»)
     • One palette only       (no .colorful / .mono toggle — removed)
     • Signature hue = warm amber, hue 70–75 on warm neutrals (hue 80)
     • Display + UI = Geist Variable.   Mono = Geist Mono.   No serif.
     • Voice: «ты» / direct, no «please», no emoji as decoration
   ============================================================================= */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Geist"),
       url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.5/files/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.5/files/geist-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Geist Mono"),
       url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.5/files/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.5/files/geist-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── LIGHT (override). Default page state is .dark ──────────────────────── */
:root,
.light {
  color-scheme: light;

  /* Surfaces — warm paper, hue 80 */
  --background:        oklch(0.985 0.008 80);
  --foreground:        oklch(0.16  0.014 80);
  --card:              oklch(1     0.004 80);
  --card-foreground:   oklch(0.16  0.014 80);
  --popover:           oklch(1     0.004 80);
  --popover-foreground:oklch(0.16  0.014 80);

  /* Brand — signature amber */
  --primary:           oklch(0.62  0.135 65);
  --primary-foreground:oklch(0.985 0.008 80);

  /* Secondary surfaces */
  --secondary:           oklch(0.95 0.010 80);
  --secondary-foreground:oklch(0.22 0.012 80);
  --muted:               oklch(0.95 0.010 80);
  --muted-foreground:    oklch(0.45 0.010 80);
  --accent:              oklch(0.95 0.010 80);
  --accent-foreground:   oklch(0.22 0.012 80);

  /* Status */
  --destructive:           oklch(0.55 0.220 25);
  --destructive-foreground:oklch(0.985 0.008 80);

  /* Chrome */
  --border: oklch(0.16 0.012 80 / 12%);
  --input:  oklch(0.16 0.012 80 / 16%);
  --ring:   oklch(0.62 0.135 65);

  /* Charts — amber → silver-grey + 1 cool anchor for diff data */
  --chart-1: oklch(0.62 0.135 65);
  --chart-2: oklch(0.55 0.080 60);
  --chart-3: oklch(0.52 0.040 70);
  --chart-4: oklch(0.45 0.025 80);
  --chart-5: oklch(0.36 0.058 234);

  /* Sidebar — same family as card chrome */
  --sidebar:                    var(--card);
  --sidebar-foreground:         var(--card-foreground);
  --sidebar-primary:            var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent:             var(--accent);
  --sidebar-accent-foreground:  var(--accent-foreground);
  --sidebar-border:             var(--border);
  --sidebar-ring:               var(--ring);

  /* Geometry */
  --radius:    0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl:calc(var(--radius) * 1.8);
  --radius-3xl:calc(var(--radius) * 2.2);
  --radius-pill: 999px;

  /* Shadows — matte, never glow */
  --shadow-1: 0 1px 0 oklch(0.16 0.012 80 / 4%);
  --shadow-2: 0 1px 2px  oklch(0.16 0.012 80 / 6%),  0 0 0 0.5px oklch(0.16 0.012 80 / 5%);
  --shadow-3: 0 4px 12px oklch(0.16 0.012 80 / 8%),  0 0 0 0.5px oklch(0.16 0.012 80 / 6%);
  --shadow-4: 0 18px 40px oklch(0.16 0.012 80 / 14%),0 0 0 0.5px oklch(0.16 0.012 80 / 8%);

  /* Motion */
  --ease-default: cubic-bezier(0.32, 0, 0.16, 1);
  --ease-spring:  cubic-bezier(0.6,  0, 0.2, 1.4);
  --ease-settle:  cubic-bezier(0.2,  0.8, 0.2, 1);
  --d-quick: 140ms;
  --d-base:  240ms;
  --d-slow:  420ms;
  --d-pour:  720ms;

  /* Spacing scale — 4px grid, 9 stops */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 56px;
  --sp-16: 80px;

  /* Type — base + semantic */
  --font-sans:  "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
  --font-display: var(--font-sans);

  /* Bilingual line-heights & tracking — applied via :lang() helpers below */
  --lh-body:   1.55;     /* EN default */
  --lh-tight:  1.2;
  --tracking-display: -0.025em;
  --tracking-body:    -0.005em;
  --tracking-mono:    0;
}

/* ── DARK (default for the brand) ───────────────────────────────────────── */
.dark,
:root.dark {
  color-scheme: dark;

  --background:        oklch(0.13 0.012 80);
  --foreground:        oklch(0.96 0.006 80);
  --card:              oklch(0.16 0.014 80);
  --card-foreground:   oklch(0.96 0.006 80);
  --popover:           oklch(0.16 0.014 80);
  --popover-foreground:oklch(0.96 0.006 80);

  --primary:           oklch(0.74 0.155 70);
  --primary-foreground:oklch(0.13 0.012 80);

  --secondary:           oklch(0.22 0.012 80);
  --secondary-foreground:oklch(0.96 0.006 80);
  --muted:               oklch(0.22 0.012 80);
  --muted-foreground:    oklch(0.68 0.010 80);
  --accent:              oklch(0.22 0.012 80);
  --accent-foreground:   oklch(0.96 0.006 80);

  --destructive:           oklch(0.68 0.190 25);
  --destructive-foreground:oklch(0.13 0.012 80);

  --border: oklch(1 0.005 80 / 10%);
  --input:  oklch(1 0.005 80 / 14%);
  --ring:   oklch(0.74 0.155 70);

  --chart-1: oklch(0.74 0.155 70);
  --chart-2: oklch(0.66 0.085 65);
  --chart-3: oklch(0.58 0.045 75);
  --chart-4: oklch(0.46 0.025 80);
  --chart-5: oklch(0.36 0.058 234);

  --shadow-1: 0 1px 0 oklch(0 0 0 / 30%);
  --shadow-2: 0 1px 2px  oklch(0 0 0 / 35%), 0 0 0 0.5px oklch(1 0.005 80 / 6%);
  --shadow-3: 0 6px 18px oklch(0 0 0 / 45%), 0 0 0 0.5px oklch(1 0.005 80 / 8%);
  --shadow-4: 0 24px 60px oklch(0 0 0 / 60%), 0 0 0 0.5px oklch(1 0.005 80 / 10%);
}

/* ── Base typography & semantic helpers ─────────────────────────────────── */
html { font-family: var(--font-sans);
       font-feature-settings: "cv11","ss01","tnum";
       -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility; }

body { background: var(--background); color: var(--foreground);
       font-size: 15px; line-height: var(--lh-body);
       letter-spacing: var(--tracking-body);
       transition: background var(--d-base) var(--ease-default),
                   color      var(--d-base) var(--ease-default); }

:lang(ru) { letter-spacing: 0; line-height: 1.62; }

::selection { background: oklch(from var(--primary) l c h / 30%); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Display / heading scale.
   Use class names so cards can opt-in without bleeding into UI-kit components. */
.k-display-1 { font: 600 56px/1.04 var(--font-display); letter-spacing: var(--tracking-display); }
.k-display-2 { font: 600 40px/1.06 var(--font-display); letter-spacing: var(--tracking-display); }
.k-h1        { font: 600 32px/1.12 var(--font-display); letter-spacing: -0.02em; }
.k-h2        { font: 600 24px/1.2  var(--font-display); letter-spacing: -0.015em; }
.k-h3        { font: 600 19px/1.3  var(--font-display); letter-spacing: -0.01em; }
.k-h4        { font: 600 16px/1.35 var(--font-display); letter-spacing: -0.005em; }
.k-body      { font: 400 15px/1.55 var(--font-sans); }
.k-body-sm   { font: 400 13px/1.5  var(--font-sans); }
.k-caption   { font: 400 12px/1.4  var(--font-sans); color: var(--muted-foreground); }
.k-eyebrow   { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em;
               text-transform: uppercase; color: var(--muted-foreground); }
.k-mono      { font: 400 13px/1.5 var(--font-mono); letter-spacing: var(--tracking-mono); }
.k-kbd       { font: 500 12px/1   var(--font-mono); padding: 2px 6px;
               border: 1px solid var(--border); border-radius: var(--radius-sm);
               background: var(--card); color: var(--foreground); }

/* Tabular numerals for dashboards / receipts. */
.k-tnum { font-variant-numeric: tabular-nums lining-nums; }

/* Reduced-motion respected globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}