/* ─────────────────────────────────────────────────────────────
   Tokens de diseño de Red Medida.
   Ningún color, tipografía, radio ni sombra se escribe fuera de
   este archivo: el resto del CSS sólo usa var(--…).

   Dos capas:
   1. Paleta: los valores crudos. No se usan directo en componentes.
   2. Semánticos: para qué sirve cada valor. Es lo que se usa.
   El tema oscuro sólo redefine la capa semántica.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── 1. Paleta ─────────────────────────────── */
  --azul-50:  #EEF4FF;
  --azul-100: #DCE8FD;
  --azul-300: #8DB4F5;
  --azul-400: #5BB8F5;
  --azul-500: #3A9FE3;
  --azul-600: #1657D0;
  --azul-700: #0F44A8;

  --tinta-900: #0B1B33;
  --tinta-700: #43546F;
  --tinta-500: #7C8AA3;

  --gris-0:   #FFFFFF;
  --gris-50:  #F7FAFE;
  --gris-100: #F2F6FC;
  --gris-200: #DCE4F0;
  --gris-300: #BFCDE3;

  --noche-950: #071120;
  --noche-900: #0D1B30;
  --noche-800: #14263F;
  --noche-700: #1D3350;
  --noche-600: #2C4A70;
  --noche-300: #93A9C8;
  --noche-400: #5B7396;
  --noche-50:  #EEF5FF;

  --verde-600: #0E8A5C;
  --verde-300: #7FD8A8;

  /* ── 2. Semánticos (tema claro, el de por defecto) ── */
  --color-primary:          var(--azul-600);
  --color-primary-hover:    var(--azul-700);
  --color-on-primary:       var(--gris-0);

  --color-background:       var(--gris-0);
  --color-background-alt:   var(--gris-50);
  --color-surface:          var(--gris-0);
  --color-surface-elevated: var(--gris-100);
  --color-surface-strong:   var(--azul-100);  /* se tiene que distinguir del fondo del hero */
  --color-border:           var(--gris-200);
  --color-border-strong:    var(--gris-300);

  --color-text-primary:     var(--tinta-900);
  --color-text-secondary:   var(--tinta-700);
  --color-text-muted:       var(--tinta-500);

  --color-success:          var(--verde-600);

  /* Derivados del primario: se recalculan solos al cambiar de tema */
  --color-primary-soft:     color-mix(in srgb, var(--color-primary) 8%, transparent);
  --color-primary-line:     color-mix(in srgb, var(--color-primary) 26%, transparent);
  --color-primary-focus:    color-mix(in srgb, var(--color-primary) 45%, transparent);
  --color-nav-scrolled:     color-mix(in srgb, var(--color-background) 88%, transparent);

  --gradient-hero:          linear-gradient(180deg, var(--azul-50) 0%, var(--gris-0) 100%);

  /* ── Sombras ───────────────────────────────── */
  --shadow-card:        0 1px 2px rgba(11, 27, 51, .05);
  --shadow-card-hover:  0 16px 36px -18px rgba(22, 87, 208, .35);
  --shadow-raised:      0 24px 60px -28px rgba(11, 27, 51, .35);
  --shadow-button:      0 8px 20px -8px rgba(22, 87, 208, .55);

  /* ── Tipografía ────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;

  --text-xs:   .72rem;
  --text-sm:   .86rem;
  --text-base: 1rem;
  --text-md:   1.1rem;
  --text-lg:   1.3rem;
  --text-h2:   clamp(1.6rem, 4.4vw, 2.3rem);
  --text-h1:   clamp(2rem, 6.4vw, 3.3rem);
  --text-quote: clamp(1.3rem, 3.6vw, 1.85rem);

  /* ── Forma y espacio ───────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --space-page:    20px;
  --space-section: 76px;
  --width-page:    1100px;
  --width-text:    780px;
  --height-nav:    64px;

  --transition: .2s ease;
}

/* ── Tema oscuro ─────────────────────────────── */
[data-theme="dark"] {
  --color-primary:          var(--azul-400);
  --color-primary-hover:    var(--azul-500);
  --color-on-primary:       var(--noche-950);

  --color-background:       var(--noche-950);
  --color-background-alt:   var(--noche-900);
  --color-surface:          var(--noche-900);
  --color-surface-elevated: var(--noche-800);
  --color-surface-strong:   var(--noche-700);
  --color-border:           var(--noche-700);
  --color-border-strong:    var(--noche-600);

  --color-text-primary:     var(--noche-50);
  --color-text-secondary:   var(--noche-300);
  --color-text-muted:       var(--noche-400);

  --color-success:          var(--verde-300);

  --gradient-hero:          linear-gradient(180deg, var(--noche-900) 0%, var(--noche-950) 100%);

  --shadow-card:        none;
  --shadow-card-hover:  0 0 34px color-mix(in srgb, var(--azul-400) 14%, transparent);
  --shadow-raised:      0 30px 80px -30px rgba(0, 0, 0, .6);
  --shadow-button:      0 0 24px color-mix(in srgb, var(--azul-400) 26%, transparent);
}

@media (min-width: 720px) {
  :root { --space-page: 28px; }
}
@media (min-width: 960px) {
  :root { --space-section: 96px; }
}