/* ==========================================================================
   Trecker Treck — Design Tokens & CSS Variables
   Airbnb-inspired design system with orange gradient accents
   Polished light + dark modes with visible borders and clear component boundaries
   ========================================================================== */

/* ===== DARK THEME (default) ===== */
:root {
    /* --- Backgrounds --- */
    --trecker-bg-primary: #121212;
    --trecker-bg-secondary: #1A1A1A;
    --trecker-bg-tertiary: #222222;
    --trecker-bg-card: #1A1A1A;
    --trecker-bg-card-hover: #222222;
    --trecker-bg-frosted: rgba(18, 18, 18, 0.88);
    --trecker-bg-overlay: rgba(0, 0, 0, 0.6);
    --trecker-bg-input: #1E1E1E;
    --trecker-bg-input-focus: #252525;

    /* --- Text --- */
    --trecker-text-primary: #f0f0f0;
    --trecker-text-secondary: #a0a0a0;
    --trecker-text-tertiary: #7a7a7a;
    --trecker-text-inverse: #121212;
    --trecker-text-link: #ff8a3d;
    --trecker-text-link-hover: #ffa366;

    /* --- Accent (orange gradient) --- */
    --trecker-accent: #ff8a3d;
    --trecker-accent-hover: #ff6b2d;
    --trecker-accent-dark: #ff4c1e;
    --trecker-accent-light: rgba(255, 138, 61, 0.12);
    --trecker-accent-secondary: #ffa366;
    --trecker-accent-secondary-light: rgba(255, 163, 102, 0.12);
    --trecker-accent-gradient: linear-gradient(135deg, #ff8a3d, #ff4c1e);

    /* --- Status colors --- */
    --trecker-success: #34C759;
    --trecker-success-bg: rgba(52, 199, 89, 0.15);
    --trecker-warning: #FF9500;
    --trecker-warning-bg: rgba(255, 149, 0, 0.15);
    --trecker-error: #FF453A;
    --trecker-error-bg: rgba(255, 69, 58, 0.15);
    --trecker-info: #2997FF;
    --trecker-info-bg: rgba(41, 151, 255, 0.15);

    /* --- Tractor pulling specific --- */
    --trecker-fullpull: #FFD60A;
    --trecker-fullpull-bg: rgba(255, 214, 10, 0.18);
    --trecker-fullpull-glow: 0 0 24px rgba(255, 214, 10, 0.45);
    --trecker-dq: #FF453A;
    --trecker-dnf: #8e8e93;

    /* --- Borders (more visible: 0.15 base opacity) --- */
    --trecker-border: rgba(255, 255, 255, 0.15);
    --trecker-border-light: rgba(255, 255, 255, 0.10);
    --trecker-border-medium: rgba(255, 255, 255, 0.20);
    --trecker-border-focus: #ff8a3d;

    /* --- Hover / interactive surfaces --- */
    --trecker-bg-hover-subtle: rgba(255, 255, 255, 0.06);
    --trecker-bg-stripe: rgba(255, 255, 255, 0.03);

    /* --- Border radius (Airbnb-style standardized) --- */
    --trecker-border-radius-sm: 8px;
    --trecker-border-radius-md: 8px;
    --trecker-border-radius-lg: 12px;
    --trecker-border-radius-xl: 12px;
    --trecker-border-radius-full: 24px;

    /* --- Shadows (Airbnb-style multi-layer subtle shadows) --- */
    --trecker-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --trecker-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.12);
    --trecker-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16);
    --trecker-shadow-xl: 0 4px 6px rgba(0, 0, 0, 0.12), 0 12px 40px rgba(0, 0, 0, 0.2);
    --trecker-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    --trecker-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    --trecker-shadow-glow: 0 0 0 4px rgba(255, 138, 61, 0.2);
    --trecker-shadow-glow-accent: 0 0 20px rgba(255, 138, 61, 0.3);

    /* --- Typography --- */
    --trecker-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --trecker-font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --trecker-font-size-xs: 0.6875rem;
    --trecker-font-size-sm: 0.8125rem;
    --trecker-font-size-base: 1rem;
    --trecker-font-size-md: 1.0625rem;
    --trecker-font-size-lg: 1.25rem;
    --trecker-font-size-xl: 1.5rem;
    --trecker-font-size-2xl: 2rem;
    --trecker-font-size-3xl: 2.5rem;
    --trecker-font-size-hero: clamp(2.5rem, 5vw, 4rem);

    --trecker-font-weight-regular: 400;
    --trecker-font-weight-medium: 500;
    --trecker-font-weight-semibold: 600;
    --trecker-font-weight-bold: 700;

    --trecker-line-height-tight: 1.15;
    --trecker-line-height-normal: 1.5;
    --trecker-line-height-relaxed: 1.6;

    --trecker-letter-spacing-tight: -0.02em;
    --trecker-letter-spacing-normal: 0;
    --trecker-letter-spacing-wide: 0.04em;

    /* --- Spacing --- */
    --trecker-space-xs: 4px;
    --trecker-space-sm: 8px;
    --trecker-space-md: 16px;
    --trecker-space-lg: 24px;
    --trecker-space-xl: 32px;
    --trecker-space-2xl: 48px;
    --trecker-space-3xl: 64px;
    --trecker-space-4xl: 96px;

    /* --- Transitions --- */
    --trecker-transition-fast: 150ms ease;
    --trecker-transition-normal: 250ms ease;
    --trecker-transition-slow: 400ms ease;
    --trecker-transition-spring: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* --- Z-index --- */
    --trecker-z-dropdown: 100;
    --trecker-z-sticky: 200;
    --trecker-z-modal-backdrop: 300;
    --trecker-z-modal: 400;
    --trecker-z-toast: 500;
    --trecker-z-tooltip: 600;

    /* --- Rank & overlay --- */
    --trecker-rank-gold: #ffc107;
    --trecker-rank-silver: #b0bec5;
    --trecker-rank-bronze: #cd7f32;
    --trecker-record-color: #ffc107;
    --trecker-overlay-dark: rgba(0, 0, 0, 0.72);
    --trecker-overlay-medium: rgba(0, 0, 0, 0.55);
    --trecker-spinner-track: var(--trecker-border);
    --trecker-spinner-head: #ffffff;

    /* --- New: Section backgrounds --- */
    --trecker-bg-section: rgba(255, 255, 255, 0.03);
    --trecker-bg-section-hover: rgba(255, 255, 255, 0.05);

    /* --- New: Button base shadow (resting state lift) --- */
    --trecker-shadow-btn: 0 1px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
    --trecker-shadow-btn-hover: 0 4px 12px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.15);

    /* --- Softer large radius --- */
    --trecker-border-radius-xl: 18px;
    --trecker-border-radius-2xl: 24px;

    /* --- Card open feel --- */
    --trecker-card-padding: 28px;

    /* --- Layout --- */
    --trecker-max-width: 1200px;
    --trecker-sidebar-width: 260px;
    --trecker-header-height: 72px;
    --trecker-nav-blur: 10px;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    /* --- Backgrounds (warm whites) --- */
    --trecker-bg-primary: #FAFAFA;
    --trecker-bg-secondary: #F3F3F3;
    --trecker-bg-tertiary: #EBEBEB;
    --trecker-bg-card: #FFFFFF;
    --trecker-bg-card-hover: #F7F7F7;
    --trecker-bg-frosted: rgba(250, 250, 250, 0.95);
    --trecker-bg-overlay: rgba(0, 0, 0, 0.4);
    --trecker-bg-input: #FFFFFF;
    --trecker-bg-input-focus: #FFFFFF;

    /* --- Text --- */
    --trecker-text-primary: #222222;
    --trecker-text-secondary: #555555;
    --trecker-text-tertiary: #888888;
    --trecker-text-inverse: #f0f0f0;
    --trecker-text-link: #ff6b2d;
    --trecker-text-link-hover: #ff8a3d;

    /* --- Accent (orange gradient) --- */
    --trecker-accent: #ff6b2d;
    --trecker-accent-hover: #ff4c1e;
    --trecker-accent-dark: #e55a1f;
    --trecker-accent-light: rgba(255, 107, 45, 0.08);
    --trecker-accent-secondary: #ff8a3d;
    --trecker-accent-secondary-light: rgba(255, 138, 61, 0.08);
    --trecker-accent-gradient: linear-gradient(135deg, #ff6b2d, #e55a1f);

    /* --- Status colors --- */
    --trecker-success: #27ae60;
    --trecker-success-bg: rgba(39, 174, 96, 0.12);
    --trecker-warning: #e67e22;
    --trecker-warning-bg: rgba(230, 126, 34, 0.12);
    --trecker-error: #c0392b;
    --trecker-error-bg: rgba(192, 57, 43, 0.12);
    --trecker-info: #2980b9;
    --trecker-info-bg: rgba(41, 128, 185, 0.12);

    /* --- Tractor pulling specific --- */
    --trecker-fullpull: #f39c12;
    --trecker-fullpull-bg: rgba(243, 156, 18, 0.15);
    --trecker-fullpull-glow: 0 0 24px rgba(243, 156, 18, 0.35);
    --trecker-dq: #c0392b;
    --trecker-dnf: #bdc3c7;

    /* --- Borders (stronger: 0.18 base opacity) --- */
    --trecker-border: rgba(0, 0, 0, 0.18);
    --trecker-border-light: rgba(0, 0, 0, 0.10);
    --trecker-border-medium: rgba(0, 0, 0, 0.22);
    --trecker-border-focus: #ff6b2d;

    /* --- Hover / interactive surfaces --- */
    --trecker-bg-hover-subtle: rgba(0, 0, 0, 0.04);
    --trecker-bg-stripe: rgba(0, 0, 0, 0.025);

    /* --- Shadows (Airbnb-style multi-layer subtle) --- */
    --trecker-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --trecker-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    --trecker-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
    --trecker-shadow-xl: 0 4px 6px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.12);
    --trecker-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    --trecker-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    --trecker-shadow-glow: 0 0 0 4px rgba(255, 107, 45, 0.15);
    --trecker-shadow-glow-accent: 0 0 20px rgba(255, 107, 45, 0.2);

    /* --- New: Button base shadow (light theme) --- */
    --trecker-shadow-btn: 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --trecker-shadow-btn-hover: 0 4px 12px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08);

    /* --- New: Section backgrounds (light theme) --- */
    --trecker-bg-section: rgba(0, 0, 0, 0.025);
    --trecker-bg-section-hover: rgba(0, 0, 0, 0.04);

    /* --- Rank & overlay --- */
    --trecker-rank-gold: #f59e0b;
    --trecker-rank-silver: #9ca3af;
    --trecker-rank-bronze: #b45309;
    --trecker-record-color: #f59e0b;
    --trecker-overlay-dark: rgba(0, 0, 0, 0.6);
    --trecker-overlay-medium: rgba(0, 0, 0, 0.4);
    --trecker-spinner-track: var(--trecker-border);
    --trecker-spinner-head: var(--trecker-accent);
}