/* ============================================================
   GCG DESIGN SYSTEM V1 — Design tokens
   Fuente de verdad: MD/GCG_Plan_Maestro/GCG_DESIGN_SYSTEM_V1.md
   NO cambiar estos valores sin actualizar primero ese documento.
   Este archivo NO se referencia todavía desde ninguna página
   existente (login.php, panel-empresa.php, etc.) — es
   infraestructura aislada para la nueva Home y pantallas futuras.
   ============================================================ */

:root {
  /* ---- Color: fondos y superficies ---- */
  --gcg-bg: #080D10;
  --gcg-bg-secondary: #0D1216;
  --gcg-surface: #11171C;
  --gcg-surface-raised: #161A20;
  --gcg-surface-hover: #1A2026;

  /* ---- Color: bordes ---- */
  --gcg-border: #232833;
  --gcg-border-strong: #343A43;
  --gcg-divider: #1D232A;

  /* ---- Color: texto ---- */
  --gcg-text: #F5F7FA;
  --gcg-text-secondary: #A1A7B3;
  --gcg-text-muted: #707782;
  --gcg-text-disabled: #555C65;

  /* ---- Color: acento de marca (naranja) ---- */
  --gcg-accent: #F4A62A;
  --gcg-accent-hover: #FFB63E;
  --gcg-accent-active: #D88918;
  --gcg-accent-soft: rgba(244, 166, 42, 0.10);

  /* ---- Color: estados ---- */
  --gcg-success: #22C55E;
  --gcg-success-bg: rgba(34, 197, 94, 0.12);
  --gcg-warning: #F4A62A;
  --gcg-danger: #EF4444;
  --gcg-danger-bg: rgba(239, 68, 68, 0.12);
  --gcg-info: #A1A7B3;

  /* ---- Tipografía: familias ----
     Inter = body/forms/tablas/nav secundaria
     Space Grotesk = títulos/números grandes/stats
     JetBrains Mono = SOLO IDs/timestamps/datos técnicos, nunca contenido general */
  --gcg-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --gcg-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --gcg-font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* ---- Tipografía: escala ---- */
  --gcg-text-xs: 12px;
  --gcg-text-sm: 14px;
  --gcg-text-base: 16px;
  --gcg-text-lg: 18px;
  --gcg-text-xl: 22px;
  --gcg-text-2xl: 28px;
  --gcg-text-3xl: 36px;
  --gcg-text-display: 48px;

  /* ---- Radios ---- */
  --gcg-radius-xs: 4px;
  --gcg-radius-sm: 6px;
  --gcg-radius-md: 10px;
  --gcg-radius-lg: 14px;

  /* ---- Espaciado (base 4px) ---- */
  --gcg-space-1: 4px;
  --gcg-space-2: 8px;
  --gcg-space-3: 12px;
  --gcg-space-4: 16px;
  --gcg-space-5: 20px;
  --gcg-space-6: 24px;
  --gcg-space-8: 32px;
  --gcg-space-10: 40px;
  --gcg-space-12: 48px;
  --gcg-space-16: 64px;

  /* ---- Sombras ---- */
  --gcg-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
  --gcg-shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.30);
  --gcg-shadow-cta-hover: 0 6px 18px rgba(244, 166, 42, 0.12);

  /* ---- Movimiento ---- */
  --gcg-transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --gcg-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Grid / layout ----
     max-width subido tras la revisión visual del 2026-08-26: la primera
     pasada (1480px) dejaba demasiado margen lateral muerto en 1440p/1920p. */
  --gcg-max-width: 1760px;
  --gcg-gutter-desktop: 40px;
  --gcg-gutter-laptop: 24px;
  --gcg-gutter-mobile: 16px;

  /* ---- Navbar (subido ~20% en la revisión visual) ---- */
  --gcg-navbar-height: 84px;

  /* ---- Breakpoints (referencia — usar directamente en @media, CSS no permite var() ahí) ----
     Desktop >= 1280px | Laptop 1024-1279px | Tablet 768-1023px | Mobile < 768px */
}