/* ============================================================
   nevrado: tokens de diseño (paleta Pastel de bandera)
   Los cinco tonos de la bandera lésbica llevados a pastel para
   los fondos de bloque (coral, durazno, crema, rosa, lila) y la
   ciruela de siempre como color fuerte: texto, botones, pie.
   Los colores de marca NO se usan como colores de prenda:
   los colores de indumentaria viven en assets/js/data/catalog.js
   ============================================================ */
:root {
  /* Paleta de marca */
  --c-terracota: #a0533a;   /* acentos fuertes (5.2:1 sobre crema) */
  --c-durazno: #f2bc98;     /* etiquetas, nunca texto */
  --c-blanco: #ffffff;
  --c-rosa: #d9a3bc;        /* rosa polvo: etiquetas, nunca texto */
  --c-ciruela: #7d3a5e;     /* logo, títulos, CTA, foco (7.5:1) */
  --c-terracota-texto: #8a4330; /* terracota para texto chico sobre pasteles (>= 4.9:1) */

  /* Pasteles para fondos de bloque (siempre con texto ciruela o tinta) */
  --p-coral: #f6b9a3;
  --p-durazno: #ffdcc2;
  --p-crema: #fff1e2;
  --p-rosa: #f9cfe0;
  --p-lila: #e9cfe6;
  --p-coral-2: #fbd9cd;     /* versiones más claras, para tarjetas */
  --p-durazno-2: #ffeadb;
  --p-rosa-2: #fce3ed;
  --p-lila-2: #f4e6f2;

  /* Alias que usa el resto del CSS */
  --c-red: var(--c-terracota);
  --c-orange: var(--c-durazno);
  --c-white: var(--c-blanco);
  --c-pink: var(--c-rosa);
  --c-magenta: var(--c-ciruela);

  /* Derivados funcionales */
  --c-magenta-hover: #66304d;
  --c-magenta-press: #52263e;
  --c-magenta-tint: #f3e7ed;
  --c-orange-tint: #fcefe6;
  --c-red-tint: #f6ebe6;
  --c-pink-tint: #f7ecf1;

  /* Neutros cálidos */
  --c-bg: #fff8f1;          /* fondo principal: crema */
  --c-ink: #3a1f2d;         /* texto principal: ciruela muy oscura */
  --c-ink-2: #5c4250;       /* texto secundario */
  --c-ink-3: #7a6270;       /* texto terciario (>= 4.5:1 sobre crema) */
  --c-line: #eedfd6;
  --c-line-strong: #7d3a5e;
  --c-surface: #fffdfa;     /* tarjetas sobre la crema */
  --c-surface-2: #fbefe6;   /* superficies neutras para prendas */
  --c-surface-3: #f3e2d7;

  /* Estados */
  --c-success: #1d7a46;
  --c-success-tint: #e6f4ec;
  --c-warning: #8a5300;
  --c-warning-tint: #fff4e0;
  --c-danger: #b3261e;
  --c-danger-tint: #fbe8e7;
  --c-focus: #7d3a5e;

  /* Tipografía */
  --ff-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --ff-logo: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ff-ui: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-stretch-display: 100%;
  --fw-display: 800;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --fs-hero: clamp(3.25rem, 1.2rem + 9vw, 9.5rem);

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Forma */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-arch: 999px 999px var(--radius-md) var(--radius-md); /* arco arriba */
  --radius-pill: 999px;
  --border: 1px solid var(--c-line);
  --border-strong: 2px solid var(--c-line-strong);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 3vw, 40px);
  --header-h: 64px;
  --tap: 44px; /* tamaño táctil mínimo */

  --shadow-sheet: 0 -8px 30px rgba(58, 31, 45, 0.12);
  --shadow-pop: 0 12px 30px rgba(58, 31, 45, 0.14);
  --shadow-soft: 0 6px 18px rgba(125, 58, 94, 0.1);
}

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