/* ==========================================================================
   Soriana YA · Portal de experiencias — tokens CSS v0.1 (9-oct-2026)
   Fuente de verdad: tokens.json. En WordPress los primitivos los genera
   theme.json (--wp--preset--*); este archivo los mapea para el prototipo.
   Capa 1: programa (raíz). Capa 2: campaña ([data-campaign="…"]).
   ========================================================================== */

:root {
  /* ---- Primitivos · color ---- */
  --sy-red-500: #DD1F26;   /* Rojo Soriana · P485 C */
  --sy-red-700: #B80018;   /* Rojo maestro */
  --sy-lime-400: #BCC032;  /* Lima YA · P390 C — nunca texto sobre claro */
  --sy-lime-800: #5C6000;  /* Lima tinta */
  --sy-n-0: #FFFFFF;
  --sy-n-50: #F1F0EE;      /* Papel */
  --sy-n-100: #FAF9F8;
  --sy-n-200: #E4E1DE;
  --sy-n-300: #D9D5D1;
  --sy-n-500: #8C8481;
  --sy-n-600: #6E6764;
  --sy-n-700: #5E5654;
  --sy-n-800: #4F4846;
  --sy-n-900: #1E1A1A;     /* Tinta */

  --mo-night: #0A0A0B;
  --mo-night-2: #17171A;
  --mo-line: #2E2D31;
  --mo-line-strong: #77737A;
  --mo-fog: #A9A4A6;
  --mo-mist: #D9D5D8;
  --mo-spectrum: linear-gradient(90deg, #FF3B3B 0%, #FF9A1F 17%, #FFE14D 33%, #8BE04E 50%, #2FD3E0 67%, #3A6BFF 83%, #A14BFF 100%);

  --pending-bg: #FFF2B8;   /* solo prototipo: contenido por confirmar */
  --pending-text: #4A3F00;

  /* ---- Primitivos · tipografía ---- */
  --font-brand: "Google Sans Flex", "Trebuchet MS", sans-serif;   /* Google Fonts, OFL (decisión de Soriana 05-nov) */
  --font-campaign-morat: "Archivo", "Arial Narrow", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.5rem, 1.38rem + 0.5vw, 1.75rem);
  --fs-xl: clamp(2rem, 1.65rem + 1.5vw, 2.75rem);
  --fs-xxl: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  --fs-campaign-display: clamp(3rem, 2.1rem + 3.8vw, 5rem);

  --lh-tight: 1;
  --lh-heading: 1.08;
  --lh-body: 1.55;

  /* ---- Primitivos · espacio, forma, movimiento ---- */
  --space-10: 0.25rem;
  --space-20: 0.5rem;
  --space-30: 0.75rem;
  --space-40: 1rem;
  --space-50: 1.5rem;
  --space-60: 2rem;
  --space-70: 3rem;
  --space-80: clamp(3rem, 6vw, 5.5rem);

  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-raised: 0 12px 32px -16px rgb(30 26 26 / 0.45);
  --slant: 18%;                     /* ángulo del “!” */
  --control-h: 52px;
  --container: 1180px;
  --measure: 68ch;

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Semánticos · capa 1 (Soriana YA) ---- */
  --color-bg-page: var(--sy-n-50);
  --color-bg-surface: var(--sy-n-0);
  --color-bg-subtle: var(--sy-n-100);
  --color-bg-brand: var(--sy-red-700);
  --color-bg-inverse: var(--sy-n-900);

  --color-text-primary: var(--sy-n-900);
  --color-text-secondary: var(--sy-n-700);
  --color-text-body: var(--sy-n-900);
  --color-text-on-brand: var(--sy-n-0);
  --color-text-heading-accent: var(--sy-red-500);   /* solo ≥24px */
  --color-text-link: var(--sy-red-700);
  --color-text-error: var(--sy-red-700);

  --color-border-default: var(--sy-n-300);
  --color-border-input: var(--sy-n-500);
  --color-border-strong: var(--sy-n-900);

  --color-action-primary-bg: var(--sy-red-500);
  --color-action-primary-bg-hover: var(--sy-red-700);
  --color-action-primary-text: var(--sy-n-0);
  --color-action-secondary-bg: var(--sy-n-0);
  --color-action-secondary-bg-hover: var(--sy-n-50);
  --color-action-secondary-text: var(--sy-n-900);
  --color-action-secondary-border: var(--sy-n-900);
  --color-action-disabled-bg: var(--sy-n-200);
  --color-action-disabled-text: var(--sy-n-600);

  --color-focus-ring: var(--sy-n-900);
  --color-focus-ring-on-brand: var(--sy-n-0);   /* tinta sobre rojo = 2.51:1 */

  --color-status-available-bg: var(--sy-lime-400);
  --color-status-available-text: var(--sy-n-900);
  --color-status-soon-bg: var(--sy-n-0);
  --color-status-soon-text: var(--sy-n-700);
  --color-status-soon-border: var(--sy-n-700);
  --color-status-closed-bg: var(--sy-n-200);
  --color-status-closed-text: var(--sy-n-800);

  --color-graphic-pattern: var(--sy-lime-400);
  --color-graphic-pattern-alt: var(--sy-red-500);
  --color-accent-light: none;   /* las campañas lo definen */

  --font-display: var(--font-brand);   /* usar con font-style: italic */
  --font-body: var(--font-brand);
  --font-campaign: var(--font-brand);
}

/* ---- Capa 2 · Campaña Morat ----
   Solo redefine semánticos. Header, footer y acción primaria siguen siendo
   Soriana YA porque usan tokens de acción, que aquí no cambian. */
[data-campaign="morat"] {
  --color-bg-page: var(--mo-night);
  --color-bg-surface: var(--mo-night-2);
  --color-bg-subtle: var(--mo-night-2);

  --color-text-primary: var(--sy-n-0);
  --color-text-secondary: var(--mo-fog);
  --color-text-body: var(--mo-mist);
  --color-text-link: var(--sy-n-0);

  --color-border-default: var(--mo-line);
  --color-border-input: var(--mo-line-strong);

  --color-focus-ring: var(--sy-n-0);

  --color-status-soon-bg: transparent;
  --color-status-soon-text: var(--mo-mist);
  --color-status-soon-border: var(--mo-line-strong);
  --color-status-closed-bg: #2A292D;
  --color-status-closed-text: #B5B1B3;

  --color-accent-light: var(--mo-spectrum);
  --font-campaign: var(--font-campaign-morat);

  background-color: var(--color-bg-page);
  color: var(--color-text-body);
}

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