/* ==========================================================================
   Dason & Dason: design tokens. Linked first by both shells.
   The palette, type and spacing are the website's (website/assets/site.css):
   a soft graphite ground, warm off-white text at quiet sizes, and red only
   as a signal: the active menu item, focus, and the one filled button.

   Text contrast (WCAG AA needs 4.5:1), on ground / raised / lift:
     head 13.9 / 12.5 / 11.3   body 12.0 / 10.8 / 9.8
     muted 8.1 / 7.3 / 6.6     dim 6.5 / 5.8 / 5.3
     white on fill 5.7, on fill-hover 7.2
   #ff0000 is 3.8:1 on the ground, so it never sets text: it draws lines and
   marks only (3:1 is enough for those). The status colours are marks too.
   ========================================================================== */

/* Google Fonts' latin Jost (SIL OFL 1.1), served from this app. */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("../../assets/fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback, so the swap to Jost does not move the layout. */
@font-face {
    font-family: "Jost Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
    size-adjust: 95.5%;
    ascent-override: 112%;
    descent-override: 40%;
    line-gap-override: 0%;
}

:root {
    color-scheme: dark;

    /* Grounds, darkest first */
    --ground: #242527;
    --raised: #2b2d31;
    --lift: #323437;
    --lift-hi: #37393d;

    /* Lines */
    --line: #48484e;
    --rule: #55565c;
    --line-hi: #606167;

    /* Text, brightest first */
    --head: #f7f3eb;
    --body: #e8e3d9;
    --muted: #c0bcb2;
    --dim: #ada8a0;

    /* Red: a signal, never an area */
    --red: #ff0000;
    --fill: #d10000;
    --fill-hover: #b30000;
    --on-fill: #ffffff;

    /* Status marks (dots and rules beside text that says it in words) */
    --ok: #86c195;
    --warn: #e0b45c;
    --bad: var(--red);

    /* Type: Jost carries 300 to 500 only, so nothing is set heavier */
    --sans: "Jost", "Jost Fallback", -apple-system, "Segoe UI", sans-serif;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 15px;
    --fs-lead: 16px;
    --fs-h2: 18px;
    --fs-h1: clamp(26px, 22px + 1vw, 32px);
    --fs-fig: clamp(26px, 22px + .8vw, 32px);
    --track-caps: .16em;

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

    /* Layout */
    --gutter: 20px;
    --menu-w: 240px;
    --content-max: 1080px;
    --measure: 62ch;
    --radius: 0;
    --control-h: 42px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
    :root { --gutter: 40px; }
}

@media (min-width: 1200px) {
    :root { --gutter: 56px; }
}