/* ==========================================================================
   00 — Design Tokens / CSS Custom Properties
   --------------------------------------------------------------------------
   Define all brand colors, fonts, radii, and transitions here.
   Reference these variables in NEW CSS going forward.
   Existing CSS still uses hardcoded values — migrate gradually.
   ========================================================================== */

:root {
    /* --- Brand Colors --- */
    --color-primary:      #453cd3;  /* Purple — primary brand */
    --color-pink:         #d45180;  /* Pink — secondary brand */
    --color-teal:         #5cd9d6;  /* Teal — accent / hover */
    --color-light-blue:   #00b4e0;  /* Light blue — accent */
    --color-navy:         #1f4494;  /* Navy — co-op, PPC pages */

    /* --- Neutral Colors --- */
    --color-white:        #ffffff;
    --color-black:        #000000;
    --color-gray-light:   #f4f4f4;
    --color-gray-mid:     #bcbcbc;
    --color-gray-dark:    #878787;
    --color-gray-border:  #ddd;

    /* --- Typography --- */
    --font-display:       rift, sans-serif;
    --font-body:          'sofia-pro', sans-serif;
    --font-proxima:       'proxima-nova', sans-serif;

    /* --- Border Radius --- */
    --radius-sm:          0.3rem;
    --radius-md:          0.8rem;
    --radius-lg:          3rem;

    /* --- Transitions --- */
    --transition-fast:    0.2s ease-in-out;
    --transition-base:    0.3s ease-in-out;
    --transition-slow:    0.6s all;
}