/* dcsewage.org — design tokens
   Loaded before styles.css. Everything below is derived from the subject:
   river water, filing paper, and the colour of enforcement. */

:root {
    /* ---- colour: six roles ---- */
    --ink:        #1c1712;   /* warm brown-black — never #000 (GOV.UK); reads as silt, not UI chrome */
    --paper:      #f5f2ea;   /* page ground — warm filing paper, not screen grey */
    --paper-2:    #fffdf8;   /* raised panels, table bodies */
    --anacostia:  #0e6b78;   /* the river that recovered */
    --potomac:    #a15c18;   /* the river that didn't */
    --rock-creek: #6a5aa3;   /* the small third */
    --decree:     #8e2020;   /* oxblood — deadlines, overruns, enforcement */
    --alarm:      #cf142b;   /* DC flag red — reserved for "currently discharging" */
    --verified:   #3e6b2e;   /* moss — met, within allowance */

    /* severity ramp — volume encoding, light to heavy */
    --sev-1: #e8c9a0;
    --sev-2: #d99b52;
    --sev-3: #b5651d;
    --sev-4: #7a3b09;

    /* derived */
    --rule:       #d9d3c6;
    --rule-soft:  #e8e3d8;
    --ink-60:     #5c6360;
    --ink-30:     #9da29f;

    /* legacy aliases so existing markup keeps working during the rebuild */
    --primary-color: var(--anacostia);
    --primary-dark:  var(--ink);
    --secondary-color: var(--anacostia);
    --accent-color:  var(--decree);
    --text-color:    var(--ink);
    --text-light:    var(--ink-60);
    --bg-gray:       var(--paper-2);
    --border-color:  var(--rule);
    --success-color: var(--verified);
    --warning-color: var(--potomac);
    --danger-color:  var(--decree);
    --shadow:        none;
    --shadow-lg:     none;

    /* chart series */
    --river-ana: var(--anacostia);
    --river-pot: var(--potomac);
    --river-rc:  var(--rock-creek);

    /* ---- type ---- */
    --font-display: Newsreader, Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-ui: "Public Sans", "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    --t-display: clamp(2.4rem, 5.6vw, 4.25rem);
    --t-h2:      clamp(1.7rem, 3vw, 2.3rem);
    --t-h3:      1.3125rem;
    --t-lede:    1.28rem;
    --t-body:    1.1875rem;   /* 19px — GOV.UK body size */
    --t-small:   0.9375rem;
    --t-caption: 0.9375rem;
    --t-label:   0.6875rem;
    --t-stat:    clamp(2.5rem, 5.5vw, 3.75rem);
    --t-meta:    0.75rem;

    /* ---- space: 4px base ---- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
    --s9: 96px; --s10: 128px;

    /* ---- measure ---- */
    --w-text:  64ch;
    --w-wide:  1180px;
    --w-chart: 1400px;

    --radius: 2px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:       #e8e4da;
        --paper:     #0f1513;
        --paper-2:   #161d1a;
        --rule:      #2b3531;
        --rule-soft: #222b28;
        --ink-60:    #a6ada9;
        --ink-30:    #6f7874;
        --anacostia: #2a97a6;
        --potomac:   #d08c3a;
        --rock-creek:#9484cf;
        --decree:    #d26262;
        --verified:  #6fa15c;
    }
}

/* ---- self-hosted faces (CSP-safe: same-origin only) ----
   Files are optional — the stacks above fall back to Charter/Georgia and
   Helvetica/system-ui, which are already a serif/sans pairing rather than the
   default stack. Drop WOFF2 files into /fonts/ to upgrade. */
@font-face {
    font-family: "Newsreader";
    src: url("/fonts/newsreader-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("/fonts/newsreader-400-italic.woff2") format("woff2");
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("/fonts/newsreader-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("/fonts/publicsans-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("/fonts/publicsans-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/plexmono-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}