/* Rep Nineteen — design tokens. Dark is the default.
   Palette + type from the UI mockups, round 4 (Sep 2026): matte black,
   concrete/bone, burnt-rust "19", heavy condensed caps, wide-tracked mono. */

:root {
  --surface-base:    #000000;  /* page ground, pure black */
  --surface-raised:  #121211;  /* cards, panels */
  --surface-sunken:  #000000;  /* footer, input wells */
  --surface-bone:    #E6E2DA;  /* concrete panels: facts strip, batch check */

  --ink-primary:     #ECE8E1;  /* headings, key figures */
  --ink-body:        #CFCAC1;  /* running copy on dark */
  --ink-muted:       #BDB8AE;  /* secondary copy, nav */
  --ink-subtle:      #8E8A82;  /* captions, stat labels (12px+) */
  --ink-inverse:     #000000;  /* text on bone / on primary fills */
  --ink-on-bone-muted: #4A4843;
  --ink-on-accent:   #FFFFFF;  /* text on rust fills (4.97:1) */

  --accent:          #B4532F;  /* burnt rust: fills, bars, the 19 */
  --accent-hover:    #9C4526;
  --accent-strong:   #D06A43;  /* rust as text on dark ground */

  --hairline:        #2A2927;
  --hairline-strong: #4A4944;  /* outlined buttons, chips */
  --hairline-bone:   #CFCAC1;  /* dividers on bone panels */

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px;

  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-pill: 999px;
}

/* Light theme.
   Dark stays the default. Light applies when the OS asks for it (unless the
   page pins data-theme="dark"), or when a page sets data-theme="light". */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-base:    #ECE8E1;
    --surface-raised:  #F6F4EF;
    --surface-sunken:  #E0DBD2;
    --surface-bone:    #121211;
    --ink-primary:     #121211;
    --ink-body:        #3D3B37;
    --ink-muted:       #4A4843;
    --ink-subtle:      #5A5750;
    --ink-inverse:     #ECE8E1;
    --ink-on-bone-muted: #BDB8AE;
    --accent-strong:   #9C4526;
    --hairline:        #CFCAC1;
    --hairline-strong: #8E8A82;
    --hairline-bone:   #33322F;
  }
}

/* .theme-light: one light panel on a dark page (the home page stack builder). */
:root[data-theme="light"], .theme-light {
  --surface-base:    #ECE8E1;
  --surface-raised:  #F6F4EF;
  --surface-sunken:  #E0DBD2;
  --surface-bone:    #121211;
  --ink-primary:     #121211;
  --ink-body:        #3D3B37;
  --ink-muted:       #4A4843;
  --ink-subtle:      #5A5750;
  --ink-inverse:     #ECE8E1;
  --ink-on-bone-muted: #BDB8AE;
  --accent-strong:   #9C4526;
  --hairline:        #CFCAC1;
  --hairline-strong: #8E8A82;
  --hairline-bone:   #33322F;
}

.theme-light { color: var(--ink-body); }

/* Type styles. Display is Archivo at 66% width, weight 900, always caps. */
.display-xl { font: 900 150px/0.84 var(--font-display); font-stretch: 66%; letter-spacing: -0.01em; text-transform: uppercase; }
.display-lg { font: 900 80px/0.88  var(--font-display); font-stretch: 66%; letter-spacing: -0.005em; text-transform: uppercase; }
.display-md { font: 800 30px/0.95  var(--font-display); font-stretch: 70%; text-transform: uppercase; }
.stat       { font: 900 40px/1     var(--font-display); font-stretch: 66%; text-transform: uppercase; }

.body-lg { font: 400 18px/1.55 var(--font-text); }
.body    { font: 400 16px/1.5  var(--font-text); }
.body-sm { font: 400 14px/1.5  var(--font-text); }

.spec       { font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.04em; }
.spec-label { font: 600 12px/1.5 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow    { font: 600 12px/1.5 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; }

/* Tell the browser which palette the page already uses, so a browser dark
   mode (Samsung Internet, Chrome's auto dark) doesn't recolour it. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: only light; }
.theme-light { color-scheme: light; }

body {
  background: var(--surface-base);
  color: var(--ink-primary);
  font: 400 16px/1.5 var(--font-text);
}

/* The system is square first and uses rules, not shadows. */
* { box-shadow: none; }