/*
 * Design tokens for the public site.
 *
 * Loaded AFTER style.css deliberately. style.css and default.css each declare
 * their own :root block, and the three disagreed — default.css said the primary
 * colour was green (#2e7d32), style.css said purple (#82529d), and the site
 * actually paints itself teal (#124b65) from hardcoded hex scattered through
 * both files. This file is the last word, and it says what the site really is.
 *
 * Nothing here restyles anything on its own. It defines the vocabulary; the
 * rules that consume it live in responsive.css and in the page stylesheets.
 */

:root {
    /* ---- Palette: the colours actually in use, named ---- */
    --ud-primary: #124b65;
    --ud-primary-dark: #002547;
    --ud-primary-soft: #f6f8f9;
    --ud-accent: #339ad3;
    --ud-success: #2e7d32;
    --ud-warning: #a86400;
    --ud-danger: #b3261e;

    /*
     * Accent family. Every one of these passes WCAG AA both as text on white
     * and as a button fill carrying white text — measured, not guessed:
     * teal 9.46, indigo 10.18, red 6.54, green 6.46, amber 5.93, sky 5.51.
     * #006c4d is the green every union portal on the national platform uses,
     * so it reads as "government" to a citizen before they read a word.
     */
    --ud-green: #006c4d;
    --ud-indigo: #283a8a;
    --ud-red: #b3261e;
    --ud-amber: #8a5a00;
    --ud-sky: #0b6ea8;

    /*
     * Section tints. The page used to alternate #ffffff with #f5f7f8, a
     * difference no eye registers, so every section read as one flat sheet.
     * These are far enough apart to separate sections and light enough to cost
     * nothing: body text sits at 12.8–13.9 on all of them, the teal at 8.3–9.0.
     */
    --ud-tint-blue: #f2faff;
    --ud-tint-green: #eef7f2;
    --ud-tint-steel: #e8f1f7;
    --ud-tint-red: #fdf1f0;
    --ud-tint-grey: #f2f4f7;

    --ud-ink: #1f2a30;
    --ud-ink-muted: #5c6b73;
    --ud-line: #e0e6e9;
    --ud-surface: #ffffff;
    --ud-bg: #f5f7f8;

    /* Legacy names, corrected so anything still reading them gets the real
       colour instead of the green or the purple. */
    --primary-color: #124b65;
    --secondary-color: #339ad3;
    --text-dark: #1f2a30;
    --card-shadow: 0 4px 12px rgba(18, 75, 101, .10);

    /*
     * ---- Type scale ----
     * Fluid between a 360px phone and a 1200px desktop, so nothing has to be
     * re-declared per breakpoint. Replaces the 73 hardcoded font-sizes in
     * style.css as those get migrated.
     */
    --ud-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --ud-text-sm: clamp(0.8125rem, 0.78rem + 0.17vw, 0.875rem);
    --ud-text-base: clamp(0.9375rem, 0.91rem + 0.19vw, 1rem);
    --ud-text-lg: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
    --ud-text-xl: clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem);
    --ud-text-2xl: clamp(1.375rem, 1.21rem + 0.76vw, 1.875rem);
    --ud-text-3xl: clamp(1.5rem, 1.18rem + 1.42vw, 2.375rem);

    --ud-leading-tight: 1.35;
    --ud-leading: 1.65;

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

    /* ---- Shape ---- */
    --ud-radius-sm: 4px;
    --ud-radius: 6px;
    --ud-radius-lg: 10px;
    --ud-shadow-sm: 0 1px 3px rgba(18, 75, 101, .08);
    --ud-shadow: 0 6px 18px rgba(18, 75, 101, .12);

    /*
     * Minimum comfortable tap target. A union site is read on a cheap phone
     * held in one hand; 44px is the smallest square a thumb hits reliably.
     */
    --ud-tap: 44px;

    /* Gutter kept off the screen edge at every width. */
    --ud-gutter: 16px;
}