/* ==============================================
   DESIGN TOKENS
   Edit this file to change the entire site's
   colors, fonts, spacing, and look & feel.
   ============================================== */

:root {
    /* ── Brand Colors ─────────────────────────── */
    --primary:        #1B3A6B;   /* Deep Navy */
    --primary-dark:   #0F2247;   /* Darker Navy (hero bg) */
    --primary-light:  #2A5298;   /* Lighter Navy (hover) */
    --accent:         #C49A2A;   /* Academic Gold */
    --accent-light:   #D4A843;   /* Brighter Gold (hover) */
    --accent-subtle:  #FBF5E6;   /* Pale gold tint (badges) */

    /* ── Backgrounds ──────────────────────────── */
    --bg-page:        #F8F7F4;   /* Warm off-white page */
    --bg-card:        #FFFFFF;   /* White cards */
    --bg-section-alt: #EEF2FA;   /* Soft blue-tint alternating sections */
    --bg-hero:        #0F2247;   /* Deep navy hero */
    --bg-footer:      #0A1628;   /* Near-black navy footer */

    /* ── Text ─────────────────────────────────── */
    --text-primary:   #1A1E2E;   /* Near-black (blue undertone) */
    --text-secondary: #5A6380;   /* Muted slate for metadata */
    --text-inverse:   #FFFFFF;   /* White on dark backgrounds */
    --text-accent:    #C49A2A;   /* Gold for stats / highlights */
    --text-muted:     #8A93AE;   /* Light muted for captions */

    /* ── Borders ──────────────────────────────── */
    --border:         #D9DFF0;   /* Subtle blue-tinted border */
    --border-strong:  #B8C4E0;   /* Stronger border, active states */

    /* ── Shadows (navy-tinted) ────────────────── */
    --shadow-sm:    0 1px 3px rgba(27, 58, 107, 0.08);
    --shadow-md:    0 4px 12px rgba(27, 58, 107, 0.12);
    --shadow-lg:    0 8px 24px rgba(27, 58, 107, 0.16);
    --shadow-hover: 0 12px 32px rgba(27, 58, 107, 0.22);

    /* ── Spacing (8px base scale) ─────────────── */
    --sp-1:  0.25rem;   /*  4px */
    --sp-2:  0.5rem;    /*  8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */
    --sp-20: 5rem;      /* 80px */
    --sp-24: 6rem;      /* 96px */

    /* ── Typography ───────────────────────────── */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* ── Type Scale ───────────────────────────── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */

    /* ── Radius ───────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Transitions ──────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Layout ───────────────────────────────── */
    --max-width:  1200px;
    --nav-height: 72px;
}

/* ── Dark Mode ────────────────────────────────── */
[data-theme="dark"] {
    --primary:        #5B8DD9;
    --primary-dark:   #3D6BB5;
    --primary-light:  #7AAAE8;
    --accent:         #D4A843;
    --accent-light:   #E0BC6A;
    --accent-subtle:  #2A2010;

    --bg-page:        #0D1B2E;
    --bg-card:        #142240;
    --bg-section-alt: #0F1E35;
    --bg-hero:        #070F1D;
    --bg-footer:      #040D18;

    --text-primary:   #E8EDF5;
    --text-secondary: #8FA3C0;
    --text-inverse:   #0D1B2E;
    --text-accent:    #D4A843;
    --text-muted:     #6A82A0;

    --border:         #1E3355;
    --border-strong:  #2A4470;

    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
}