/* ============================================================
   WFCSI Design System — CSS Variables (Design Tokens)
   ============================================================ */

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

:root {
    /* ── Brand Colors ─────────────────────────────────────── */
    --color-primary:        #E8610A;
    --color-primary-light:  #FF7A2E;
    --color-primary-dark:   #C24D06;
    --color-primary-glass:  rgba(232, 97, 10, 0.12);
    --color-primary-glow:   rgba(232, 97, 10, 0.35);

    --color-navy:           #1B2A4A;
    --color-navy-light:     #243560;
    --color-navy-dark:      #0F1A30;
    --color-navy-glass:     rgba(27, 42, 74, 0.85);

    --color-accent-gold:    #F5A623;
    --color-accent-teal:    #06D6A0;
    --color-accent-purple:  #8338EC;
    --color-accent-red:     #D62828;

    /* ── Neutral Palette ──────────────────────────────────── */
    --color-white:          #FFFFFF;
    --color-off-white:      #F8F9FC;
    --color-grey-50:        #F4F5F7;
    --color-grey-100:       #E9EAED;
    --color-grey-200:       #D1D3DA;
    --color-grey-300:       #B4B7C0;
    --color-grey-400:       #9497A2;
    --color-grey-500:       #737682;
    --color-grey-600:       #565963;
    --color-grey-700:       #3C3F49;
    --color-grey-800:       #25282F;
    --color-grey-900:       #13151A;

    /* ── Text Colors ──────────────────────────────────────── */
    --text-primary:         #1B2A4A;
    --text-secondary:       #4A5568;
    --text-muted:           #9497A2;
    --text-light:           #FFFFFF;
    --text-on-primary:      #FFFFFF;

    /* ── Background Colors ────────────────────────────────── */
    --bg-body:              #F8F9FC;
    --bg-white:             #FFFFFF;
    --bg-dark:              #0F1A30;
    --bg-navy:              #1B2A4A;
    --bg-card:              #FFFFFF;
    --bg-section-alt:       #F0F4FF;
    --bg-alt:               #F4F5F7;

    /* ── Typography ───────────────────────────────────────── */
    --font-heading:         'Outfit', system-ui, sans-serif;
    --font-body:            'Inter', system-ui, sans-serif;

    --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 */
    --text-6xl:   3.75rem;    /* 60px */
    --text-7xl:   4.5rem;     /* 72px */

    --font-light:    300;
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;
    --font-extrabold:800;
    --font-black:    900;

    --leading-tight:  1.2;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;
    --leading-loose:  2;

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

    /* ── Border Radius ────────────────────────────────────── */
    --radius-sm:   0.375rem;   /* 6px  */
    --radius-md:   0.5rem;     /* 8px */
    --radius-lg:   0.5rem;     /* 8px */
    --radius-xl:   0.5rem;     /* 8px */
    --radius-2xl:  0.5rem;     /* 8px */
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:    0 10px 40px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
    --shadow-xl:    0 20px 60px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-2xl:   0 40px 100px rgba(0,0,0,0.14);
    --shadow-primary: 0 8px 32px rgba(232, 97, 10, 0.30);
    --shadow-navy:    0 8px 32px rgba(27, 42, 74, 0.25);
    --shadow-glow:    0 0 40px rgba(232, 97, 10, 0.20);
    --shadow-focus:   0 0 0 3px rgba(232, 97, 10, 0.16);

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ────────────────────────────────────── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-modal:      400;
    --z-toast:      500;
    --z-overlay:    300;

    /* ── Layout ───────────────────────────────────────────── */
    --container-max: 1280px;
    --container-pad: clamp(1rem, 5vw, 2rem);
    --navbar-height: 80px;
    --page-section-space: clamp(2rem, 3vw, 2.5rem);
    --page-section-space-sm: clamp(1.5rem, 2vw, 2rem);

    /* ── Glassmorphism ────────────────────────────────────── */
    --glass-bg:     rgba(255, 255, 255, 0.10);
    --glass-border: rgba(255, 255, 255, 0.20);
    --glass-blur:   blur(20px);

    /* ── Gradients ────────────────────────────────────────── */
    --gradient-primary:  linear-gradient(135deg, #E8610A 0%, #F5A623 100%);
    --gradient-navy:     linear-gradient(135deg, #1B2A4A 0%, #243560 50%, #2E457B 100%);
    --gradient-dark:     linear-gradient(180deg, #1B2A4A 0%, #243560 100%);
    --gradient-hero:     linear-gradient(135deg, #162444 0%, #1B2A4A 60%, #253966 100%);
    --gradient-light-banner: linear-gradient(135deg, #f8fafc 0%, #fff7ed 50%, #f1f5f9 100%);
    --gradient-overlay:  linear-gradient(180deg, rgba(27,42,74,0) 0%, rgba(27,42,74,0.85) 100%);
    --gradient-card:     linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(248,249,252,1) 100%);
}