/* ==========================================================================
   Kevin & Lucía — tokens v0.3 (oct 2026)
   Primitivos de marca → tokens semánticos (Noche / Día).
   Los componentes usan SOLO los semánticos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* Fuentes de marca (comerciales: verificar licencia webfont antes de publicar) */
@font-face { font-family: 'Tactico'; src: url('../resources/fonts/Tactico-Grunge.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Randrake'; src: url('../resources/fonts/Randrake.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- Primitivos de marca (del sitio actual) ---------- */
  --negro: #000000;
  --blanco: #F9F9F9;
  --rojo: #CF0421;
  --rojo-vivo: #E60101;
  --granate: #9B030A;
  --sangre: #770000;
  --lila: #A760FF;
  --azul: #1449AB;

  /* ---------- Tipografía ---------- */
  --font-cartel: 'Tactico', 'Arial Narrow', sans-serif;  /* solo MAYÚSCULAS, sin tildes */
  --font-firma: 'Randrake', cursive;                      /* 1 palabra, sin tildes ni ñ */
  --font-texto: 'Montserrat', system-ui, sans-serif;

  /* ---------- Espaciado (base 4) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* ---------- Radios ---------- */
  --radius-sm: 6px;    /* chips cuadradas, miniaturas */
  --radius-md: 12px;   /* inputs, tarjetas pequeñas */
  --radius-lg: 20px;   /* tarjetas */
  --radius-xl: 28px;   /* tarjeta héroe, marcos */
  --radius-full: 9999px; /* botones, chips, avatares */

  /* ---------- Movimiento: 128 BPM ---------- */
  --beat: 470ms;          /* 1 tiempo */
  --half: 235ms;          /* medio tiempo */
  --bar: 1880ms;          /* 1 compás = 1·2·3·golpe */
  --ease-paso: cubic-bezier(.65, 0, .35, 1);   /* entradas, cambios de estado */
  --ease-ola: cubic-bezier(.45, .05, .25, 1);  /* movimientos largos, fotos */
  --ease-golpe: cubic-bezier(.2, 1.6, .4, 1);  /* el acento del 4 (overshoot) */
}

/* ---------- Tema Noche (por defecto) ---------- */
:root, [data-theme="noche"] {
  --bg-canvas: #000000;
  --bg-surface: #111111;
  --bg-surface-muted: #1C1C1C;
  --bg-inverse: #F9F9F9;
  --bg-hero: #CF0421;
  --text-primary: #F9F9F9;
  --text-secondary: #B5B5B5;
  --text-muted: #8A8A8A;
  --text-on-inverse: #000000;
  --border-subtle: #262626;
  --accent: #CF0421;
  --accent-soft: #2A070C;
  --accent-ink: #FF5A67;
  --on-accent: #F9F9F9;
  --lady-soft: #241838;
  --man-soft: #0F1A33;
  --shadow-1: 0 0 0 1px #262626;
  --shadow-2: 0 0 0 1px #262626, 0 12px 40px #00000099;
  color-scheme: dark;
}

/* ---------- Tema Día ---------- */
[data-theme="dia"] {
  --bg-canvas: #EFEEEC;
  --bg-surface: #F9F9F9;
  --bg-surface-muted: #E7E6E3;
  --bg-inverse: #000000;
  --bg-hero: #CF0421;
  --text-primary: #000000;
  --text-secondary: #4D4D4D;
  --text-muted: #767676;
  --text-on-inverse: #F9F9F9;
  --border-subtle: #DCDAD6;
  --accent: #CF0421;
  --accent-soft: #FBE4E7;
  --accent-ink: #9B030A;
  --on-accent: #F9F9F9;
  --lady-soft: #EFE4FF;
  --man-soft: #E1E9F7;
  --shadow-1: 0 1px 2px #0000000a, 0 4px 16px #0000000a;
  --shadow-2: 0 12px 40px #00000024;
  color-scheme: light;
}