/* nathanpotter.dev — design tokens v1
   Source of truth for colour, type, spacing, radius, shadow.
   Theme: follows prefers-color-scheme until the visitor picks one; the toggle
   sets data-theme="light" | "dark" on <html> and (optionally) remembers it in localStorage.
   Secondary colour: "Maroon, fill only in dark" (locked). In dark mode maroon is a fill
   only (bars, markers); any text that is maroon in light mode uses --accent-text, which is
   body ink in dark mode. Never set text colour with --accent. */

:root {
  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-1: 0.8125rem;   /* 13px  meta, captions, card detail, chips */
  --fs-2: 0.9375rem;   /* 15px  body (line-height 1.55) */
  --fs-3: 1.0625rem;   /* 17px  lead paragraph, small titles */
  --fs-4: 1.3125rem;   /* 21px  role and card titles, hero headline */
  --fs-5: 1.75rem;     /* 28px  section headings, metrics */
  --fs-6: clamp(2.25rem, 6vw, 3.5rem); /* page title */
  --fs-label: 0.6875rem; /* 11px mono uppercase eyebrow / tag (letter-spacing .06–.08em) */
  --lh-body: 1.55;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* Radius */
  --r-1: 4px;      /* controls, buttons, inputs */
  --r-2: 8px;      /* cards, panels */
  --r-pill: 999px; /* chips, tags, round icon buttons */

  /* Layout */
  --content-max: 1200px;
  --gutter: var(--sp-5);        /* 24px desktop; use 16px under 480px */
  --rail-w: 220px;
  --tap: 44px;                  /* minimum target */

  /* Colour — light (default) */
  --bg: #F2F5F5;
  --surface: #FFFFFF;
  --surface-2: #E6ECEC;
  --raised: #FFFFFF;
  --ink: #151A1B;
  --ink-2: #4A5557;
  --line: #D2DBDB;
  --brand: #0F6E73;
  --brand-ink: #FFFFFF;
  --band: #0F6E73;
  --band-ink: #FFFFFF;
  --band-line: rgba(255, 255, 255, .35);
  --accent: #7A0E1B;       /* fill only: title rule, admin-bar edge */
  --accent-text: #7A0E1B;  /* text that wants the secondary colour */
  --chip: #E3EEEE;
  --cta-bg: #FFFFFF;
  --cta-ink: #0F6E73;
  --cta-sub: #4A5557;
  --cta-dot: #0F6E73;
  --cta-dot-ink: #FFFFFF;
  --admin-bg: #151A1B;
  --admin-ink: #E9EFEF;
  --shadow-1: 0 1px 2px rgba(10, 30, 32, .08), 0 1px 1px rgba(10, 30, 32, .04);
  --shadow-2: 0 8px 24px rgba(10, 30, 32, .12);
  --dim: .28;              /* opacity for filtered-out result cards */
  color-scheme: light;
}

/* Dark — values shared by both selectors below */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1213; --surface: #151C1E; --surface-2: #1D2628; --raised: #212B2D;
    --ink: #E9EFEF; --ink-2: #A3B1B3; --line: #2F3B3D;
    --brand: #6CCBD0; --brand-ink: #071113;
    --band: #0B2F32; --band-ink: #EAF5F5; --band-line: rgba(234, 245, 245, .22);
    --accent: #B8344A; --accent-text: #E9EFEF;
    --chip: #1F3335;
    --cta-bg: #6CCBD0; --cta-ink: #071113; --cta-sub: #14373A; --cta-dot: #071113; --cta-dot-ink: #6CCBD0;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1213; --surface: #151C1E; --surface-2: #1D2628; --raised: #212B2D;
  --ink: #E9EFEF; --ink-2: #A3B1B3; --line: #2F3B3D;
  --brand: #6CCBD0; --brand-ink: #071113;
  --band: #0B2F32; --band-ink: #EAF5F5; --band-line: rgba(234, 245, 245, .22);
  --accent: #B8344A; --accent-text: #E9EFEF;
  --chip: #1F3335;
  --cta-bg: #6CCBD0; --cta-ink: #071113; --cta-sub: #14373A; --cta-dot: #071113; --cta-dot-ink: #6CCBD0;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Base rules every page relies on */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-2); line-height: var(--lh-body); }
a { color: var(--brand); }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Print: clean single column, everything expanded, no chrome */
@media print {
  :root { --bg: #fff; --surface: #fff; --band: #fff; --band-ink: #000; --ink: #000; }
  .noprint, .site-header, .rail, .filter-chips, .cta { display: none !important; }
  details > * { display: block !important; }
  .card { opacity: 1 !important; box-shadow: none !important; }
}