/*
 * Bryce Huffman — design tokens
 * One file for the whole site (brycehuffman.com) and its products (feed).
 * Import once, then use the variables. Never hard-code a hex in a page.
 *
 * Source of truth: brand/tokens.json. Keep the two in sync.
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,500&display=swap");

:root {
  /* ---- Core color: light ---- */
  --color-ground: #F8F7F4;        /* Stone: page background */
  --color-surface: #FFFFFF;       /* Sheet: cards, panels, inputs */
  --color-surface-sunken: #F1EFEA;/* inset areas, input fill on surface */
  --color-ink: #141517;           /* Press black: primary text, heavy rules */
  --color-ink-soft: #34373C;      /* body copy on surface */
  --color-muted: #5B5F66;         /* Slate: meta, captions (≥ 4.5:1 on ground) */
  --color-rule: #E2DFD8;          /* hairlines, borders */
  --color-rule-strong: #DEDAD1;   /* borders on ground */

  --color-action: #23395B;        /* Navy: links, primary buttons, focus */
  --color-action-hover: #172742;
  --color-action-ink: #FFFFFF;    /* text on action */
  --color-wash: #E4E8EF;          /* following band, selected rows */

  --color-note: #B3261E;          /* Margin red: "why it's here" notes only */

  /* ---- Content types (feed) ---- */
  --type-paper: #23395B;   --type-paper-ink: #23395B;  --type-paper-tint: #E4E8EF;
  --type-news: #A86B00;    --type-news-ink: #7A4F00;   --type-news-tint: #F6ECD6;
  --type-report: #0F6E66;  --type-report-ink: #0F6E66; --type-report-tint: #DDEFEC;
  --type-post: #6B3A8C;    --type-post-ink: #6B3A8C;   --type-post-tint: #EFE5F5;

  /* ---- Status ---- */
  --color-good: #1E7A46;
  --color-warning: #A86B00;
  --color-critical: #B3261E;

  /* ---- Type ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-display: 600 clamp(3rem, 8vw, 6.5rem)/0.95 var(--font-sans);
  --text-h1: 600 2.5rem/1.1 var(--font-sans);
  --text-h2: 600 1.75rem/1.15 var(--font-sans);
  --text-h3: 600 1.25rem/1.25 var(--font-sans);
  --text-title: 600 1.4375rem/1.25 var(--font-serif);   /* item titles, 23px */
  --text-reading: 400 1.0625rem/1.6 var(--font-serif);  /* abstracts, 17px */
  --text-note: italic 400 0.9375rem/1.45 var(--font-serif); /* margin notes, 15px */
  --text-body: 400 1rem/1.6 var(--font-sans);
  --text-ui: 500 0.875rem/1.4 var(--font-sans);
  --text-meta: 400 0.75rem/1.4 var(--font-mono);

  --tracking-display: -0.05em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.04em;
  --measure: 68ch;               /* max line length for reading text */

  /* ---- Space: 4px base ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* ---- Shape ---- */
  --radius-sm: 2px;    /* swatches, tags */
  --radius: 4px;       /* buttons, inputs, cards */
  --radius-pill: 999px;/* chips */
  --border: 1px solid var(--color-rule);
  --rule-heavy: 2px solid var(--color-ink);
  --target-min: 44px;  /* minimum touch target */

  /* ---- Layout ---- */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --page-max: 1200px;
  --page-pad: clamp(16px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration: 200ms;

  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-action);
  color-scheme: light dark;
}

/* ---- Dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #121316;
    --color-surface: #1B1D21;
    --color-surface-sunken: #16181B;
    --color-ink: #ECEDEF;
    --color-ink-soft: #CDD0D5;
    --color-muted: #A2A7B0;
    --color-rule: #2C2F35;
    --color-rule-strong: #393D44;
    --color-action: #9DB4E0;
    --color-action-hover: #C3D2EE;
    --color-action-ink: #121316;
    --color-wash: #22304A;
    --color-note: #FF8A80;
    --type-paper: #9DB4E0;  --type-paper-ink: #9DB4E0;  --type-paper-tint: #22304A;
    --type-news: #E0B45C;   --type-news-ink: #E0B45C;   --type-news-tint: #3A2F1A;
    --type-report: #5CC9BC; --type-report-ink: #5CC9BC; --type-report-tint: #163B37;
    --type-post: #C7A0E6;   --type-post-ink: #C7A0E6;   --type-post-tint: #33253F;
    --color-good: #5CC98A; --color-warning: #E0B45C; --color-critical: #FF8A80;
  }
}
:root[data-theme="dark"] {
  --color-ground: #121316;
  --color-surface: #1B1D21;
  --color-surface-sunken: #16181B;
  --color-ink: #ECEDEF;
  --color-ink-soft: #CDD0D5;
  --color-muted: #A2A7B0;
  --color-rule: #2C2F35;
  --color-rule-strong: #393D44;
  --color-action: #9DB4E0;
  --color-action-hover: #C3D2EE;
  --color-action-ink: #121316;
  --color-wash: #22304A;
  --color-note: #FF8A80;
  --type-paper: #9DB4E0;  --type-paper-ink: #9DB4E0;  --type-paper-tint: #22304A;
  --type-news: #E0B45C;   --type-news-ink: #E0B45C;   --type-news-tint: #3A2F1A;
  --type-report: #5CC9BC; --type-report-ink: #5CC9BC; --type-report-tint: #163B37;
  --type-post: #C7A0E6;   --type-post-ink: #C7A0E6;   --type-post-tint: #33253F;
  --color-good: #5CC98A; --color-warning: #E0B45C; --color-critical: #FF8A80;
}

/* ---- Base ---- */
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-action); text-underline-offset: 0.18em; }
a:hover { color: var(--color-action-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }
::selection { background: var(--color-wash); }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}