/**
 * GATEGUARD UI KIT - VARIABLES DE SISTEMA Y THEMING
 * Light Mode: Derivado de propuesta_6C_bitonal_glass.html (Bitonal Glass)
 * Dark Mode: Derivado de propuesta_6B_multicam_hud.html (Multicam HUD)
 * Identidad Oficial: Manual GateGuard B.05 & B.07 (#212e58, #4bbfef)
 */

:root {
  /* ========================================================
     BRAND TOKENS BASE (GATEGUARD B.05)
     ======================================================== */
  --gg-navy-primary: #212e58;
  --gg-navy-dark:    #151f3e;
  --gg-navy-deep:    #0d152a;
  --gg-blue-steel:   #294e79;
  --gg-steel-mid:    #6294b8;
  --gg-cyan-primary: #4bbfef;
  --gg-cyan-glow:    rgba(75, 191, 239, 0.45);
  --gg-cyan-light:   #a2caec;
  --gg-cyan-subtle:  rgba(75, 191, 239, 0.12);
  --gg-fog:          #dae0e4;

  /* Estados Funcionales Semafóricos */
  --color-success:   #10e793;
  --color-success-bg: rgba(16, 231, 147, 0.12);
  --color-warning:   #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger:    #ff385c;
  --color-danger-bg: rgba(255, 56, 92, 0.12);
  --color-info:      #38bdf8;
  --color-info-bg:   rgba(56, 189, 248, 0.12);

  /* Tipografías Oficiales */
  --font-display:    'Space Grotesk', -apple-system, sans-serif;
  --font-body:       'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Dimensiones y Radios */
  --sidebar-w:       260px;
  --navbar-h:        68px;
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       18px;
  --radius-pill:     9999px;

  /* Curvas de Transición */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================
   LIGHT THEME: "BITONAL GLASS" (propuesta_6C_bitonal_glass.html)
   Lienzo en Gris Niebla #dae0e4, tarjetas en cristal translúcido,
   paneles de alto contraste en Azul Marino #212e58 y acentos #4bbfef
   ======================================================== */
:root,
html[data-theme="light"],
[data-theme="light"],
body[data-theme="light"] {
  --bg-app:               #eef2f6;
  --bg-gradient:          radial-gradient(at 0% 0%, rgba(75, 191, 239, 0.06) 0px, transparent 45%),
                          radial-gradient(at 100% 100%, rgba(41, 78, 121, 0.08) 0px, transparent 50%),
                          linear-gradient(rgba(33, 46, 88, 0.025) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(33, 46, 88, 0.025) 1px, transparent 1px);
  --bg-size:              100% 100%, 100% 100%, 36px 36px, 36px 36px;

  --surface-card:         rgba(255, 255, 255, 0.85);
  --surface-card-hover:   rgba(255, 255, 255, 0.95);
  --surface-solid:        #ffffff;
  --surface-subtle:       rgba(240, 244, 248, 0.75);
  --surface-hud:          linear-gradient(145deg, #151f3e 0%, #212e58 100%);
  --surface-hud-text:     #ffffff;

  /* Modales en Light Mode: Blanco nítido con blur de cristal bitonal */
  --modal-bg:             rgba(255, 255, 255, 0.96);
  --modal-overlay-bg:     rgba(21, 31, 62, 0.55);
  --modal-footer-bg:      rgba(241, 245, 249, 0.85);

  --sidebar-bg:           rgba(255, 255, 255, 0.92);
  --navbar-bg:            rgba(255, 255, 255, 0.92);
  --glass-blur:           blur(24px) saturate(180%);

  --border-color:         rgba(33, 46, 88, 0.09);
  --border-subtle:        rgba(33, 46, 88, 0.08);
  --border-accent:        var(--gg-cyan-primary);

  --text-main:            #151f3e;
  --text-muted:           #526079;
  --text-subtle:          #8a97ab;
  --text-inverse:         #ffffff;

  --shadow-sm:            0 2px 8px rgba(33, 46, 88, 0.04);
  --shadow-md:            0 10px 25px rgba(33, 46, 88, 0.06);
  --shadow-lg:            0 18px 45px rgba(33, 46, 88, 0.12);
  --shadow-glow:          0 0 20px rgba(75, 191, 239, 0.35);

  --input-bg:             rgba(255, 255, 255, 0.95);
  --input-border:         #cbd5e1;
  --input-focus-border:   var(--gg-cyan-primary);
  --input-focus-glow:     0 0 0 3px rgba(75, 191, 239, 0.25);
}

/* ========================================================
   DARK THEME: "MULTICAM HUD" (propuesta_6B_multicam_hud.html)
   Lienzo en Azul Marino Noche #151f3e / #0d152a, acrílico oscuro,
   bordes técnicos iluminados, rejilla militar y acentos cian/neón #4bbfef
   ======================================================== */
html[data-theme="dark"],
[data-theme="dark"],
body[data-theme="dark"] {
  --bg-app:               #0d152a;
  --bg-gradient:          radial-gradient(circle at 80% 20%, rgba(75, 191, 239, 0.14) 0%, transparent 55%),
                          linear-gradient(rgba(75, 191, 239, 0.045) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(75, 191, 239, 0.045) 1px, transparent 1px);
  --bg-size:              100% 100%, 32px 32px, 32px 32px;

  --surface-card:         rgba(21, 31, 62, 0.82);
  --surface-card-hover:   rgba(33, 46, 88, 0.9);
  --surface-solid:        #151f3e;
  --surface-subtle:       rgba(13, 21, 42, 0.7);
  --surface-hud:          rgba(13, 21, 42, 0.95);
  --surface-hud-text:     #ffffff;

  /* Modales en Dark Mode: Azul marino oscuro acrílico HUD */
  --modal-bg:             rgba(18, 27, 54, 0.94);
  --modal-overlay-bg:     rgba(5, 10, 22, 0.82);
  --modal-footer-bg:      rgba(13, 21, 42, 0.95);

  --sidebar-bg:           rgba(15, 23, 48, 0.94);
  --navbar-bg:            rgba(18, 27, 54, 0.9);
  --glass-blur:           blur(20px);

  --border-color:         rgba(75, 191, 239, 0.25);
  --border-subtle:        rgba(75, 191, 239, 0.15);
  --border-accent:        var(--gg-cyan-primary);

  --text-main:            #ffffff;
  --text-muted:           #94a3b8;
  --text-subtle:          #6294b8;
  --text-inverse:         #151f3e;

  --shadow-sm:            0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md:            0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:            0 20px 50px rgba(0, 0, 0, 0.65);
  --shadow-glow:          0 0 25px rgba(75, 191, 239, 0.45);

  --input-bg:             rgba(13, 21, 42, 0.9);
  --input-border:         rgba(75, 191, 239, 0.35);
  --input-focus-border:   var(--gg-cyan-primary);
  --input-focus-glow:     0 0 0 3px rgba(75, 191, 239, 0.35);
}