/* ============================================================
   SISTEMAS LEAL — DESIGN TOKENS (canónico)
   Fuente única de verdad. Cualquier override fuera de este archivo
   debe documentarse. Mantener en sync con docs/DESIGN.md
   ============================================================ */

:root {
  /* ========== Colores marca ========== */
  --ocean: #0B3D4C;           /* fondos principales, footer */
  --ocean-deep: #071F27;      /* variante aún más profunda (brochure) */
  --teal: #14697D;            /* acción primaria, hover */
  --agua: #1A8A9E;            /* accent secundario */
  --light-teal: #6BC5D2;      /* detalles sutiles, bordes */
  --sol: #E8A643;             /* CTA, highlight, "Leal" */
  --sol-hover: #D4952E;       /* hover de botones sol */
  --sol-light: #F5DDB8;       /* fondos sutiles con tint sol */
  --carbon: #2C2C2A;          /* texto body sobre light */
  --arena: #F5F2EC;           /* fondo beige claro editorial */
  --gray: #6B6B67;            /* muted text */
  --light: #FAFAF8;           /* off-white para bg secundarios */
  --white: #FFFFFF;
  --bg-dark: #0C1929;         /* alt dark background */

  /* ========== Escala tipográfica ========== */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-hero: 56px;

  /* ========== Espaciado (escala 8pt) ========== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ========== Border radius ========== */
  --radius-sm: 8px;           /* botones, inputs, badges */
  --radius-md: 12px;          /* cards, social icons */
  --radius-lg: 16px;          /* cards grandes, modals */
  --radius-xl: 24px;          /* hero badges, CTA boxes */
  --radius-pill: 999px;

  /* ========== Sombras (con tint ocean, no negro puro) ========== */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(11,61,76,0.10);
  --shadow-lg: 0 20px 60px rgba(11,61,76,0.18);
  --shadow-glow-sol: 0 8px 30px rgba(232,166,67,0.35);
  --shadow-glow-teal: 0 8px 30px rgba(26,138,158,0.2);

  /* ========== Motion ========== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --duration-reveal: 800ms;
  /* alias legacy */
  --t-fast: 160ms;
  --t-normal: 280ms;
  --t-slow: 560ms;

  /* ========== Z-index escala ========== */
  --z-nav: 100;
  --z-backtop: 90;
  --z-chat: 95;
  --z-modal: 200;
  --z-skiplink: 1000;
}

/* ============================================================
   DARK MODE (toggle manual, html.dark-mode class)
   ============================================================ */
html.dark-mode {
  --arena: #1a1a2e;
  --white: #0f0f1a;
  --carbon: #e0e0e0;
  --light: #141425;
}