/* ============================================================
   VARIABLES GLOBALES DE MARCA — NO TE JALES
   Importar en todos los CSS: @import url('/css/variables.css');
   ============================================================ */
:root {
  color-scheme: light;

  /* ── Colores principales ── */
  --blue:        #0088ff;
  --blue-dark:   #0060cc;
  --blue-deep:   #022c67;
  --white:       #f9f9f9;
  --bg:          #f0f5ff;
  --text:        #1a1e2e;
  --text-muted:  #5a6275;
  --border:      #d0daea;
  --card-bg:     #ffffff;
  --green-wa:    #00bb12;

  /* ── Forma y sombras ── */
  --radius:       16px;
  --shadow:       0 4px 24px rgba(0, 136, 255, 0.10);
  --shadow-hover: 0 8px 32px rgba(0, 136, 255, 0.18);

  /* ── Tipografía ── */
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-display: 'ADLaM Display', system-ui;

  /* ── Transición global ── */
  --transition: 0.25s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:         #0b1220;
    --card-bg:    #0f172a;
    --text:       #e5e7eb;
    --text-muted: #94a3b8;
    --border:     rgba(148, 163, 184, 0.22);
    --shadow:       0 6px 28px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.48);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f0f5ff;
  --text:        #1a1e2e;
  --text-muted:  #5a6275;
  --border:      #d0daea;
  --card-bg:     #ffffff;
  --shadow:       0 4px 24px rgba(0, 136, 255, 0.10);
  --shadow-hover: 0 8px 32px rgba(0, 136, 255, 0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #0b1220;
  --card-bg:    #0f172a;
  --text:       #e5e7eb;
  --text-muted: #94a3b8;
  --border:     rgba(148, 163, 184, 0.22);
  --shadow:       0 6px 28px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.48);
}