/* =============================================================
   CET Metacom — tokens v2
   Sistema OKLCH con neutrales tintados hacia el azul institucional.
   Paleta: azul ink dominante · naranja CTA reservado · verde pulso.
   Regla dura: el naranja nunca es fondo de sección; solo CTA y señales.
   ============================================================= */

:root {
  /* ── INK / NEUTRALES (tintados hacia azul 240) ─────────────── */
  --color-ink:            oklch(0.22 0.05 240);   /* tinta principal */
  --color-ink-soft:       oklch(0.42 0.04 240);   /* secundario */
  --color-ink-mute:       oklch(0.58 0.02 240);   /* muted */
  --color-ink-subtle:     oklch(0.72 0.015 240);  /* muy tenue */

  /* ── PAPER / FONDOS ────────────────────────────────────────── */
  --color-paper:          oklch(0.992 0.003 240); /* base (blanco tintado) */
  --color-paper-2:        oklch(0.965 0.006 240); /* alt */
  --color-paper-3:        oklch(0.94 0.009 240);  /* más profundo */

  /* ── LÍNEAS ────────────────────────────────────────────────── */
  --color-line:           oklch(0.90 0.012 240);
  --color-line-strong:    oklch(0.82 0.018 240);

  /* ── BRAND AZUL (institucional) ────────────────────────────── */
  --color-brand:          oklch(0.44 0.12 240);   /* azul institucional */
  --color-brand-ink:      oklch(0.22 0.08 240);   /* azul oscuro */
  --color-brand-deep:     oklch(0.16 0.06 240);   /* azul más profundo */
  --color-brand-soft:     oklch(0.95 0.022 240);  /* fondo azul claro tintado */
  --color-brand-hair:     oklch(0.32 0.07 240);   /* hairline en dark */

  /* ── CTA (naranja — úsese con avaricia) ────────────────────── */
  --color-cta:            oklch(0.66 0.17 48);
  --color-cta-ink:        oklch(0.54 0.17 42);    /* hover / pressed */
  --color-cta-soft:       oklch(0.95 0.04 60);    /* superficie muy tenue */

  /* ── SEÑALES ───────────────────────────────────────────────── */
  --color-live:           oklch(0.68 0.17 155);   /* verde pulso (cupos activos) */
  --color-warn:           oklch(0.70 0.13 80);
  --color-err:            oklch(0.58 0.18 25);

  /* ── ALIASES DE TEXTO (evitamos gris plano sobre colores) ──── */
  --color-on-paper:       var(--color-ink);
  --color-on-paper-soft:  var(--color-ink-soft);
  --color-on-paper-mute:  var(--color-ink-mute);
  --color-on-brand:       oklch(0.98 0.008 240);
  --color-on-brand-soft:  oklch(0.86 0.025 240);
  --color-on-brand-mute:  oklch(0.70 0.03 240);

  /* ── COMPAT (referencias que usan otros CSS del tema) ──────── */
  /* Mapeos para que global.css y components.css sigan funcionando
     en páginas interiores sin migrarse todavía. */
  --color-primary:        var(--color-brand);
  --color-primary-light:  var(--color-brand-soft);
  --color-primary-dark:   var(--color-brand-ink);
  --color-accent:         var(--color-cta);
  --color-accent-light:   var(--color-cta-soft);
  --color-accent-dark:    var(--color-cta-ink);
  --color-success:        var(--color-live);
  --color-success-light:  oklch(0.95 0.035 155);
  --color-error:          var(--color-err);
  --color-warning:        var(--color-warn);
  --color-text:           var(--color-ink);
  --color-text-secondary: var(--color-ink-soft);
  --color-text-muted:     var(--color-ink-mute);
  --color-text-subtle:    var(--color-ink-subtle);
  --color-bg:             var(--color-paper);
  --color-bg-alt:         var(--color-paper-2);
  --color-border:         var(--color-line);

  /* ── TIPOGRAFÍA ────────────────────────────────────────────── */
  --font-display: 'Archivo Narrow', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala modular — fluid para marketing, fija para UI densa */
  --fs-display-xl: clamp(2.75rem, 2rem + 3.5vw, 5rem);   /* hero H1 */
  --fs-display-l:  clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* section H2 grande */
  --fs-display-m:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); /* section H2 normal */
  --fs-heading:    1.375rem;  /* H3 card */
  --fs-lede:       1.125rem;  /* bajadas */
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.75rem;   /* labels/caps */

  /* Legacy aliases — no romper global.css */
  --text-h1: var(--fs-display-m);
  --text-h2: var(--fs-heading);
  --text-h3: 1.125rem;
  --text-body: var(--fs-body);
  --text-small: var(--fs-small);
  --text-overline: var(--fs-micro);

  /* ── ESPACIADO (4pt scale) ─────────────────────────────────── */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);

  /* ── RADIOS ────────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* ── ELEVACIÓN (contenida, sin drama) ──────────────────────── */
  --shadow-sm: 0 1px 0 oklch(0.88 0.018 240);
  --shadow-md: 0 1px 2px oklch(0.2 0.05 240 / 0.06), 0 2px 6px oklch(0.2 0.05 240 / 0.04);
  --shadow-card: 0 1px 0 oklch(0.88 0.018 240), 0 8px 20px -12px oklch(0.2 0.05 240 / 0.12);

  /* ── MOTION ────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-snap: 150ms;
  --dur-base: 260ms;
  --dur-entrance: 600ms;

  /* ── CONTENEDOR ────────────────────────────────────────────── */
  --wrap-max: 1160px;
  --wrap-pad: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-snap: 0ms;
    --dur-base: 0ms;
    --dur-entrance: 0ms;
  }
}