:root {
    /* ── Brand Colors — derived from the Yagas logo ─────────
       Ink navy   = wordmark color
       Azure      = mid-point of the Y gradient
       Sky        = bright end of the Y gradient
       Gradient   = the logo's Y stroke, used sparingly       */
    --color-primary:        #0E5FE8;   /* Azure — links, buttons, focus   */
    --color-primary-dark:   #0A46B8;   /* Azure hover                     */
    --color-primary-light:  #EAF2FF;   /* Azure tint backgrounds          */
    --color-dark:           #0A1235;   /* Ink navy — headings, dark bg    */
    --color-dark-2:         #131F55;   /* Lighter navy for layering       */
    --color-accent:         #19A7FF;   /* Sky — highlights, hovers        */
    --color-accent-dark:    #0B8BE0;   /* Sky hover                       */
    --color-accent-light:   #E6F6FF;   /* Sky tint backgrounds            */

    --gradient-brand: linear-gradient(120deg, #1732A8 0%, #0E5FE8 55%, #1E88F7 100%);

    /* ── Neutral ───────────────────────────────────────────── */
    --color-bg:             #F7FAFE;   /* Page background (cool white)   */
    --color-bg-white:       #FFFFFF;
    --color-bg-dark:        #0A1235;   /* Dark section bg                */
    --color-text:           #1B2540;   /* Body text                      */
    --color-text-muted:     #5B6478;   /* Secondary text                 */
    --color-border:         #E3E9F4;   /* Borders & dividers             */
    --color-border-dark:    #1D2A63;   /* Borders on dark sections       */

    /* ── Typography ────────────────────────────────────────── */
    --font-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

    /* ── Spacing ───────────────────────────────────────────── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    --section-pad-y:  5rem;

    /* ── Layout ────────────────────────────────────────────── */
    --container-max:  1280px;
    --container-pad:  1.5rem;

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

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(10,18,53,.06), 0 1px 2px rgba(10,18,53,.04);
    --shadow-md:    0 4px 16px rgba(10,18,53,.08), 0 2px 4px rgba(10,18,53,.04);
    --shadow-lg:    0 8px 32px rgba(10,18,53,.10), 0 4px 8px rgba(10,18,53,.04);
    --shadow-xl:    0 20px 60px rgba(10,18,53,.12), 0 8px 16px rgba(10,18,53,.06);
    --shadow-blue:  0 8px 32px rgba(14,95,232,.28);
    --shadow-gold:  0 8px 24px rgba(25,167,255,.28); /* legacy name — now sky glow */

    /* ── Transitions ───────────────────────────────────────── */
    --transition:       .25s ease;
    --transition-slow:  .4s ease;

    /* ── Z-index ───────────────────────────────────────────── */
    --z-base:     1;
    --z-header:   100;
    --z-dropdown: 200;
    --z-modal:    300;
    --z-overlay:  400;
}