/* =============================================================
   Helpful Sudoku — Design Tokens (v2)
   Fonts served from /static/fonts/
   ============================================================= */

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/Manrope-Variable.woff2") format("woff2-variations"),
       url("/static/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   Palette — raw color scales
   ============================================================= */
:root {
  --paper-cream:   oklch(97.2% 0.012 85);
  --paper-cream-2: oklch(94.8% 0.014 82);
  --paper-cream-3: oklch(92.0% 0.016 80);
  --ink-warm:      oklch(22.0% 0.015 65);
  --ink-warm-2:    oklch(38.0% 0.012 65);
  --ink-warm-3:    oklch(58.0% 0.010 65);
  --ink-warm-4:    oklch(75.0% 0.008 65);

  --mid-0:  oklch(18.5% 0.014 260);
  --mid-1:  oklch(22.5% 0.014 260);
  --mid-2:  oklch(26.5% 0.014 260);
  --mid-3:  oklch(31.0% 0.014 260);
  --mid-fg:    oklch(94.0% 0.012 85);
  --mid-fg-2:  oklch(80.0% 0.010 80);
  --mid-fg-3:  oklch(62.0% 0.010 80);
  --mid-fg-4:  oklch(45.0% 0.010 80);

  --sage-50:  oklch(96.5% 0.020 145);
  --sage-100: oklch(92.0% 0.035 145);
  --sage-200: oklch(84.0% 0.055 145);
  --sage-300: oklch(75.0% 0.070 145);
  --sage-400: oklch(68.0% 0.075 145);
  --sage-500: oklch(55.0% 0.085 145);
  --sage-600: oklch(48.0% 0.078 145);
  --sage-700: oklch(42.0% 0.070 145);

  --blue-50:  oklch(96.0% 0.018 245);
  --blue-100: oklch(91.0% 0.035 245);
  --blue-200: oklch(83.0% 0.055 245);
  --blue-300: oklch(72.0% 0.075 245);
  --blue-400: oklch(63.0% 0.090 245);
  --blue-500: oklch(54.0% 0.095 245);
  --blue-600: oklch(46.0% 0.090 245);
  --blue-700: oklch(38.0% 0.080 245);

  --ochre-50:  oklch(96.5% 0.020 80);
  --ochre-100: oklch(91.5% 0.040 80);
  --ochre-200: oklch(84.0% 0.070 80);
  --ochre-300: oklch(76.0% 0.090 80);
  --ochre-400: oklch(68.0% 0.100 80);
  --ochre-500: oklch(60.0% 0.100 78);
  --ochre-600: oklch(50.0% 0.090 75);
  --ochre-700: oklch(42.0% 0.080 72);

  --clay-50:  oklch(95.5% 0.020 40);
  --clay-100: oklch(89.0% 0.045 40);
  --clay-300: oklch(74.0% 0.090 40);
  --clay-500: oklch(58.0% 0.130 40);
  --clay-700: oklch(45.0% 0.115 40);
  --clay-900: oklch(30.0% 0.090 40);
}

/* =============================================================
   LIGHT THEME
   ============================================================= */
:root,
:root[data-theme="light"],
[data-theme="light"] {
  --bg:            var(--paper-cream);
  --surface:       var(--paper-cream);
  --surface-2:     var(--paper-cream-2);
  --surface-3:     var(--paper-cream-3);
  --fg:            var(--ink-warm);
  --fg-2:          var(--ink-warm-2);
  --fg-3:          var(--ink-warm-3);
  --fg-4:          var(--ink-warm-4);
  --hairline:      oklch(85.0% 0.010 70);
  --hairline-strong: oklch(72.0% 0.012 68);

  --cell-bg:            var(--surface);
  --cell-bg-peer:       color-mix(in oklch, var(--accent) 12%, var(--surface));
  --cell-bg-selected:   color-mix(in oklch, var(--accent) 30%, var(--surface));
  --cell-bg-same:       color-mix(in oklch, var(--accent) 22%, var(--surface));
  --cell-bg-hint:       color-mix(in oklch, var(--ochre-400) 30%, var(--surface));
  --cell-bg-error:      color-mix(in oklch, var(--clay-500) 22%, var(--surface));
  --cell-bg-solved:     color-mix(in oklch, var(--solver) 22%, var(--surface));

  --digit-given:   var(--fg);
  --digit-user:    var(--accent-700);
  --digit-error:   var(--clay-700);
  --digit-solved:  var(--solver-700);
  --digit-note:    var(--fg-3);
  --digit-single:  var(--ochre-700);

  color-scheme: light;
}

/* =============================================================
   DARK THEME
   ============================================================= */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg:            var(--mid-1);
  --surface:       var(--mid-1);
  --surface-2:     var(--mid-2);
  --surface-3:     var(--mid-3);
  --fg:            var(--mid-fg);
  --fg-2:          var(--mid-fg-2);
  --fg-3:          var(--mid-fg-3);
  --fg-4:          var(--mid-fg-4);
  --hairline:         oklch(36.0% 0.014 260);
  --hairline-strong:  oklch(48.0% 0.014 260);

  --cell-bg:            var(--mid-2);
  --cell-bg-peer:       color-mix(in oklch, var(--accent) 14%, var(--mid-2));
  --cell-bg-selected:   color-mix(in oklch, var(--accent) 35%, var(--mid-2));
  --cell-bg-same:       color-mix(in oklch, var(--accent) 25%, var(--mid-2));
  --cell-bg-hint:       color-mix(in oklch, var(--ochre-400) 26%, var(--mid-2));
  --cell-bg-error:      color-mix(in oklch, var(--clay-500) 26%, var(--mid-2));
  --cell-bg-solved:     color-mix(in oklch, var(--solver) 26%, var(--mid-2));

  --digit-given:   var(--fg);
  --digit-user:    var(--accent-300);
  --digit-error:   var(--clay-300);
  --digit-solved:  var(--solver-300);
  --digit-note:    var(--fg-3);
  --digit-single:  var(--ochre-300);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--mid-1);
    --surface:       var(--mid-1);
    --surface-2:     var(--mid-2);
    --surface-3:     var(--mid-3);
    --fg:            var(--mid-fg);
    --fg-2:          var(--mid-fg-2);
    --fg-3:          var(--mid-fg-3);
    --fg-4:          var(--mid-fg-4);
    --hairline:         oklch(36.0% 0.014 260);
    --hairline-strong:  oklch(48.0% 0.014 260);
    --cell-bg:            var(--mid-2);
    --cell-bg-peer:       color-mix(in oklch, var(--accent) 14%, var(--mid-2));
    --cell-bg-selected:   color-mix(in oklch, var(--accent) 35%, var(--mid-2));
    --cell-bg-same:       color-mix(in oklch, var(--accent) 25%, var(--mid-2));
    --cell-bg-hint:       color-mix(in oklch, var(--ochre-400) 26%, var(--mid-2));
    --cell-bg-error:      color-mix(in oklch, var(--clay-500) 26%, var(--mid-2));
    --cell-bg-solved:     color-mix(in oklch, var(--solver) 26%, var(--mid-2));
    --digit-given:   var(--fg);
    --digit-user:    var(--accent-300);
    --digit-error:   var(--clay-300);
    --digit-solved:  var(--solver-300);
    --digit-note:    var(--fg-3);
    --digit-single:  var(--ochre-300);
    color-scheme: dark;
  }
}

