/*
 * _variables.css
 * CSS Custom Properties (Design Tokens)
 * Strict palette: navy, red, white, black, grays.
 * Adjust these to rebrand easily.
 * Included on all pages.
 */

:root {
    /* Primary brand colors */
    --color-navy:          #031C48;
    --color-navy-dark:     #081D50;
    --color-navy-light:    #16327A;
    --color-brand-red:        #DC143C;
    --color-brand-red-bright:  #FF2244;
    --color-brand-red-dark:    #B91130;
    /* Legacy aliases — kept for backward compatibility */
    --color-red:           var(--color-brand-red);
    --color-red-hover:     var(--color-brand-red-dark);
    --color-white:         #FFFFFF;
    --color-black:         #000000;

    /* Neutral palette */
    --color-gray-50:       #F9FAFB;
    --color-gray-100:      #F3F4F6;
    --color-gray-200:      #E5E7EB;
    --color-gray-300:      #D1D5DB;
    --color-gray-400:      #9CA3AF;
    --color-gray-500:      #6B7280;
    --color-gray-600:      #4B5563;
    --color-gray-700:      #374151;
    --color-gray-800:      #1F2937;
    --color-gray-900:      #111827;

    /* Text colors (semantic aliases) */
    --text-white:          var(--color-white);
    --text-light:          var(--color-gray-200);
    --text-muted:          var(--color-gray-300);
    --text-gray:           var(--color-gray-500);
    --text-dark:           var(--color-gray-700);
    --text-black:          var(--color-gray-900);

    /* Background colors */
    --bg-white:            var(--color-white);
    --bg-light:            var(--color-gray-50);
    --bg-dark:             var(--color-navy);

    /* Layout */
    --max-width-xl:        1280px;
    --max-width-lg:        1152px;
    --max-width-md:        1024px;
    --max-width-sm:        896px;

    /* Spacing */
    --section-padding-y:   6rem;
    --section-padding-x:   1.5rem;

    /* Border radius — sm › md › lg › xl progression */
    --radius-sm:           0.25rem;   /* 4px  */
    --radius-md:           0.5rem;    /* 8px  */
    --radius-lg:           1rem;      /* 16px */
    --radius-xl:           1.5rem;    /* 24px */

    /* Transitions */
    --transition-fast:     150ms ease;
    --transition-normal:   300ms ease;

    /* Grid gutter */
    --grid-gutter:         1rem;
}