/* ==========================================================================
   01 - DESIGN TOKENS (v2 - Corrected Brand Colours)
   Extracted from mhasibusacco.com live site source code.
   Copper/caramel is the PRIMARY accent. Gold is secondary (tagline only).
   ========================================================================== */

:root {
    /* ---- Navy / Indigo Palette ---- */
    --mhs-navy:          #3D3D8F;
    --mhs-navy-dark:     #2A2A6E;
    --mhs-navy-deep:     #1A1A50;
    --mhs-navy-light:    #5A5AAA;

    /* ---- Copper / Caramel (Primary Accent) ---- */
    --mhs-copper:        #B5451B;
    --mhs-copper-dark:   #8F3212;
    --mhs-copper-light:  #D4602E;
    --mhs-copper-btn:    #A74C24;

    /* ---- Gold (Secondary - tagline, subtle accents) ---- */
    --mhs-gold:          #D4A843;
    --mhs-gold-hover:    #C49535;

    /* ---- Warm Backgrounds ---- */
    --mhs-peach:         #FDF0EB;

    /* ---- Neutrals ---- */
    --mhs-white:         #FFFFFF;
    --mhs-light-gray:    #F7F8FA;
    --mhs-border:        #E8E8E8;
    --mhs-text:          #333333;
    --mhs-text-muted:    #666666;
    --mhs-text-on-dark:  rgba(255, 255, 255, 0.85);
    --mhs-success:       #228B22;
    --mhs-warning:       #E67E00;
    --mhs-error:         #CC0000;

    /* ---- Typography ---- */
    --mhs-font-display:  'Montserrat', sans-serif;
    --mhs-font-body:     'Inter', sans-serif;

    /* ---- Font Sizes (desktop) ---- */
    --mhs-size-h1:       52px;
    --mhs-size-h2:       32px;
    --mhs-size-h3:       24px;
    --mhs-size-h4:       20px;
    --mhs-size-body:     16px;
    --mhs-size-small:    14px;
    --mhs-size-caption:  13px;
    --mhs-size-eyebrow:  12px;

    /* ---- Font Weights ---- */
    --mhs-weight-bold:     700;
    --mhs-weight-semibold: 600;
    --mhs-weight-medium:   500;
    --mhs-weight-regular:  400;

    /* ---- Spacing Scale ---- */
    --mhs-space-xs:   8px;
    --mhs-space-sm:   16px;
    --mhs-space-md:   24px;
    --mhs-space-lg:   40px;
    --mhs-space-xl:   60px;
    --mhs-space-2xl:  80px;

    /* ---- Layout ---- */
    --mhs-container:   1200px;
    --mhs-radius:      4px;
    --mhs-radius-card: 8px;

    /* ---- Shadows ---- */
    --mhs-shadow-card:    0 2px 12px rgba(0, 0, 0, 0.06);
    --mhs-shadow-hover:   0 8px 24px rgba(0, 0, 0, 0.10);
    --mhs-shadow-header:  0 2px 8px rgba(0, 0, 0, 0.15);

    /* ---- Transitions ---- */
    --mhs-transition:     0.2s ease;
}