/* ==========================================================================
   ESAC — Escuela de Acústica de Car Audio
   variables.css — Tipografía Local @font-face y Tokens de Diseño
   ========================================================================== */

/* --------------------------------------------------------------------------
   DECLARACIONES @font-face — ROBOTO CONDENSED (18 VARIANTES LOCALES)
   -------------------------------------------------------------------------- */

/* Thin (100) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-ThinItalic.ttf') format('truetype');
}

/* ExtraLight (200) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-ExtraLightItalic.ttf') format('truetype');
}

/* Light (300) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-LightItalic.ttf') format('truetype');
}

/* Regular (400) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Italic.ttf') format('truetype');
}

/* Medium (500) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-MediumItalic.ttf') format('truetype');
}

/* SemiBold (600) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-SemiBoldItalic.ttf') format('truetype');
}

/* Bold (700) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-BoldItalic.ttf') format('truetype');
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-ExtraBoldItalic.ttf') format('truetype');
}

/* Black (900) */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/roboto_condensed/RobotoCondensed-BlackItalic.ttf') format('truetype');
}

/* --------------------------------------------------------------------------
   TOKENS DE DISEÑO VISUAL OFICIALES
   -------------------------------------------------------------------------- */
:root {
  /* Paleta Base Oscura */
  --color-bg-base: #030304;
  --color-bg-overlay: rgba(3, 3, 4, 0.88);
  --color-bg-card: rgba(14, 14, 18, 0.92);
  --color-bg-card-hover: rgba(22, 22, 30, 0.95);
  --color-bg-button: #111116;

  /* Colores de Acento Rojo (Car Audio Neon) */
  --color-accent-red: #d90429;
  --color-accent-red-bright: #ef233c;
  --color-accent-red-light: #ff334b;
  --color-accent-red-dark: #8d0801;
  --color-accent-red-glow: rgba(239, 35, 60, 0.55);
  --color-accent-red-subtle: rgba(217, 4, 41, 0.15);
  --color-accent-red-border: rgba(239, 35, 60, 0.65);

  /* Escala de Textos y Contraste */
  --color-text-primary: #ffffff;
  --color-text-silver: #e2e2ec;
  --color-text-secondary: #c0c0d0;
  --color-text-muted: #88889a;
  --color-text-dim: #5c5c6e;

  /* Bordes */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-medium: rgba(239, 35, 60, 0.35);

  /* Tipografía */
  --font-family-base: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Jerarquía de Pesos y Estilos */
  --font-title-weight: 900;
  --font-title-style: italic;
  --font-subtitle-weight: 700;
  --font-subtitle-style: italic;
  --font-tagline-weight: 800;
  --font-tagline-style: italic;
  --font-body-weight: 400;
  --font-body-style: normal;
  --font-body-medium-weight: 500;
  --font-button-weight: 700;
  --font-button-style: normal;
  --font-nav-weight: 700;
  --font-nav-style: italic;

  /* Glows y Sombras Lumínicas */
  --glow-neon-red-sm: 0 0 10px var(--color-accent-red-glow);
  --glow-neon-red-md: 0 0 20px var(--color-accent-red-glow), 0 0 35px rgba(217, 4, 41, 0.35);
  --glow-neon-red-lg: 0 0 30px var(--color-accent-red-glow), 0 0 60px rgba(217, 4, 41, 0.45);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.85);

  /* Transiciones */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dimensionamiento */
  --container-max-width: 1440px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 50px;
}