/* ═══════════════════════════════════════════════
   vars.css — Design tokens ATS Consulting S.A.S
   ═══════════════════════════════════════════════ */

/* Transición global para cambio de tema */
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
}

:root {
  /* Paleta */
  --bg:         #050a12;
  --bg2:        #080f1a;
  --bg3:        #0c1628;
  --bg4:        #0f1e36;
  --surface:    #0d1a2e;
  --surface2:   #112038;

  /* Bordes */
  --border:     rgba(0, 200, 255, 0.12);
  --border2:    rgba(0, 200, 255, 0.22);

  /* Acentos */
  --cyan:       #00c8ff;
  --cyan2:      #00e5cc;
  --cyan-glow:  rgba(0, 200, 255, 0.18);
  --cyan-glow2: rgba(0, 200, 255, 0.06);
  --blue:       #0057ff;
  --blue2:      #004ee0;

  /* Texto */
  --text:       #e8f4ff;
  --text2:      #8ab0d0;
  --text3:      #4a6a88;

  /* Tipografía */
  --font-head:  'Rajdhani', sans-serif;
  --font-body:  'Nunito Sans', sans-serif;

  /* Espaciado / Layout */
  --nav-h:      72px;
  --max-w:      1200px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* Sombras */
  --shadow-cyan: 0 0 30px rgba(0, 200, 255, 0.15);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ═══ TEMA CLARO ═══════════════════════════════ */
[data-theme="light"] {
  /* Fondos con contraste real entre capas */
  --bg:         #f5f7fa;   /* fondo base: gris muy suave */
  --bg2:        #edf0f5;   /* secciones alternas: tono ligeramente más oscuro */
  --bg3:        #e2e8f0;   /* fondo de elementos internos */
  --bg4:        #d5dde8;
  --surface:    #ffffff;   /* cards: blanco puro con borde visible */
  --surface2:   #f0f4f9;   /* hover de cards */

  /* Bordes más visibles en modo claro */
  --border:     rgba(30, 90, 150, 0.15);
  --border2:    rgba(0, 100, 180, 0.35);

  /* Acento azul más oscuro y saturado para legibilidad */
  --cyan:       #0066bb;
  --cyan2:      #0088aa;
  --cyan-glow:  rgba(0, 102, 187, 0.12);
  --cyan-glow2: rgba(0, 102, 187, 0.07);
  --blue:       #0057ff;
  --blue2:      #004ee0;

  /* Texto con contraste alto */
  --text:       #0d1f38;   /* casi negro azulado */
  --text2:      #344e6e;   /* texto secundario legible */
  --text3:      #6080a0;   /* texto terciario / placeholder */

  --shadow-cyan: 0 0 30px rgba(0, 102, 187, 0.15);
  --shadow-card: 0 4px 20px rgba(0, 40, 100, 0.10);
}

/* ═══ AJUSTES MODO CLARO — Contraste de secciones ══ */
[data-theme="light"] .navbar.scrolled {
  background: rgba(245, 247, 250, 0.96);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,40,100,0.08);
}
[data-theme="light"] .service-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .valor-card,
[data-theme="light"] .mv-card,
[data-theme="light"] .tech-item,
[data-theme="light"] .sub-service-card {
  background: #ffffff;
  border-color: rgba(30, 90, 150, 0.18);
  box-shadow: 0 2px 12px rgba(0, 40, 100, 0.07);
}
[data-theme="light"] .service-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .tech-item:hover {
  background: #f5f9ff;
  border-color: var(--cyan);
  box-shadow: 0 6px 24px rgba(0, 102, 187, 0.12);
}
[data-theme="light"] .section-label {
  color: var(--cyan);
}
[data-theme="light"] .hero-scan {
  background: linear-gradient(to right, transparent, rgba(0, 102, 187, 0.3), transparent);
}
[data-theme="light"] .page-hero {
  background: linear-gradient(135deg, #0d1f38 0%, #1a3a6a 100%);
}
[data-theme="light"] .page-hero .page-hero-label,
[data-theme="light"] .page-hero h1,
[data-theme="light"] .page-hero p {
  color: #e8f4ff !important;
}
[data-theme="light"] .cta-banner {
  background: linear-gradient(135deg, #0d1f38, #1a3a6a);
  border-color: rgba(0, 200, 255, 0.2);
}
[data-theme="light"] .cta-banner h3,
[data-theme="light"] .cta-banner p {
  color: #e8f4ff !important;
}
[data-theme="light"] .nav-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--border2);
}
[data-theme="light"] .nav-mobile {
  background: rgba(245, 247, 250, 0.98);
}
[data-theme="light"] .footer {
  background: #0d1f38;
  color: #e8f4ff;
}
[data-theme="light"] .footer .footer-copy,
[data-theme="light"] .footer .footer-links a,
[data-theme="light"] .footer .footer-legal a,
[data-theme="light"] .footer .footer-contact-text,
[data-theme="light"] .footer .footer-tagline,
[data-theme="light"] .footer .footer-col-title {
  color: #a0b8d0 !important;
}
[data-theme="light"] .footer .footer-col-title { color: #e8f4ff !important; }
[data-theme="light"] .divider-cyan {
  background: rgba(0, 200, 255, 0.2);
}
[data-theme="light"] #searchPanel {
  background: #ffffff;
  border-bottom-color: var(--border2);
  box-shadow: 0 8px 32px rgba(0,40,100,0.12);
}
[data-theme="light"] .blog-card-tag { background: rgba(0, 102, 187, 0.1); }
[data-theme="light"] .about-teaser-visual .about-logo-display {
  background: var(--bg3);
  border-color: var(--border2);
}