/* =========================================================
   GARAGE LABRIN · TOKENS DEL SISTEMA DE DISEÑO
   Todos los valores salen de los colores ya usados en
   styles.css / admin.css / tienda.css / caja.css /
   bodega.css / chat-interno.css. No hay paleta nueva.
   Documentación: docs/modernizacion/SISTEMA-DISENO.md
========================================================= */

:root {
  /* ---- Fondos (de más profundo a más elevado) ---- */
  --gl-bg-deep: #05070a;      /* footer inferior */
  --gl-bg-header: #070a0f;    /* header, sidebar */
  --gl-bg: #080b0f;           /* fondo base */
  --gl-bg-2: #10151c;         /* final del degradado body */
  --gl-surface: #10161d;      /* tarjeta (inicio degradado) */
  --gl-surface-2: #161d26;    /* tarjeta (fin degradado) */
  --gl-field: #0d1218;        /* inputs, cajas internas */
  --gl-raised: #151d27;       /* slots, mensajes, chips */
  --gl-control: #202a35;      /* botón secundario */
  --gl-control-hover: #263241;

  /* ---- Marca ---- */
  --gl-red: #e50914;          /* rojo corporativo */
  --gl-red-bright: #ff2530;   /* hover / eyebrow */
  --gl-red-deep: #9d0610;     /* fin del degradado del botón */
  --gl-red-text: #ff6570;     /* rojo para texto pequeño (AA sobre fondo oscuro) */
  --gl-red-tint: #ffd5d8;
  --gl-red-a08: rgba(229, 9, 20, 0.08);
  --gl-red-a13: rgba(229, 9, 20, 0.13);
  --gl-red-a35: rgba(229, 9, 20, 0.35);

  /* ---- Texto ---- */
  --gl-text: #f4f7fb;
  --gl-white: #ffffff;
  --gl-text-2: #dce3ea;       /* texto de tablas y menú */
  --gl-text-3: #d6dde5;       /* párrafo del hero */
  --gl-label: #d5dce5;
  --gl-muted: #aab4c0;

  /* ---- Líneas ---- */
  --gl-line: #28313d;
  --gl-line-soft: rgba(255, 255, 255, 0.08);

  /* ---- Estados (ya existentes) ---- */
  --gl-ok: #20c997;
  --gl-warn: #f5b301;
  --gl-whatsapp: #128c7e;
  --gl-chat-green: #16a34a;
  --gl-teal-text: #5eead4;
  --gl-money: #86efac;

  /* ---- Foco (deriva del rojo de marca) ---- */
  --gl-focus: #ff6570;
  --gl-focus-ring: 0 0 0 3px rgba(229, 9, 20, 0.28);

  /* ---- Tipografía (sin fuentes web: system-ui) ---- */
  --gl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gl-fs-xs: 0.75rem;   /* 12 */
  --gl-fs-sm: 0.875rem;  /* 14 */
  --gl-fs-md: 1rem;      /* 16 */
  --gl-fs-lg: 1.125rem;  /* 18 */
  --gl-fs-h3: 1.25rem;   /* 20 */
  --gl-fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  --gl-fs-h1: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
  --gl-tracking-caps: 0.14em;

  /* ---- Espaciado (escala 4px) ---- */
  --gl-s1: 4px;
  --gl-s2: 8px;
  --gl-s3: 12px;
  --gl-s4: 16px;
  --gl-s5: 20px;
  --gl-s6: 24px;
  --gl-s8: 32px;
  --gl-s10: 40px;
  --gl-s12: 48px;
  --gl-s16: 64px;
  --gl-gutter: clamp(16px, 5vw, 42px);
  --gl-section-y: clamp(48px, 7vw, 88px);
  --gl-maxw: 1320px;

  /* ---- Radios (reducidos: menos "burbuja") ---- */
  --gl-r-sm: 10px;
  --gl-r-md: 14px;
  --gl-r-lg: 18px;
  --gl-r-xl: 22px;
  --gl-r-pill: 999px;

  /* ---- Sombras ---- */
  --gl-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
  --gl-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.28);
  --gl-shadow-red: 0 10px 28px rgba(229, 9, 20, 0.28);

  /* ---- Movimiento ---- */
  --gl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gl-dur: 180ms;
  --gl-dur-slow: 420ms;

  /* ---- Layout ---- */
  --gl-header-h: 88px;
  --gl-tap: 44px;

  /* ---- Alias heredados (usados por chat-interno.css y CSS antiguo) ---- */
  --bg: var(--gl-bg);
  --bg2: var(--gl-bg-2);
  --panel: var(--gl-surface);
  --panel2: var(--gl-surface-2);
  --red: var(--gl-red);
  --red2: var(--gl-red-bright);
  --text: var(--gl-text);
  --muted: var(--gl-muted);
  --line: var(--gl-line);
  --ok: var(--gl-ok);
  --warn: var(--gl-warn);
  --white: var(--gl-white);
  --shadow: var(--gl-shadow);
}

@media (max-width: 980px) {
  :root { --gl-header-h: 76px; }
}

@media (max-width: 560px) {
  :root { --gl-header-h: 68px; }
}