/**
 * CSS Custom Properties (Design Tokens)
 * Vallie Insurance Theme
 *
 * Color palette: Dark green (brand) + warm gold accent + navy support
 * Typography: Inter (body) + Merriweather (headings)
 *
 * Brand colors derived from the Vallie Insurance logo:
 * - Dark green (mountains, text) + Gold (crown/sunrise)
 */

:root {
    /* ─── Colors ─── */

    /* Primary — Dark Green (from logo: mountains & text) */
    --color-primary:         #1A5632;
    --color-primary-light:   #237542;
    --color-primary-dark:    #0E3B1F;

    /* Accent — Warm Gold CTAs (from logo: crown/sunrise) */
    --color-accent:          #D4851F;
    --color-accent-light:    #E89B3A;
    --color-accent-dark:     #B06E14;

    /* Secondary — Navy Blue (professional supporting color) */
    --color-secondary:       #1B3A5C;
    --color-secondary-light: #2A5580;
    --color-secondary-dark:  #0F2440;

    /* Neutrals */
    --color-white:           #FFFFFF;
    --color-gray-50:         #F8F9FA;
    --color-gray-100:        #F1F3F5;
    --color-gray-200:        #E9ECEF;
    --color-gray-300:        #DEE2E6;
    --color-gray-400:        #CED4DA;
    --color-gray-500:        #ADB5BD;
    --color-gray-600:        #6C757D;
    --color-gray-700:        #495057;
    --color-gray-800:        #343A40;
    --color-gray-900:        #212529;
    --color-black:           #111111;

    /* Semantic */
    --color-success:         #28A745;
    --color-warning:         #FFC107;
    --color-danger:          #DC3545;
    --color-info:            #17A2B8;

    /* Erie Insurance Blue (for carrier-specific elements) */
    --color-erie:            #003DA5;
    --color-progressive:     #0033A0;

    /* Star rating */
    --color-star:            #F5A623;

    /* ─── Typography ─── */
    --font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading:          'Merriweather', Georgia, 'Times New Roman', serif;

    /* Font Sizes (fluid with clamp) */
    --text-xs:               0.75rem;    /* 12px */
    --text-sm:               0.875rem;   /* 14px */
    --text-base:             1rem;       /* 16px */
    --text-md:               1.125rem;   /* 18px */
    --text-lg:               1.25rem;    /* 20px */
    --text-xl:               clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 20-24px */
    --text-2xl:              clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);     /* 24-30px */
    --text-3xl:              clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);     /* 30-40px */
    --text-4xl:              clamp(2.25rem, 1.8rem + 1.5vw, 3rem);        /* 36-48px */
    --text-5xl:              clamp(2.75rem, 2rem + 2vw, 3.75rem);         /* 44-60px */

    /* Font Weights */
    --weight-normal:         400;
    --weight-medium:         500;
    --weight-semibold:       600;
    --weight-bold:           700;
    --weight-black:          900;

    /* Line Heights */
    --leading-tight:         1.2;
    --leading-snug:          1.35;
    --leading-normal:        1.6;
    --leading-relaxed:       1.75;

    /* ─── Spacing ─── */
    --space-xs:              0.25rem;    /* 4px */
    --space-sm:              0.5rem;     /* 8px */
    --space-md:              1rem;       /* 16px */
    --space-lg:              1.5rem;     /* 24px */
    --space-xl:              2rem;       /* 32px */
    --space-2xl:             3rem;       /* 48px */
    --space-3xl:             4rem;       /* 64px */
    --space-4xl:             6rem;       /* 96px */

    /* Section spacing (responsive) */
    --section-padding:       clamp(3rem, 2rem + 4vw, 6rem);

    /* ─── Layout ─── */
    --container-max:         1200px;
    --container-narrow:      800px;
    --container-wide:        1400px;
    --container-padding:     clamp(1rem, 0.5rem + 2vw, 2rem);

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

    --border-color:          var(--color-gray-200);
    --border-width:          1px;

    /* ─── Shadows ─── */
    --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:             0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:             0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl:             0 20px 25px rgba(0, 0, 0, 0.1);

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

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