/* ============================================================
   DD_LAB v4 — DESIGN TOKENS
   Academic-constructivist. Warm dark. Triadic palette.
   ============================================================ */

:root {
  /* ── Neutrals — warm near-black, paper grain ─────────────── */
  --bg-0:   oklch(0.13 0.008 70);   /* deepest */
  --bg-1:   oklch(0.17 0.010 70);   /* cards */
  --bg-2:   oklch(0.22 0.012 70);   /* borders */
  --bg-3:   oklch(0.28 0.012 70);   /* dividers */
  --bg-4:   oklch(0.40 0.010 70);   /* tertiary text */

  --fg-0:   oklch(0.99 0.004 70);   /* highest */
  --fg-1:   oklch(0.92 0.008 70);   /* body */
  --fg-2:   oklch(0.78 0.010 70);   /* muted */
  --fg-3:   oklch(0.62 0.012 70);   /* soft */

  /* ── Triadic palette ─────────────────────────────────────── */
  /* SOLID — emerald (formally derived, Lean-verified) */
  --solid:        oklch(0.74 0.13 165);
  --solid-hi:     oklch(0.82 0.15 165);
  --solid-soft:   oklch(0.74 0.13 165 / .15);
  --solid-ink:    oklch(0.16 0.04 165);

  /* PATTERN — amber (substrate-anchored ansatz, not yet Tier-1) */
  --pattern:        oklch(0.79 0.14 75);
  --pattern-hi:     oklch(0.85 0.15 75);
  --pattern-soft:   oklch(0.79 0.14 75 / .15);
  --pattern-ink:    oklch(0.18 0.04 75);

  /* OPEN — coral (not derived, awaits external input) */
  --open:        oklch(0.70 0.16 28);
  --open-hi:     oklch(0.76 0.17 28);
  --open-soft:   oklch(0.70 0.16 28 / .15);
  --open-ink:    oklch(0.18 0.04 28);

  /* Default accent = solid (most claims are solid in trust-context) */
  --accent:      var(--solid);
  --accent-hi:   var(--solid-hi);
  --accent-soft: var(--solid-soft);

  /* ── Typography — academic display + humanist sans + plex mono ─ */
  --font-display: 'Fraunces', 'Newsreader', Georgia, serif;
  --font-body:    'Inter', 'Source Sans 3', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    19px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-hero:  120px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tr-tight:  -0.03em;
  --tr-snug:   -0.012em;
  --tr-normal: 0;
  --tr-wide:   0.06em;
  --tr-wider:  0.14em;
  --tr-widest: 0.22em;

  /* ── 8px grid spacing ────────────────────────────────────── */
  --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;
  --s-32: 128px;

  /* Radii — restrained, mostly rectangular */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Borders */
  --bd-hair:  1px solid var(--bg-2);
  --bd-line:  1px solid var(--bg-3);
  --bd-thick: 2px solid var(--bg-3);

  /* Shadows — minimal, no glow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.35);
  --sh-md: 0 8px 24px rgba(0,0,0,.3);

  /* Motion */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in:   cubic-bezier(.5, 0, .75, 0);
  --dur-fast:  120ms;
  --dur-med:   240ms;
  --dur-slow:  480ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h:  72px;
}

/* ── Reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--fg-1);
  background-color: var(--bg-0);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain: subtle SVG noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* All content sits above grain */
header, main, section, footer, nav { position: relative; z-index: 1; }

a {
  color: var(--solid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
a:hover {
  color: var(--solid-hi);
  border-bottom-color: var(--solid-hi);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;            /* Fraunces optical 9pt is heavy; use lower weight */
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: var(--tr-tight);
  color: var(--fg-0);
  margin: 0;
}

p { margin: 0; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01" 1; }
.display { font-family: var(--font-display); letter-spacing: var(--tr-tight); }

.muted { color: var(--fg-2); }
.soft  { color: var(--fg-3); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--fs-xs)/1 var(--font-mono);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-xs);
}
.tag::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.tag--solid   { color: var(--solid);   background: var(--solid-soft); }
.tag--pattern { color: var(--pattern); background: var(--pattern-soft); }
.tag--open    { color: var(--open);    background: var(--open-soft); }

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

:focus-visible {
  outline: 2px solid var(--solid);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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