/* Design tokens: the single source of truth for brand colors, surfaces, radii, shadows and motion.
   Load immediately after Bootstrap so every other stylesheet can reference these variables. */

:root {
    /* Brand */
    --color-brand: #1B405F;
    --color-brand-rgb: 27, 64, 95;
    --color-brand-hover: #15344d;
    --color-brand-active: #102a3e;
    --color-accent: #619CE7;
    --color-accent-rgb: 97, 156, 231;
    --color-accent-hover: #4a87d4;
    --color-coral: #FB594A;
    --color-yellow: #F7C63C;

    /* Text */
    --color-text: #212529;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    --color-text-subtle: #adb5bd;
    --color-icon-muted: #90a4b8;
    --color-link: #2f6db5;

    /* Surfaces and borders */
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-solid: rgba(255, 255, 255, 0.97);
    --color-surface-muted: rgba(244, 247, 251, 0.95);
    --color-surface-alt: rgba(248, 250, 252, 0.92);
    --color-border-subtle: rgba(var(--color-brand-rgb), 0.08);
    --color-border: rgba(var(--color-brand-rgb), 0.12);
    --color-border-strong: rgba(var(--color-brand-rgb), 0.2);
    --surface-blur: blur(8px);

    /* Shape */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(18, 28, 45, 0.04), 0 2px 8px rgba(18, 28, 45, 0.08);
    --shadow-md: 0 8px 24px rgba(18, 28, 45, 0.15);
    --shadow-lg: 0 8px 32px rgba(18, 28, 45, 0.15), 0 2px 8px rgba(18, 28, 45, 0.08);
    --shadow-lg-hover: 0 12px 40px rgba(18, 28, 45, 0.2), 0 4px 12px rgba(18, 28, 45, 0.1);
    --shadow-button-hover: 0 4px 12px rgba(var(--color-brand-rgb), 0.3);

    /* Focus */
    --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
    --focus-outline: 2px solid var(--color-brand);

    /* Sizing and motion */
    --touch-target: 2.75rem;
    --press-scale: 0.96;
    --duration-fast: 0.15s;
    --duration: 0.2s;

    /* Bootstrap bridge */
    --bs-primary: var(--color-brand);
    --bs-primary-rgb: var(--color-brand-rgb);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-brand);
}