/* Hallmark · genre: editorial · macrostructure: Ecosystem Index (inicio) + Catalogue (categorías) · theme: custom
 * vibe: "joyería editorial, papel cálido, tinta, arcilla" · reference: faire.com/discover (estructura, no píxeles)
 * paper oklch(98.4% 0.005 75) · accent oklch(50% 0.105 30) arcilla-rosa · Newsreader + Instrument Sans
 * axes: light / roman-serif / warm · enrichment: none (las fotos de producto son la imagen) · nav: N6 · footer: Ft1
 */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Papel y tinta */
  --color-paper:   oklch(98.4% 0.005 75);
  --color-paper-2: oklch(96.2% 0.009 70);
  --color-paper-3: oklch(92.6% 0.012 65);
  --color-rule:    oklch(89% 0.008 65);
  --color-line:    oklch(62% 0.010 60);   /* bordes de campos, ≥ 3:1 sobre papel */
  --color-neutral: oklch(47% 0.012 55);   /* texto secundario, ≈ 7:1 */
  --color-ink:     oklch(21% 0.012 45);   /* texto, ≈ 16:1 */
  --color-ink-2:   oklch(33% 0.012 45);   /* botón principal en hover */
  --color-on-ink:  oklch(98.4% 0.005 75);

  /* Acento: solo el «&» de la marca, enlaces «Ver todas», filtros activos y foco */
  --color-accent:      oklch(50% 0.105 30);
  --color-accent-soft: oklch(94.5% 0.022 30);
  --color-focus:       oklch(50% 0.16 30);

  /* Estados */
  --color-danger:  oklch(47% 0.15 27);
  --color-success: oklch(45% 0.085 150);
  --color-scrim:   oklch(21% 0.012 45 / 0.92);

  /* Tipografía */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.2vw, 3rem);
  --text-mast: clamp(2.5rem, 1.6rem + 4.6vw, 4.75rem);

  /* Espacio, escala de 4 pt */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --page-max: 82rem;

  /* Líneas y radios */
  --rule-hair: 1px;
  --rule-mid: 1.5px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-mid: 220ms;
  --dur-long: 420ms;
}