/* === public/assets/css/variables.css === */

:root {
  /* =========================================
     1. TIPOGRAFÍA (Para asegurar consistencia)
     ========================================= */
  --font-Family-1: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-Family-2: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* =========================================
     2. PALETA DE MARCA (Modo Claro - Original)
     ========================================= */
  --brand-blue:   #59c0b3;  /* Fountain Blue */
  --brand-grey:   #6d6e71;  /* Nevada */
  --brand-orange: #e7482e;  /* Cinnabar */
  
  /* Variantes generadas */
  --brand-orange-hover: #cf3d25; 
  --brand-blue-dark:    #48a095; 

  /* =========================================
     3. COLORES GENERALES (Fondo & Texto)
     ========================================= */
  --bg-body: #ffffff;
  --bg-section: #f8f9fa; /* Gris muy tenue para diferenciar secciones */
  --bg-card: #ffffff;
  --bg-input: #f4f6f8;
  --bt-outline: #000000;

  /* Textos */
  --text-main: #4a4b4d;      /* Gris oscuro para lectura */
  --text-secondary: #6d6e71; /* Tu gris corporativo */
  --text-light: #a0a0a0;
  --text-inverse: #ffffff;

  --border-color: #e0e0e0;

  /* =========================================
     4. SOMBRAS Y EFECTOS
     ========================================= */
  --shadow-light: 0 4px 20px rgba(89, 192, 179, 0.15);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  
  /* El brillo neón está apagado en modo claro */
  --neon-glow: none; 

  /* =========================================
     5. COLORES SEMÁNTICOS
     ========================================= */
  --primary: var(--brand-blue);
  --accent:  var(--brand-orange);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);

  /* =========================================
     6. COMPONENTES ESPECÍFICOS
     ========================================= */
  
  /* --- BOTONES --- */
  --btn-bg: var(--brand-orange);
  --btn-text: #ffffff;
  --btn-bg-hover: var(--brand-orange-hover);
  --btn-shadow: 0 4px 15px rgba(231, 72, 46, 0.35);
  /* --- FORMS --- */
  --form-border: #000000;
  --form-margin: #FFFFFF;
  --form-accent: var(--brand-orange);
  --form-shadow: 8px 8px 0px var(--form-border);

  /* --- HEADER --- */
  --header-bg: rgba(255, 255, 255, 0.95);
  --header-text: var(--brand-grey);
  --header-shadow: rgba(0, 0, 0, 0.05);
  --nav-hover-underline: var(--brand-orange);
  --logo-hover-opacity: 0.8;

  /* --- MOBILE MENU --- */
  --mobile-menu-bg: #ffffff;

  /* --- FOOTER --- */
  --footer-bg: #f8f9fa;
  --footer-text: var(--brand-grey);

  /* --- CARDS --- */
  --radius: 16px;
}

/* =========================================================
   MODO OSCURO
   ========================================================= */
[data-theme="dark"] {
  
  /* 1. COLORES NEÓN INTENSOS */
  --brand-blue:   #00f2ea;  /* Cyan Eléctrico (Más brillante que el original) */
  --brand-orange: #ff5e00;  /* Naranja Neón Intenso */
  --brand-grey:   #e0e0e0;  /* Blanco grisáceo para textos */
  
  --brand-blue-dark: #00b8b0;

  /* 2. FONDOS PROFUNDOS (Negros reales) */
  --bg-body: #050505;    /* Negro casi puro */
  --bg-section: #0f0f0f; /* Negro suave */
  --bg-card: #141414;    /* Gris muy oscuro */
  --bg-input: #1f1f1f;
  --bt-outline: #ffff;
  /* Textos */
  --text-main: #ffffff;
  --text-secondary: #b0b0b0;
  --text-inverse: #000000;

  --border-color: #333;

  /* 3. EFECTOS DE LUZ (GLOW) */
  /* Sombra azulada brillante alrededor de las tarjetas */
  --shadow-card: 0 0 25px rgba(0, 242, 234, 0.08);
  --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.5);
  
  /* Variable especial para bordes brillantes */
  --neon-glow: 0 0 10px rgba(0, 242, 234, 0.3);

  /* 4. ACTUALIZACIÓN SEMÁNTICA */
  --primary: var(--brand-blue);
  
  /* Gradiente más eléctrico */
  --gradient-primary: linear-gradient(135deg, #00f2ea 0%, #00948e 100%);

  /* 5. COMPONENTES */
  
  /* Botones que brillan */
  --btn-bg: var(--brand-orange);
  --btn-text: #ffffff;
  --btn-shadow: 0 0 15px rgba(255, 94, 0, 0.6); 
   /* --- FORMS --- */
  --form-border: #ffffff;
  --form-margin: #141414;
  --form-accent: var(--brand-orange);
  --form-shadow: 8px 8px 0px var(--form-border);
  /* Header Cristal Oscuro */
  --header-bg: rgba(10, 10, 10, 0.90);
  --header-text: #ffffff;
  --header-shadow: rgba(0, 0, 0, 0.8);
  --nav-hover-underline: var(--brand-blue); /* Subrayado azul neón en dark */

  --mobile-menu-bg: #141414;

  /* Footer Oscuro */
  --footer-bg: #0f0f0f;
  --footer-text: #cccccc;
}