/* ===========================================
   Race Page Design Tokens
   CSS custom properties aligned with 2026 design system.
   CustomStyle authors can override any variable per-race, e.g.:
     --race-primary: #ff0000;
   =========================================== */

:root {
    /* Primary — Racery teal */
    --race-primary: #49bcb7;
    --race-primary-hover: #5acdc8;
    --race-primary-border: #38aba6;
    --race-primary-15: rgba(73, 188, 183, 0.15);

    /* Accent — Racery teal */
    --race-accent: #49bcb7;
    --race-accent-hover: #5acdc8;
    --race-accent-20: rgba(73, 188, 183, 0.15);

    /* Header / footer — brand slate */
    --race-header-bg: #4b525b;
    --race-header-hover: #3a414a;

    /* Panel surfaces — light gray container + translucent content */
    --race-panel-bg: #e9eaee;
    --race-panel-content-bg: rgba(255,255,255,.95);
    --race-panel-border: #dfe0e2;
    --race-panel-shadow: none;

    /* Text */
    --race-text: #1a2029;
    --race-text-muted: #9ea7b3;

    /* Links */
    --race-link: #477486;
    --race-link-hover: #7ea5b5;

    /* Segment / tab selected */
    --race-segment-selected: #6eafba;

    /* Bling offer buy button */
    --race-bling-button: #2C91A7;

    /* Activity feed type colors */
    --race-activity-header: #319eb3;
    --race-activity-donation: #027414;
    --race-activity-volunteer: #530052;
    --race-activity-chat: #7f8a99;
    --race-mileage-accent: #1a2029;

    /* Form inputs */
    --race-input-border: #aaa;
    --race-input-text: #444;
    --race-input-bg: #ffffff;
    --race-input-hover-bg: #e8e8e8;
    --race-input-disabled-bg: #f8f8f8;
    --race-input-disabled-text: #888;
    --race-disabled-bg: #bdbdbd;
    --race-disabled-border: #b3b3b3;

    /* Feedback / functional */
    --race-error-bg: #f2dede;
    --race-error-text: #a94442;
    --race-error-border: rgba(169, 68, 66, 0.39);
    --race-success-bg: #eef7f4;
    --race-info-bg: rgba(181, 188, 73, .15);

    /* Text on colored backgrounds */
    --race-on-primary: #ffffff;

    /* Achievement icon colors */
    --race-achievement-silver: #c0c0c0;
    --race-achievement-bronze: #cd7f32;
    --race-achievement-gold: #ffd700;
    --race-achievement-streak-max: #ae50dd;
    --race-achievement-streak: #ee82ef;
    --race-achievement-overtake: #f15252;
    --race-achievement-like: #e55353;
    --race-achievement-return: #83b64e;

    /* Typography — PT Sans: original Racery body font */
    --race-font: 'PT Sans', sans-serif;
    --race-font-display: 'PT Sans', sans-serif;

    /* Type scale — rem-based for accessibility (respects user font-size prefs) */
    --race-text-xs: 0.75rem;
    --race-text-sm: 0.875rem;
    --race-text-base: 1rem;
    --race-text-lg: 1.125rem;
    --race-text-xl: 1.25rem;
    --race-text-2xl: 1.5rem;
    --race-text-3xl: 1.875rem;

    /* Line heights — generous for reading comfort */
    --race-leading-tight: 1.25;
    --race-leading-normal: 1.5;
    --race-leading-relaxed: 1.625;

    /* Content spacing */
    --race-space-xs: 0.25rem;
    --race-space-sm: 0.5rem;
    --race-space-md: 0.75rem;
    --race-space-lg: 1rem;
    --race-space-xl: 1.5rem;

    /* Focus — visible ring for keyboard navigation */
    --race-focus-ring: #49bcb7;
    --race-focus-ring-offset: 2px;
    --race-focus-ring-width: 2px;

    /* Transitions */
    --race-transition-fast: 0.15s;
    --race-transition-slow: 0.6s;

    /* Radii */
    --race-radius-sm: 0;
    --race-radius-md: 0.5em;
    --race-radius-lg: 0;
    --race-radius-pill: 1.5em;

    /* Shadows — neutral, understated */
    --race-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --race-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.06), 0 1px 3px -1px rgba(0, 0, 0, 0.04);
    --race-shadow-lg: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.03);
}

/* CSS spinner — replaces ajax-loader GIFs */
@keyframes race-spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--race-panel-border);
    border-top-color: var(--race-primary);
    border-radius: 50%;
    animation: race-spin 0.6s linear infinite;
}

.loading-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loading-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* ===========================================
   Accessibility: Reduced Motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --race-transition-fast: 0.01ms;
        --race-transition-slow: 0.01ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .loading-spinner {
        animation: none;
        border-top-color: var(--race-primary);
        opacity: 0.7;
    }
}

/* ===========================================
   Accessibility: High Contrast
   =========================================== */
@media (prefers-contrast: more) {
    :root {
        --race-text-muted: #4a4850;
        --race-panel-border: #a0a3a8;
        --race-shadow-sm: none;
        --race-shadow: 0 0 0 1px var(--race-panel-border);
        --race-shadow-lg: 0 0 0 2px var(--race-panel-border);
        --race-primary-15: rgba(73, 188, 183, 0.22);
    }
}

/* ===========================================
   Dark Mode Foundation — DISABLED for now
   (forms need dark-mode styling work first)
   Uncomment to re-enable.
   =========================================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --race-header-bg: #1a1d22;
        --race-header-hover: #131518;
        --race-panel-bg: #1e2128;
        --race-panel-content-bg: #252830;
        --race-panel-border: #383c44;
        --race-text: #dfe0e4;
        --race-text-muted: #9593a1;
        --race-link: #3daec6;
        --race-link-hover: #4fc0d6;
        --race-primary: #37afc6;
        --race-primary-hover: #42bdd4;
        --race-primary-border: #2e9bb0;
        --race-primary-15: rgba(55, 175, 198, 0.18);
        --race-accent: #3daec6;
        --race-segment-selected: #37afc6;
        --race-input-border: #383c44;
        --race-input-text: #d5d6da;
        --race-input-bg: #252830;
        --race-input-hover-bg: #2e3240;
        --race-input-disabled-bg: #1a1d22;
        --race-input-disabled-text: #6a6d78;
        --race-disabled-bg: #383c44;
        --race-disabled-border: #383c44;
        --race-error-bg: #2d1a19;
        --race-error-text: #d47a75;
        --race-error-border: #6b3a38;
        --race-success-bg: #1a2920;
        --race-info-bg: rgba(160, 168, 80, 0.1);
        --race-focus-ring: #37afc6;
        --race-shadow-sm: 0 1px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
        --race-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
        --race-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    }
}
*/