/* ─── MITHRAM Design System - CSS Custom Properties ─────────────── */

:root {
    /* ─── Brand Colors ─────────────────────────────────────────── */
    --deep-blue:      #0A1628;
    --navy:           #0F2847;
    --royal-blue:     #1A3A6B;
    --accent-blue:    #2E86DE;
    --light-blue:     #5DADE2;
    --orange:         #E67E22;
    --bright-orange:  #F39C12;
    --gold:           #F1C40F;
    --green:          #27AE60;
    --teal:           #1ABC9C;
    --purple:         #8E44AD;
    --red:            #E74C3C;

    /* ─── Neutral Colors ───────────────────────────────────────── */
    --white:          #FFFFFF;
    --off-white:      #F8F9FA;
    --light-gray:     #ECF0F1;
    --mid-gray:       #BDC3C7;
    --dark-gray:      #7F8C8D;
    --charcoal:       #2C3E50;
    --near-black:     #1A1A2E;

    /* ─── Typography ───────────────────────────────────────────── */
    --font-heading:   'Montserrat', sans-serif;
    --font-body:      'Lato', sans-serif;

    --fs-hero:        clamp(2.5rem, 5vw, 4rem);
    --fs-h1:          clamp(2rem, 4vw, 3rem);
    --fs-h2:          clamp(1.5rem, 3vw, 2.25rem);
    --fs-h3:          clamp(1.25rem, 2.5vw, 1.75rem);
    --fs-h4:          1.25rem;
    --fs-body:        1rem;
    --fs-small:       0.875rem;
    --fs-xs:          0.75rem;

    --fw-regular:     400;
    --fw-bold:        700;

    --lh-tight:       1.2;
    --lh-normal:      1.6;
    --lh-loose:       1.8;

    /* ─── Spacing ──────────────────────────────────────────────── */
    --space-xs:       0.25rem;
    --space-sm:       0.5rem;
    --space-md:       1rem;
    --space-lg:       1.5rem;
    --space-xl:       2rem;
    --space-2xl:      3rem;
    --space-3xl:      4rem;
    --space-4xl:      6rem;

    /* ─── Layout ───────────────────────────────────────────────── */
    --container-max:  1200px;
    --container-padding: var(--space-lg);

    /* ─── Borders & Radius ─────────────────────────────────────── */
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      16px;
    --radius-full:    50%;

    /* ─── Shadows ──────────────────────────────────────────────── */
    --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:      0 16px 50px rgba(0, 0, 0, 0.15);

    /* ─── Transitions ──────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;
}