/* Hallmark · macrostructure: Marquee Hero · tone: playful print · anchor hue: riso pink 0 / riso blue 262
 * theme: custom (vibe: "riso poster wall, newsprint, loud but friendly")
 *   paper oklch(95.5% 0.012 95) · accent oklch(62% 0.24 0) pink · accent-2 oklch(47% 0.19 262) blue
 *   display: Bricolage Grotesque 800 · body: Figtree · mono: JetBrains Mono
 *   axes: light / display-heavy grotesk / warm
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 *
 * The one token file for design.dunn.us. The site (Base.astro) and the review page (/p/:slug) both load it
 * from /styles/tokens.css. Token NAMES are a contract shared with the brief and round-two work: change
 * values here, never rename. Components use only these names. */
:root {
  --bg: oklch(95.5% 0.012 95);         /* newsprint */
  --surface: oklch(99.5% 0.003 95);    /* the white of a printed card */
  --surface-2: oklch(92% 0.016 95);    /* hover, wells, code */
  --ink: oklch(24% 0.06 265);          /* riso navy, all text and rules */
  --muted: oklch(44% 0.035 265);
  --line: oklch(24% 0.06 265);         /* rules are ink: the print look */
  --line-soft: oklch(84% 0.02 95);
  --accent: oklch(62% 0.24 0);         /* fluorescent pink */
  --accent-ink: oklch(99.5% 0.003 95);
  --accent-2: oklch(47% 0.19 262);     /* riso blue: offsets, hover, links */
  --focus: oklch(47% 0.19 262);
  --danger: oklch(50% 0.19 28);
  --success: oklch(48% 0.12 155);
  --image: oklch(100% 0 0);            /* behind generated images, always white */

  --font-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 10px;
  --radius-lg: 18px;
  --rule: 2px;
  --rule-thick: 3px;
  --offset: 5px;                       /* the misregistered print shadow */

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 64ch;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms; --dur: 200ms;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(19% 0.035 265);
    --surface: oklch(23% 0.04 265);
    --surface-2: oklch(27% 0.045 265);
    --ink: oklch(95% 0.012 95);
    --muted: oklch(76% 0.025 265);
    --line: oklch(88% 0.015 95);
    --line-soft: oklch(34% 0.04 265);
    --accent: oklch(70% 0.21 0);
    --accent-ink: oklch(19% 0.035 265);
    --accent-2: oklch(72% 0.13 262);
    --focus: oklch(72% 0.13 262);
    --danger: oklch(72% 0.16 28);
    --success: oklch(74% 0.12 155);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(19% 0.035 265);
  --surface: oklch(23% 0.04 265);
  --surface-2: oklch(27% 0.045 265);
  --ink: oklch(95% 0.012 95);
  --muted: oklch(76% 0.025 265);
  --line: oklch(88% 0.015 95);
  --line-soft: oklch(34% 0.04 265);
  --accent: oklch(70% 0.21 0);
  --accent-ink: oklch(19% 0.035 265);
  --accent-2: oklch(72% 0.13 262);
  --focus: oklch(72% 0.13 262);
  --danger: oklch(72% 0.16 28);
  --success: oklch(74% 0.12 155);
  color-scheme: dark;
}

/* Shared components. Every page that loads this file gets the same buttons, fields, cards and chips. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; white-space: nowrap; cursor: pointer;
  font: 700 16px/1.1 var(--font-body); text-decoration: none;
  color: var(--ink); background: var(--surface);
  border: var(--rule) solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translate(1px, 1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; opacity: .8; }
.btn-primary {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  color: var(--accent-ink); background: var(--accent); border-color: var(--line);
  box-shadow: var(--offset) var(--offset) 0 var(--accent-2);
}
.btn-primary:hover { background: var(--accent); transform: translate(-1px, -1px); box-shadow: calc(var(--offset) + 1px) calc(var(--offset) + 1px) 0 var(--accent-2); }
.btn-primary:active { transform: translate(var(--offset), var(--offset)); box-shadow: 0 0 0 var(--accent-2); }
.btn-quiet { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; padding-inline: 4px; }
.btn-quiet:hover { background: transparent; color: var(--accent-2); }

.field {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px;
  font: 400 17px/1.45 var(--font-body); color: var(--ink);
  background: var(--surface); border: var(--rule) solid var(--line); border-radius: var(--radius);
}
.field::placeholder { color: var(--muted); opacity: .85; }
.field:hover { background: var(--bg); }
.field:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field:disabled { opacity: .55; cursor: not-allowed; }
.field[aria-invalid="true"], .field.invalid { border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger); }
textarea.field { resize: vertical; }

.card { background: var(--surface); border: var(--rule) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; white-space: nowrap;
  font: 600 14px/1 var(--font-body); color: var(--ink); background: var(--surface);
  border: var(--rule) solid var(--line); border-radius: 999px; cursor: pointer;
}
.chip:hover { background: var(--surface-2); }
.chip:focus-visible, .chip:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.fineprint { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mono-label { font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary { transition: none; }
  .btn:active, .btn-primary:hover, .btn-primary:active { transform: none; }
}