/* =============================================================
   ¿Y AHORA QUÉ? — Design tokens
   Única fuente de verdad. Ningún componente escribe un color,
   un radio, una sombra o un espaciado "a mano": todo sale de aquí.
   Estructura de página inspirada en Tomorro (Refero); paleta y
   tipografía de la marca ¿Y AHORA QUÉ?.
   ============================================================= */

:root {
  /* ---------- Color (tokens oficiales de marca) ---------- */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;

  --color-accent: #D6FF38;
  --color-accent-dark: #B8E800;

  --color-dark: #1F2937;
  --color-text: #1F2937;
  --color-text-secondary: #64748B;

  --color-background: #FFFFFF;
  --color-surface: #F3F6FF;
  --color-border: #DDE5F5;

  --color-success: #22C55E;
  --color-warning: #FACC15;
  --color-error: #EF4444;
  --color-info: #2563EB;

  --color-white: #FFFFFF;

  /* Derivados (no son colores nuevos: mezclas de los tokens de arriba) */
  --color-on-primary-muted: color-mix(in srgb, var(--color-white) 78%, var(--color-primary));
  --color-on-dark-muted: color-mix(in srgb, var(--color-white) 68%, var(--color-dark));
  --color-line-on-primary: color-mix(in srgb, var(--color-white) 34%, var(--color-primary));
  --color-line-on-dark: color-mix(in srgb, var(--color-white) 16%, var(--color-dark));
  --color-success-light: color-mix(in srgb, var(--color-success) 14%, var(--color-white));
  --color-success-text: color-mix(in srgb, var(--color-success) 55%, var(--color-dark));
  --color-warning-light: color-mix(in srgb, var(--color-warning) 22%, var(--color-white));
  --color-warning-text: color-mix(in srgb, var(--color-warning) 30%, var(--color-dark));
  --color-error-light: color-mix(in srgb, var(--color-error) 10%, var(--color-white));
  --color-error-text: color-mix(in srgb, var(--color-error) 72%, var(--color-dark));
  --color-accent-light: color-mix(in srgb, var(--color-accent) 30%, var(--color-white));

  /* ---------- Tipografía ---------- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* INTRO RUST solo para marca (H1 de marca y titulares destacados).
     Mientras no exista assets/fonts/IntroRust.woff2 cae en Montserrat 800. */
  --font-brand: "Intro Rust", "Montserrat", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-brand: 800;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 42px;
  /* Titular de portada de la landing (estructura Tomorro: display grande y
     apretado). Único tamaño fuera de la escala, solo para el hero. */
  --text-display: clamp(42px, 8vw, 80px);

  --leading-body: 1.5;
  --leading-heading: 1.2;
  --leading-tight: 1.15;
  --leading-display: 0.92;

  --tracking-heading: -0.015em;
  --tracking-display: -0.01em;
  --tracking-caps: 0.08em;

  /* ---------- Espaciado (escala de 4px) ---------- */
  --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-20: 80px;

  /* ---------- Radios ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);
  /* Solo para las tarjetas de producto flotantes de la landing (Tomorro) */
  --shadow-float: 0 24px 60px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.14);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.12);

  /* ---------- Tamaños ---------- */
  --tap-min: 44px;
  --control-h: 48px;
  --btn-h: 48px;
  --btn-h-sm: 44px;
  --btn-h-lg: 52px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  --container: 1200px;
  --container-app: 1120px;
  --container-text: 640px;
  --sidebar-w: 256px;
  --bottom-nav-h: 68px;
  --topbar-h: 64px;

  --gutter: var(--space-4);          /* móvil */

  /* Breakpoints (referencia; CSS no permite variables en @media):
     sm 640px · md 768px · lg 1024px · xl 1280px */

  /* ---------- Movimiento ---------- */
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 250ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Capas ---------- */
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); }   /* tablet */
}
@media (min-width: 1024px) {
  :root { --gutter: var(--space-8); }   /* escritorio */
}
@media (min-width: 1280px) {
  :root { --gutter: var(--space-12); }
}

/* Preferencia de accesibilidad del usuario: texto más grande */
:root[data-texto="grande"] {
  --text-sm: 16px;
  --text-base: 18px;
  --text-lg: 20px;
  --text-xl: 22px;
}