/*
 * Design tokens — the single source of truth for colour, radius and spacing.
 * Loaded globally by _Layout, so every page can reference these.
 *
 * One primary blue is used across every surface: marketing, product and legal.
 */
:root {
    /* Brand */
    --color-brand-navy: #1e2a38;   /* theme-color, legal footer */
    --color-brand-slate: #2c3e50;  /* resource guides, headings */

    /* Primary action */
    --color-primary: #1976d2;           /* report form / product surfaces */
    --color-primary-accent: #21a1ff;    /* lighter gradient partner */
    --color-primary-dark: #1565c0;      /* darker gradient partner */
    --color-primary-rgb: 25, 118, 210;  /* channels for rgba() shadows/tints */

    /* Semantic */
    --color-success: #27ae60;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #0dcaf0;

    /* Surfaces & text */
    --color-surface: #f8f9fa;
    --color-surface-alt: #e3e8ee;
    --color-border: #dee2e6;
    --color-text: #2c2c2c;
    --color-text-muted: #6c757d;
    --color-text-subtle: #4a5568;
    --color-on-primary: #fff;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 5px;
    --radius-lg: 0.5rem;

    /* Focus ring — used by the skip link and interactive controls */
    --focus-ring: #ffbf47;
}

/*
 * Icon utilities. Bootstrap Icons ships glyphs only, with no sizing or spin helpers
 * (Font Awesome's fa-2x / fa-3x / fa-spin), so the equivalents live here.
 * The global prefers-reduced-motion rule in the layout neutralises the spin for users
 * who ask for reduced motion.
 */
.icon-2x { font-size: 2em; }
.icon-3x { font-size: 3em; }

.icon-spin {
    display: inline-block;
    animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}