/* ==========================================================================
   ACN design tokens · round 1 (24 Oct 2026)
   Drop-in for site/static/acn.css: load this file FIRST, then acn.css.
   - Keeps every variable name acn.css already uses (--paper, --ink, --tobacco …),
     so nothing in acn.css has to change for light mode.
   - Adds a dark theme by re-pointing those same names (opt-in, see bottom).
   - Adds a type scale, spacing, radii, shadows and the two hard-coded zebra
     colours in acn.css (#f8f4ec, #ddd6c6) as --zebra / --hatch.
   Fonts are self-hosted (SIL OFL 1.1) from /static/fonts/ — replaces the
   Google Fonts <link> in acn/render.py.
   ========================================================================== */

@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-italic-var.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- Colour · light (mood board values, unchanged) -------------------- */
  --paper:      #F4F0E6;   /* page background */
  --paper-deep: #E8E2D4;   /* table head, code wells, chips */
  --white:      #FFFCF7;   /* panels / cards on paper */
  --zebra:      #F8F4EC;   /* was hard-coded in table.data zebra rows */
  --hatch:      #DDD6C6;   /* was hard-coded in .tile .face.back stripes */
  --ink:        #1A1714;   /* body text            15.7:1 on paper */
  --ink-mute:   #5C564C;   /* meta, captions        6.4:1 on paper */
  --rule:       #C9C1B2;   /* hairlines (decorative, not a boundary) */
  --control:    #7D7466;   /* input / control borders 4.0:1 on paper (≥3:1 non-text) */
  --tobacco:    #8B2E1F;   /* links, ACN emphasis, one primary button   7.4:1 */
  --tobacco-hover: #A3392A;
  --tobacco-wash:  #F3E3DC;/* selected row / active chip background */
  --on-tobacco: #F4F0E6;   /* text on tobacco fill  7.4:1 */
  --gold:       #A67C2D;   /* 3.3:1, non-text only: scope rule + spec callout border only, never text, never fill */
  --focus:      #1A1714;   /* focus ring */

  /* Semantic aliases (new code should use these) */
  --acn-bg: var(--paper);
  --acn-surface: var(--white);
  --acn-surface-sunk: var(--paper-deep);
  --acn-text: var(--ink);
  --acn-text-mute: var(--ink-mute);
  --acn-border: var(--rule);
  --acn-border-strong: var(--control);
  --acn-accent: var(--tobacco);
  --acn-on-accent: var(--on-tobacco);
  --acn-mark: var(--gold);

  /* ---- Data-viz ramp (coverage bars, decade histograms) ---------------- */
  --viz-1: #8B2E1F;  --viz-2: #B9634E;  --viz-3: #D9A08E;  --viz-track: #E8E2D4;

  /* ---- Type ------------------------------------------------------------ */
  --font-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale (px at 16px root). Body stays 17px as in acn.css. */
  --fs-micro: 0.75rem;    /* 12  · uppercase labels, table heads (tracked 0.08em) */
  --fs-meta:  0.8125rem;  /* 13  · footer, meta, captions */
  --fs-table: 0.875rem;   /* 14  · tables, dense lists */
  --fs-small: 0.9375rem;  /* 15  · secondary UI, nav */
  --fs-body:  1.0625rem;  /* 17  · body */
  --fs-lede:  1.1875rem;  /* 19  · lede / claim sub */
  --fs-h3:    1.25rem;    /* 20  · section */
  --fs-h2:    1.5rem;     /* 24  · sub-page title */
  --fs-h1:    1.75rem;    /* 28  · page title */
  --fs-acn-xl: clamp(1.375rem, 1rem + 1.6vw, 2rem);   /* 22→32 · ACN headline on card record */
  --fs-claim: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);   /* 32→44 · Home claim (serif) */
  --lh-tight: 1.2;  --lh-snug: 1.35;  --lh-body: 1.55;
  --tracking-label: 0.08em;  --tracking-mono: -0.01em;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Space (4px base) ------------------------------------------------ */
  --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;

  /* ---- Layout ---------------------------------------------------------- */
  --max: 840px;        /* prose (unchanged) */
  --max-wide: 1080px;  /* tables (unchanged) */
  --max-xwide: 1240px; /* new: set / player pages with a side rail */
  --header-h: 64px;

  /* ---- Radii: "almost square" ------------------------------------------ */
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px;

  /* ---- Elevation: hairlines first; shadows only for floating UI --------- */
  --shadow-0: none;
  --shadow-hairline: 0 0 0 1px var(--rule);
  --shadow-1: 0 1px 0 rgba(26, 23, 20, 0.06), 0 1px 2px rgba(26, 23, 20, 0.06);   /* sticky header */
  --shadow-2: 0 6px 20px -8px rgba(26, 23, 20, 0.28);                             /* menus, toasts */
  --shadow-menu: 0 6px 18px rgba(26, 23, 20, 0.14);                               /* search suggestions */

  /* ---- Lightbox: always a dark viewing room, in either theme ------------ */
  --lb-bg:       #120F0C;
  --lb-backdrop: rgba(18, 15, 12, 0.6);
  --lb-ink:      #F5F0E6;
  --lb-rule:     rgba(255, 255, 255, 0.12);
  --lb-control:  rgba(255, 255, 255, 0.6);
  --lb-focus:    #FFFFFF;
  --lb-link:     #E9C98A;

  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 120ms;
}

/* ---- Dark ("reading room") ------------------------------------------------
   Opt-in. The mood board says light-first; ship light as default and let
   prefers-color-scheme or a toggle set data-theme="dark" on <html>.
   Same variable names are re-pointed, so acn.css components follow. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #16130F;
  --paper-deep: #2A251F;
  --white:      #1F1B16;
  --zebra:      #1B1813;
  --hatch:      #332D25;
  --ink:        #EFE8DA;  /* 15.2:1 on bg */
  --ink-mute:   #B3AA9A;  /*  8.1:1 */
  --rule:       #3D362E;
  --control:    #8A8070;  /*  4.8:1 */
  --tobacco:    #E8957D;  /*  8.0:1 on bg — tobacco lifted for dark */
  --tobacco-hover: #F2AE99;
  --tobacco-wash:  #3A231C;
  --on-tobacco: #16130F;  /*  8.0:1 on the lifted tobacco */
  --gold:       #C9A35A;
  --focus:      #EFE8DA;
  --viz-1: #E8957D; --viz-2: #B9634E; --viz-3: #7A4436; --viz-track: #2A251F;
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-menu: 0 6px 18px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --paper: #16130F; --paper-deep: #2A251F; --white: #1F1B16; --zebra: #1B1813; --hatch: #332D25;
    --ink: #EFE8DA; --ink-mute: #B3AA9A; --rule: #3D362E; --control: #8A8070;
    --tobacco: #E8957D; --tobacco-hover: #F2AE99; --tobacco-wash: #3A231C; --on-tobacco: #16130F;
    --gold: #C9A35A; --focus: #EFE8DA;
    --viz-1: #E8957D; --viz-2: #B9634E; --viz-3: #7A4436; --viz-track: #2A251F;
    --shadow-1: 0 1px 0 rgba(0,0,0,.4); --shadow-2: 0 8px 24px -8px rgba(0,0,0,.7); --shadow-menu: 0 6px 18px rgba(0,0,0,.6);
  }
}