/**
 * F1 Manager – Premium Formula 1–inspired design system
 * Deep Grid dark mode · Carbon fiber · Glassmorphism · Neon glow
 */

/* ========== FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ========== DESIGN TOKENS ========== */
:root {
    /* Deep Grid – Carbon & Titanium */
    --f1-carbon: #0D0D0D;
    --f1-carbon-light: #141414;
    --f1-carbon-card: #161616;
    --f1-carbon-hover: #1A1A1A;
    --f1-titanium: #C0C0C0;
    --f1-titanium-muted: #A8A8A8;
    --f1-silver: #707070;
    
    /* Accent – Ferrari Red (high-octane) */
    --f1-accent: #DC0000;
    --f1-accent-hover: #FF1A1A;
    --f1-accent-dim: rgba(220, 0, 0, 0.5);
    
    /* Neon glow */
    --f1-glow-accent: 0 0 20px rgba(220, 0, 0, 0.4), 0 0 40px rgba(220, 0, 0, 0.2);
    --f1-glow-accent-strong: 0 0 24px rgba(220, 0, 0, 0.5), 0 0 48px rgba(220, 0, 0, 0.25);
    --f1-border-glow: 0 0 12px rgba(220, 0, 0, 0.3);
    
    /* Glass */
    --f1-glass-bg: rgba(20, 20, 20, 0.65);
    --f1-glass-border: rgba(255, 255, 255, 0.06);
    --f1-glass-border-hover: rgba(220, 0, 0, 0.25);
    
    /* Aerodynamic radii */
    --f1-radius-tight: 4px;
    --f1-radius-card: 8px;
    --f1-radius-modal: 12px;
    
    /* Typography */
    --f1-font-display: 'Orbitron', sans-serif;
    --f1-font-mono: 'JetBrains Mono', monospace;
    
    /* Transitions (60fps-friendly: transform + opacity) */
    --f1-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --f1-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --f1-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== CARBON FIBER PATTERN ========== */
.f1-carbon-bg {
    position: relative;
}
.f1-carbon-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.015) 2px,
            rgba(255, 255, 255, 0.015) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%);
    background-size: 4px 4px, 4px 4px, 8px 8px, 8px 8px;
    pointer-events: none;
    z-index: 0;
}
.f1-carbon-bg > * {
    position: relative;
    z-index: 1;
}

/* Body-level carbon (subtle) */
body.f1-theme::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
        repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* ========== TYPOGRAPHY ========== */
.f1-display,
.f1-display h1, .f1-display h2, .f1-display h3, .f1-display h4,
.page-hero-title, .dashboard-card-title, .page-card-info h3, .page-card-info h4,
.nav-title, .home-title, .home-card-title {
    font-family: var(--f1-font-display) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Speed feel: italic on main headings */
.page-hero-title, .home-title, .dashboard-hero .page-hero-title {
    font-style: italic;
}
.f1-display .page-hero-tagline,
.page-hero-tagline, .home-tagline {
    font-family: var(--f1-font-display) !important;
    font-weight: 600;
    letter-spacing: 0.2em;
}

/* Telemetry / data – monospace */
.f1-mono,
.budget-amount, .budget-display, .points-display,
.wear-pct, .component-level, .header-speed-display,
.stat-value, .track-view-stat-value,
#race-time, #race-progress, #race-time-remaining, #gap-to-leader,
.position-badge {
    font-family: var(--f1-font-mono) !important;
    font-variant-numeric: tabular-nums;
}
.stats-list .stat-item span:last-child,
.component-wear-row .wear-pct {
    font-family: var(--f1-font-mono) !important;
}