/* ==========================================================================
   Tokens — única fuente de verdad de color, tipografía, espaciado y efectos.
   Ningún otro archivo define valores literales (hex, px de escala, blur).
   Fase 11 §4.
   ========================================================================== */

/* ── Fuente institucional REHN ─────────────────────────────────────────── */
@font-face {
  font-family: 'REHN';
  src: url('../assets/fonts/REHN-LIGHT.TTF') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'REHN';
  src: url('../assets/fonts/REHN-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'REHN';
  src: url('../assets/fonts/REHN-MEDIUM.TTF') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'REHN';
  src: url('../assets/fonts/REHN-BOLD.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'REHN';
  src: url('../assets/fonts/REHN-EXTRABOLD.TTF') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color (paleta institucional) ────────────────────────────────────── */
  --color-primary: #20b1aa;
  --color-primary-dark: #00827a;
  --color-primary-deep: #023834;
  --color-on-primary: #ffffff;
  /* Teal para TEXTO: #00827a sólo llega a 3.78:1 sobre el hueso. Esta variante
     da 4.73:1 sobre hueso y 5.88:1 sobre blanco. Los iconos y fondos siguen
     usando --color-primary-dark. */
  --color-primary-text: #00716a;

  --color-accent: #ff5c65; /* coral: sólo acentos y badges, nunca texto largo */
  --color-accent-soft: #ffe9eb;
  --color-on-accent: #ffffff;

  --color-background: #e8e7dc; /* hueso */
  --color-surface: #ffffff;
  --color-surface-sunken: #dedcce;

  --color-foreground: #023834;
  --color-muted-foreground: #5a6664; /* 4.80:1 sobre hueso, 5.97:1 sobre blanco */
  --color-border: rgba(2, 56, 52, 0.12);
  --color-border-strong: rgba(2, 56, 52, 0.24);

  --color-success: #0f766e;
  --color-destructive: #c62828;
  --color-ring: var(--color-primary-dark);

  --color-whatsapp: #25d366;

  /* ── Glassmorphism ───────────────────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-solid: rgba(255, 255, 255, 0.72); /* fallback sin backdrop-filter */
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border-color: rgba(255, 255, 255, 0.25);
  --glass-blur: 15px;
  --glass-shadow: 0 10px 30px -12px rgba(2, 56, 52, 0.25);
  --glass-shadow-lifted: 0 20px 44px -16px rgba(2, 56, 52, 0.36);

  /* Scrim sobre fotos: el texto nunca va directo sobre la imagen. */
  --scrim: linear-gradient(to top, rgba(2, 56, 52, 0.78) 0%, rgba(2, 56, 52, 0.22) 45%, transparent 75%);
  --scrim-modal: rgba(2, 56, 52, 0.55);

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --font-sans:
    'REHN', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-base: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.5rem; /* 24 */
  --text-2xl: 2rem; /* 32 */
  --text-3xl: 3rem; /* 48 */
  --text-display: clamp(2.25rem, 6vw, 4rem);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --measure: 68ch;

  /* ── Espaciado (ritmo 4/8) ───────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container: 76rem;
  --gutter: var(--space-4);

  /* ── Formas ──────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(2, 56, 52, 0.08);
  --shadow: 0 8px 24px -14px rgba(2, 56, 52, 0.3);

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 220ms;
  --duration-slow: 320ms;

  /* ── Capas ───────────────────────────────────────────────────────────── */
  --z-header: 40;
  --z-float: 60;
  --z-modal: 100;
  --z-toast: 120;

  /* ── Táctil ──────────────────────────────────────────────────────────── */
  --touch-target: 44px;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
  }
}