/* ==========================================================================
   MCTWING - BASE.CSS (Variables Globales, Reset & Tipografía Motorsport)
   ========================================================================== */

/* 1. Importación de Fuente Tipográfica Tecnológica / Deporte */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

/* 2. Variables del Sistema (Paleta de Colores Inspirada en Francia & Motorsport) */
:root {
    /* Colores Principales */
    --bg-primary: #0B0B0B;        /* Negro Asfalto / Fondo Base */
    --bg-surface: #141414;        /* Negro Elevado para Tarjetas/Paneles */
    --bg-surface-hover: #1E1E1E;  /* Estado Hover para Elementos */
    
    /* Acentos de Marca (Francia + Carreras) */
    --accent-blue: #0055A5;       /* Azul Eléctrico Racing */
    --accent-blue-glow: rgba(0, 85, 165, 0.4);
    --accent-red: #EF4135;        /* Rojo Intenso / Alerta / RPM Danger */
    --accent-red-glow: rgba(239, 65, 53, 0.4);
    
    /* Colores de Texto */
    --text-primary: #FFFFFF;      /* Blanco Puro */
    --text-secondary: #A0A0A0;    /* Gris Claro para Lecturas Secundarias */
    --text-muted: #666666;        /* Gris Oscuro para Textos de Apoyo */
    
    /* Indicadores Digitales (Verde LCD / Amber) */
    --digital-green: #00FF66;     /* Pantallas LCD Activas */
    --digital-amber: #FFB300;     /* Advertencia de nivel */

    /* Tipografías */
    --font-heading: 'Orbitron', sans-serif;  /* Titulares y Números Digitales */
    --font-body: 'Rajdhani', sans-serif;     /* Textos y Lectura General */

    /* Bordes y Sombras */
    --border-color: #262626;
    --border-highlight: #333333;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.25s ease-in-out;
}

/* 3. Reset Global de Estilos */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 4. Estilos de Enlaces y Listas */
a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul, ol {
    list-style: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 5. Clases Útiles Globales */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.text-center { text-align: center; }
.text-highlight { color: var(--accent-blue); }
.text-danger { color: var(--accent-red); }
.hidden { display: none !important; }