/* Sparkfare Brand v1 "Honest Anticipation": the only place colours, spacing, radii and type sizes are defined.
   ROADMAP step 119 (K-A1a); night values added in K-B6 (step 129). Gold (--spark) is reserved for a verified deal chip and the mark. */
:root {
  /* Colour */
  --paper: #F5EFE3;
  --card: #FFFCF6;
  --paper-deep: #EBE2D0;
  --ink: #231C14;
  --ink-2: #5A4C3C;
  --spark: #E8B930;
  --spark-ink: #7A4F00;
  --sage: #2F6B47;
  --sage-dark: #245337;
  --on-sage: #FFFFFF; /* text on a sage fill */
  --on-spark: #231C14; /* text on the gold chip: dark in both themes */
  --clay: #A63D2A;
  --line: #DCCFB8;

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

  /* Radius */
  --radius: 6px;
  --radius-pill: 999px;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --leading: 1.55;
  --measure: 68ch;
  --max-width: 1180px;

  /* Names the pages used before Brand v1. They resolve to the tokens above, so a page changes colour by changing a token, not its own
     copy of a hex value. K-A2 retires --amber as an action colour. */
  --sand: var(--paper);
  --border: var(--line);
  --text: var(--ink);
  --muted: var(--ink-2);
  --muted-dim: var(--ink-2);
  --amber: var(--sage); /* retired as a colour (K-A2): old amber links and buttons are sage; a deal is the gold chip, not a coloured price */
  --card-hover: var(--paper-deep);
  --ledger: var(--ink);
  --ledger-muted: var(--ink-2);

  /* Follow the visitor's system theme: form controls, scrollbars and default backgrounds switch with the tokens below. */
  color-scheme: light dark;
}

/* Night (K-B6). Values from Brand v1; Sage fills carry dark text, and the gold chip keeps its dark text (--on-spark). */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17130E;
    --card: #211B14;
    --paper-deep: #2A231A;
    --ink: #F2EADB;
    --ink-2: #B9AC97;
    --spark: #E8B930;
    --spark-ink: #E8B930;
    --sage: #7FBF93;
    --sage-dark: #9CCFAD;
    --on-sage: #17130E;
    --clay: #E08A73;
    --line: #3A3128;
  }
}

/* ---- Base rules (K-A5, ROADMAP step 123): focus, skip link, hidden-but-readable text, minimum target size. ---- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 2000;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 10px 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }
/* The mark's outline follows the ink so it stays visible on the night paper (its dot stays gold). */
.brand-mark path { stroke: var(--ink); }
/* Sparklines drawn by the generators and the Worker carry the day-theme ink as an attribute; follow the token instead. */
polyline[stroke="#2B2620"] { stroke: var(--ink); }
/* A plain text link a page has not styled is Sage (the browser default blue and purple are not brand colours and fail in the night theme). The :where keeps this at zero specificity, so any page rule still wins. */
a:where(:not([class])) { color: var(--sage); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
main { display: block; }
main:focus { outline: none; }
/* WCAG 2.2 SC 2.5.8: every control is at least 24 x 24 CSS px. Navigation links get the room from padding, not from a bigger font. */
.site-nav a { display: inline-flex; align-items: center; min-height: 24px; }
button, [type="submit"], [type="button"], select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 24px; }
/* A link that stands alone in its list item, paragraph or definition is not "inline in a sentence", so it needs a 24px target too. */
main li > a:only-child, main p > a:only-child, main dd > a:only-child { display: inline-block; padding: 4px 0; }