/* =============================================================
   ACCENTS
   ============================================================= */
:root,
:root[data-accent="sage"],
[data-accent="sage"] {
  --accent-50:  var(--sage-50);
  --accent-100: var(--sage-100);
  --accent-200: var(--sage-200);
  --accent-300: var(--sage-300);
  --accent-400: var(--sage-400);
  --accent:     var(--sage-500);
  --accent-600: var(--sage-600);
  --accent-700: var(--sage-700);
  --solver-100: var(--blue-100);
  --solver-300: var(--blue-300);
  --solver:     var(--blue-500);
  --solver-700: var(--blue-700);
}
:root[data-accent="blue"],
[data-accent="blue"] {
  --accent-50:  var(--blue-50);
  --accent-100: var(--blue-100);
  --accent-200: var(--blue-200);
  --accent-300: var(--blue-300);
  --accent-400: var(--blue-400);
  --accent:     var(--blue-500);
  --accent-600: var(--blue-600);
  --accent-700: var(--blue-700);
  --solver-100: var(--sage-100);
  --solver-300: var(--sage-300);
  --solver:     var(--sage-500);
  --solver-700: var(--sage-700);
}
:root[data-accent="ochre"],
[data-accent="ochre"] {
  --accent-50:  var(--ochre-50);
  --accent-100: var(--ochre-100);
  --accent-200: var(--ochre-200);
  --accent-300: var(--ochre-300);
  --accent-400: var(--ochre-400);
  --accent:     var(--ochre-500);
  --accent-600: var(--ochre-600);
  --accent-700: var(--ochre-700);
  --solver-100: var(--blue-100);
  --solver-300: var(--blue-300);
  --solver:     var(--blue-500);
  --solver-700: var(--blue-700);
}

/* =============================================================
   Spacing, radii, motion
   ============================================================= */
:root {
  --sp-0: 0; --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: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --r-0: 0; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.10);

  --font-sans: "Manrope", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-caption: 11px;
  --fs-micro:   12px;
  --fs-small:   13px;
  --fs-body:    15px;
  --fs-lead:    17px;
  --fs-h4:      20px;
  --fs-h3:      24px;
  --fs-h2:      36px;
  --fs-h1:      52px;
  --fs-display: 88px;

  --lh-tight: 1.05;
  --lh-snug:  1.20;
  --lh-body:  1.55;
  --lh-loose: 1.70;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: -0.005em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  --grid-line-color: var(--fg);
  --grid-line-color-thin: var(--hairline-strong);
}

/* =============================================================
   Semantic defaults
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-2), color var(--dur-2);
}

body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-sans); }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p { margin: 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-700);
}

::selection { background: var(--accent-100); color: var(--fg); }