/* ============================================================================
   ADAPT Lesson Analyser: design tokens.
   The contract is docs/ui-style.md. Never hardcode a hex value in markup or JS;
   read it from here, or from the d1..d4 domain colours in tailwind.config.js.

   Loaded FIRST, before tailwind.css, so the custom properties exist by the time
   any utility or component rule uses them.
   ============================================================================ */

/* ------------------------------------------------------------------ the face

   Archivo, self-hosted. The workshop must not depend on a font CDN, which is
   the same reasoning that pinned and self-hosted the Supabase browser bundle:
   a participant on a network that filters fonts.gstatic.com would otherwise get
   a different page from the facilitator's laptop, in the layer with the least
   coverage and no monitoring.

   Version, provenance and licence are recorded in CLAUDE.md. Both paths are
   RELATIVE (this file is served from /adapt-analyser/css/, the font from
   /adapt-analyser/vendor/fonts/), because an absolute path resolves to the
   domain root and 404s in production.

   font-display: swap, so a font that has not arrived yet shows the fallback
   rather than invisible text. Two subsets in the shape Google Fonts ships them:
   `latin` carries the interface, and `latin-ext` exists because uploaded course
   material reaches the report and may carry accented characters the interface
   copy never does. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;   /* one variable file covers the whole axis */
    font-stretch: 100%;
    font-display: swap;
    src: url('../vendor/fonts/archivo-v25-latin-variable.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;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../vendor/fonts/archivo-v25-latin-ext-variable.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- the palette

   Warm greige ground, near-black ink, one hairline value. Contrast, measured
   against --ground: --ink about 15:1, --ink-muted about 3.4:1 (supporting copy
   only, never something a participant must read to act), --ink-faint
   decorative and never the sole carrier of meaning. */

:root {
    --ground: #EDEAEA;
    --ground-raised: #F4F2F2;
    --ink: #141414;
    --ink-muted: #8C8987;
    --ink-faint: #B4B0AF;
    --rule: #D6D2D2;
    --ink-inverse: #F4F2F2;

    /* The one departure from the monochrome reference. These four are a
       framework convention shared with the Self-Assessment Tool and the
       framework site, and they are what makes eighteen ratings scannable. They
       appear as a 2px marker beside a rating word and NOWHERE else. */
    --d1: #2563EB;
    --d2: #0891B2;
    --d3: #7C3AED;
    --d4: #D97706;

    /* Set per domain block; --rule is the fallback, which is also what a
       Not Observed rating gets, because an absence must not read as a result. */
    --marker: var(--rule);

    /* Four sizes, and no more. A fifth step is how the previous UI ended up
       with no hierarchy at all. Differentiate with weight, tracking and --ink
       against --ink-muted before reaching for another size.

       Label is not a fifth content size: it is 1.23 against Body and reads as a
       different category because of uppercase, weight and 0.12em tracking. */
    --size-display: clamp(2.75rem, 6vw, 4.5rem);
    --size-heading: 1.75rem;
    --size-subhead: 1.0625rem;
    --size-body: 0.8438rem;
    --size-label: 0.6875rem;

    /* Whitespace is the layout. */
    --gap-section: 4.5rem;
    --gap-section-tight: 2.5rem;
}