/* =================================================================
   DESIGN TOKENS — Quiscalux
   Fuente única de verdad para todo el sistema visual.
   Ningún valor debe existir fuera de estos tokens.
   ================================================================= */

:root {
  /* ── Paleta base ── */
  --navy: #0E2862;
  --teal: #019AA3;
  --blue-ui: #1F8BB8;
  --teal-soft: #4EADC9;
  --white: #FFFFFF;
  --text-dark: #1F2937;

  /* ── Dark mode (default) ── */
  --bg-main: #0B1220;
  --bg-main-rgb: 11, 18, 32;
  --bg-surface: #111A2E;
  --bg-surface-hover: #162038;
  --bg-deep: #050a14;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-teal: rgba(1, 154, 163, 0.5);
  --text-main: #FFFFFF;
  --text-muted: #C7D2FE;
  --teal-text: #019AA3;
  --accent-glow: #4EADC9;

  /* ── Tipografía ── */
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-display: 3rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.6;
  --lh-heading: 1.2;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Espaciado (múltiplos de 8) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── Sombras ── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 1px 0 var(--border-soft);

  /* ── Transiciones ── */
  --transition-fast: 120ms ease;
  --transition-base: 150ms ease;
  --transition-smooth: 250ms ease;

  /* ── Layout ── */
  --container-max: 1280px;
  --header-height: 72px;
}

/* ── Light mode ── */
[data-theme="light"] {
  --bg-main: #FFFFFF;
  --bg-main-rgb: 255, 255, 255;
  --bg-surface: #F2F4F7;
  --bg-deep: #E5E7EB;
  --bg-surface-hover: #E5E7EB;
  --border-teal: rgba(1, 154, 163, 0.3);
  --text-main: #1F2937;
  --text-muted: #4B5563;
  --teal-text: #0E2862;
  --accent-glow: #019AA3;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Responsive tokens ── */
@media (max-width: 1279px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 2rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.25rem;
    --header-height: 64px;
  }
}