/*
  Design tokens — MAYAB Hilos y Jarcias
  Marca: pirámide maya en rojo (ver logo-mayab.png), fibras naturales de henequén.
  Paleta derivada del rojo del logo + tonos de fibra/sisal + acento ocre maya.
  No usar los azules/grises default de Bootstrap en ningún componente.
*/

:root {
  /* Color — Primario (rojo Mayab, tomado del logo) */
  --color-primary-50:  #fdf3f2;
  --color-primary-100: #fbe1df;
  --color-primary-300: #e28884;
  --color-primary-500: #c1272d; /* base */
  --color-primary-600: #a81f24;
  --color-primary-700: #86181c;

  /* Color — Fibra natural / henequén (sisal, cuerda cruda) */
  --color-fiber-50:  #fbf8f1;
  --color-fiber-100: #f5efe0;
  --color-fiber-200: #e9dcc0;
  --color-fiber-400: #c9a876;
  --color-fiber-600: #9c7b45;

  /* Color — Acento (ocre maya, para badges/CTAs secundarios) */
  --color-accent-500: #c68a2e;
  --color-accent-600: #a8721f;

  /* Color — Neutros (tinta cálida, no negro puro) */
  --color-ink-900: #2b211c;
  --color-ink-700: #4a3b33;
  --color-ink-500: #746358;
  --color-ink-300: #b3a494;
  --color-ink-200: #dad1c5;
  --color-surface: #fffdf9;
  --color-surface-alt: #f5efe4;
  --color-border: #e3d9c8;

  /* Color — Semántico */
  --color-success: #2f7d4f;
  --color-danger: #d64545;
  --color-warning: var(--color-accent-500);
  --color-focus-ring: #86181c;

  /* Tipografía */
  --font-heading: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* Espaciado (escala base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(43, 33, 28, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(43, 33, 28, 0.14);

  /* Layout */
  --container-max: 1200px;
  --transition-base: 160ms ease;
}