/* Design tokens — see docs/superpowers/specs/2026-04-30-ui-redesign-design.md §3 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2-variations');
}

:root {
    /* Palette */
    --color-navy: #1C293A;
    --color-action: #1E6FD9;
    --color-tint: #E0F0FF;
    --color-ink: #0F172A;
    --color-muted: #475569;
    --color-subtle: #94A3B8;
    --color-border: #E5E7EB;
    --color-surface: #F8FAFC;
    --color-white: #FFFFFF;

    /* Semantic (extracted from SI-Expertise pictogram) */
    --color-success: #4AAC35;
    --color-info: #33BDEF;
    --color-warning: #F59E0B;
    --color-error: #E52621;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 14px -4px rgba(15, 23, 42, .12);
    --shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, .4);

    /* Typography */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
}

html, body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    background: var(--color-surface);
}

/* Tabular numerals on monetary/date-heavy elements (opt-in via class) */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}