/* ========================================
   GUDIÑO DEV — Design System Variables
   Industrial Professional Dark Theme
   ======================================== */

:root {
  /* === COLORES DE MARCA === */
  --color-orange:        #E8732A;   /* Naranja principal — CTAs, acentos, hover */
  --color-orange-dark:   #C95F20;   /* Naranja oscuro — hover states, gradiente */
  --color-orange-dim:    rgba(232, 115, 42, 0.15); /* Naranja sutil — fondos de tags */
  --color-orange-border: rgba(232, 115, 42, 0.40); /* Naranja borde — tags, cards */

  /* === FONDOS === */
  --bg-primary:    #1A1A1A;   /* Fondo principal del sitio */
  --bg-secondary:  #232323;   /* Fondo de secciones alternas */
  --bg-card:       #2D2D2D;   /* Fondo de tarjetas, modales */
  --bg-elevated:   #333333;   /* Elementos elevados, hover de cards */

  /* === TEXTOS === */
  --text-primary:   #F5F0EB;  /* Texto principal — blanco cálido */
  --text-secondary: #C5BDB5;  /* Texto secundario — párrafos */
  --text-muted:     #8A8A8A;  /* Texto terciario — fechas, etiquetas */

  /* === BORDES === */
  --border-color:   #3D3D3D;  /* Borde estándar */
  --border-active:  #E8732A;  /* Borde activo/hover */

  /* === SOMBRAS === */
  --shadow:        0 10px 25px rgba(0, 0, 0, 0.50);
  --shadow-heavy:  0 20px 50px rgba(0, 0, 0, 0.70);
  --shadow-orange: 0 15px 30px rgba(232, 115, 42, 0.30);

  /* === GRADIENTES === */
  --gradient-brand: linear-gradient(135deg, #E8732A, #C95F20);
  --gradient-dark:  linear-gradient(180deg, #1A1A1A, #232323);

  /* === TRANSICIÓN GLOBAL === */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* === TIPOGRAFÍA === */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* === ESPACIADO === */
  --section-padding: 6rem 0;
  --container-max:   1200px;
  --container-padding: 2rem;

  /* === BREAKPOINTS === */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-large:   1200px;
}