/* ═══════════════════════════════════════════════════════════════════════════
   LAWFUNDER DESIGN TOKENS - the one source of colour, type, spacing and radius for staff screens.
   File: Lawfunder.Admin/wwwroot/css/lawfunder-tokens.css
   LOOK-AND-FEEL-1 (Director, 24/10/2026): the approved design system, docs/design/Lawfunder_Design_System.md, and its tokens,
   docs/design/Lawfunder_tokens.json. Every colour below equals its token (ColourContrastTests); change the JSON first, then this.
   Light only (ruled 24/10/2026): a dark mode later is a second :root block, with no rework.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Colour */
    --lf-surface: #F5F7FA;
    --lf-surface-raised: #FFFFFF;
    --lf-line: #D9DFE7;
    --lf-line-strong: #8A96A6;
    --lf-ink: #17212E;
    --lf-ink-muted: #526070;
    --lf-navy: #1A365D;
    --lf-navy-soft: #E8EEF6;
    --lf-on-navy: #FFFFFF;
    --lf-menu-ink: #D6DFEB;
    --lf-menu-heading: #9FB0C6;
    --lf-gold: #FCB315;
    --lf-on-gold: #1A365D;
    --lf-outstanding: #B42318;
    --lf-outstanding-soft: #FDECEA;
    --lf-done: #1E7B3C;
    --lf-done-soft: #E6F4EA;
    --lf-waiting: #5B3A99;
    --lf-waiting-soft: #F1ECFA;
    --lf-on-waiting: #FFFFFF;
    --lf-later: #526070;
    --lf-later-soft: #EEF1F5;
    --lf-link: #1F5FA8;
    --lf-focus: #1F5FA8;

    /* Type: system sans for everything (no font download), mono for references people copy */
    --lf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --lf-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    /* Spacing */
    --lf-space-1: 4px;
    --lf-space-2: 8px;
    --lf-space-3: 12px;
    --lf-space-4: 16px;
    --lf-space-6: 24px;
    --lf-space-8: 32px;

    /* Radius */
    --lf-radius-sm: 4px;
    --lf-radius-md: 8px;
    --lf-radius-pill: 999px;
}

/* Type styles */
.lf-page-title    { font-size: 28px; line-height: 34px; font-weight: 600; color: var(--lf-ink); margin: 0; }
.lf-section-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--lf-ink); margin: 0; }
.lf-card-title    { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--lf-ink); margin: 0; }
.lf-text-body     { font-size: 15px; line-height: 22px; font-weight: 400; }
.lf-small         { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--lf-ink-muted); }
.lf-label         { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--lf-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.lf-figure        { font-size: 28px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-reference     { font-family: var(--lf-font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--lf-ink-muted); }