/* ============================================================
   DESIGN TOKENS
   Source of truth for colors, typography and z-index.
   Update here → propagates everywhere.
   ============================================================ */

:root {
    /* --- Brand Colors --- */
    --color-primary:            #ffd600;   /* yellow — CTAs, accents, highlights */
    --color-dark:               #3b444b;   /* dark slate — nav, footer, card text */
    --color-dark-alt:           #31393e;   /* footer-links band */
    --color-navy:               #0E3A53;   /* challenger category bg */
    --color-navy-dark:          #0E1D2A;   /* challenger name bg */
    --color-navy-deeper:        #0c3146;   /* selectize active option */
    --color-text-dark:          #1B2735;   /* popup headings, howto bg */
    --color-near-black:         #030303;   /* vote button text, profile h1 */
    --color-error:              #FF4D4D;   /* form validation, functional-red */
    --color-functional-green:   #67BF5E;   /* form success message */
    --color-tertiary-blue-dark: #3F777E;   /* visited links */
    --color-border-light:       #E8E7E7;   /* form field borders */
    --color-grey-grey18:        #24292D;   /* dark text, .btn-black bg */
    --color-grey-grey30:        #3C454D;   /* .btn-black hover bg */
    --color-grey-grey45:        #616B73;   /* .btn hover text, .btn-yellow disabled text */
    --color-grey-grey65:        #A0A4A6;   /* .btn-black disabled bg */
    --color-grey-grey85:        #D3D7D9;   /* .btn / .btn-yellow disabled bg */
    --color-gray-light:         #F2F2F2;   /* register form bg, .btn hover bg (grey95) */
    --color-gray-white:         #FFFFFF;   /* White */
    --color-tertiary-yellow-hover: #EEC800; /* .btn-yellow hover bg */
    --color-overlay:            rgba(14, 58, 83, 0.8);   /* card links overlay */
    --color-overlay-grey-50:    rgba(60, 69, 77, 0.5);   /* .btn-yellow focus border */
    --color-overlay-white-50:   rgba(255, 255, 255, 0.5); /* .btn-black focus border */

    /* --- Typography --- */
    --font-body:                    'HelveticaNeueLTStdLt', serif;
    --font-sans:                    'Gotham', serif;
    --font-sans-condensed:          'Gotham Condensed', serif;
    --font-display-black:           'Cactus Black', serif;
    --font-display-black-italic:    'Cactus Black Italic', serif;
    --font-display-bold-italic:     'Cactus Bold Italic', serif;
    --font-display-bold:            'Cactus Bold', serif;
    --font-display-medium-italic:   'Cactus Medium Italic', serif;
    --font-display-medium:          'Cactus Medium', serif;
    --font-display-light-italic:    'Cactus Light Italic', serif;

    /* --- Z-index --- */
    --z-header: 100;
    --z-smoke:  1020;
    --z-popup:  1030;

    /* --- Border Radius --- */
    --radius-btn:   0.5em;
    --radius-popup: 3.125em;
    --radius-card:  3em;
}