/* ==========================================================================
   COG — base stylesheet
   Reset, tokens, typography defaults, dark mode
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; line-height: 1.5; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; }
h5, h6 { line-height: 1.3; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Type */
  --font-display: 'Cabinet Grotesk', 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Radius / shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.06), 0 1px 3px oklch(0.2 0.02 60 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 60 / 0.06), 0 10px 24px oklch(0.2 0.02 60 / 0.05);

  /* Content widths */
  --page-max: 1200px;
  --prose-max: 68ch;
}

/* ============================================================
   Light theme (default) — warm off-white, deep ink, ochre accent
   ============================================================ */
:root, [data-theme="light"] {
  --color-bg:        oklch(0.977 0.008 85);   /* cream */
  --color-surface:   oklch(0.955 0.010 85);   /* card / alt band */
  --color-surface-2: oklch(0.925 0.013 85);   /* deeper alt band */
  --color-ink:       oklch(0.235 0.020 55);   /* deep warm charcoal */
  --color-ink-soft:  oklch(0.395 0.015 55);   /* secondary text */
  --color-ink-mute:  oklch(0.560 0.012 60);   /* meta / captions */
  --color-line:      oklch(0.870 0.014 75);   /* borders */
  --color-line-soft: oklch(0.910 0.012 78);
  --color-accent:    oklch(0.545 0.115 70);   /* warm ochre */
  --color-accent-2:  oklch(0.470 0.075 145);  /* olive — data / secondary */
  --color-accent-tint: oklch(0.935 0.030 70); /* very soft accent wash */
  --color-danger:    oklch(0.560 0.135 30);
}

[data-theme="dark"] {
  --color-bg:        oklch(0.170 0.010 55);
  --color-surface:   oklch(0.215 0.012 55);
  --color-surface-2: oklch(0.255 0.014 55);
  --color-ink:       oklch(0.945 0.010 80);
  --color-ink-soft:  oklch(0.815 0.010 80);
  --color-ink-mute:  oklch(0.660 0.012 75);
  --color-line:      oklch(0.320 0.014 60);
  --color-line-soft: oklch(0.270 0.012 60);
  --color-accent:    oklch(0.760 0.115 75);
  --color-accent-2:  oklch(0.700 0.085 145);
  --color-accent-tint: oklch(0.290 0.028 70);
  --color-danger:    oklch(0.700 0.135 30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:        oklch(0.170 0.010 55);
    --color-surface:   oklch(0.215 0.012 55);
    --color-surface-2: oklch(0.255 0.014 55);
    --color-ink:       oklch(0.945 0.010 80);
    --color-ink-soft:  oklch(0.815 0.010 80);
    --color-ink-mute:  oklch(0.660 0.012 75);
    --color-line:      oklch(0.320 0.014 60);
    --color-line-soft: oklch(0.270 0.012 60);
    --color-accent:    oklch(0.760 0.115 75);
    --color-accent-2:  oklch(0.700 0.085 145);
    --color-accent-tint: oklch(0.290 0.028 70);
    --color-danger:    oklch(0.700 0.135 30);
  }
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  transition: background-color 200ms ease, color 200ms ease;
}

::selection { background: var(--color-accent-tint); color: var(--color-ink); }