/* ==========================================================================
   Design Tokens
   Loaded first — every other stylesheet references these variables.
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette - Scientific Blue (Classic Research) */
    --primary-color: #1E3A5F;
    /* Royal Blue 600 */
    --primary-dark: #162C48;
    /* Royal Blue 700 */
    --secondary-color: #2C5282;
    /* Blue 500 */
    --accent-color: #D69E2E;
    /* Amber 500 */
    --hero-accent: #D69E2E;
    /* Hero headline gradient start — matches accent-color */

    --text-primary: #1A202C;
    /* Blue 900 */
    --text-secondary: #4A5568;
    --text-tertiary: #2C5282;

    --bg-body: #F8FAFC;
    /* Blue 50 */
    --bg-surface: #FFFFFF;

    --border-color: #E2E8F0;

    /* --- Status colours -------------------------------------------------- */
    /* One base colour per status — bg & border derived via color-mix().    */
    --status-pending: #64748B;   /* Slate 500: Neutral, soft */
    --status-started: #2C5282;   /* Matches --secondary-color */
    --status-success: #0F766E;   /* Teal 700: Professional clinical green */
    --status-failure: #9F1239;   /* Rose 800: Deep, serious muted red */
    --status-revoked: #94A3B8;   /* Slate 400: Faded, receding */
    --status-timeout: #9A3412;   /* Orange 800: Deep rust/burnt orange */

    /* --- Spacing --------------------------------------------------------- */
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;

    /* --- Border Radius --------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;

    /* --- Shadows (Elevation System) -------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}