:root {
  /* Color */
  --color-paper: #FAFAF7;
  --color-white: #FFFFFF;
  --color-ink: #121212;
  --color-carbon: #2B2B2A;
  /* Carbón cálido de Traza para las páginas oscuras (portada, listado,
     nosotros) y su versión profunda (barra móvil, viñeta, fondo del lienzo).
     Siempre acompañados del acento en los elementos de firma. */
  --color-carbon-warm: #2C2520;
  --color-ink-warm: #15110E;
  --color-gray-700: #4A4A49;
  --color-gray-500: #7B7B78;
  --color-gray-300: #C8C6C0;
  --color-gray-150: #E6E4DD;
  --color-gray-100: #EFEDE7;
  --color-accent: #B5502E;
  --color-accent-dark: #7C3620;
  --color-accent-tint: #F1DCD2;
  --color-accent-light: #E8906A; /* acento sobre fotos oscuras (arco del anillo, línea temporizadora): mismo tono, más luz */
  --color-overlay-dark: rgba(18,18,18,0.86);
  --color-focus-ring: #111111;
  --color-success: #2F6B4F;
  --color-error: #A42E2E;
  --color-error-tint: #F3E0DD;
  --color-whatsapp: #1F9E57;

  /* Typography */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;

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

  --text-display1: clamp(2.75rem, 2rem + 5vw, 7.5rem);
  --text-display2: clamp(2rem, 1.4rem + 3.2vw, 4.5rem);
  --text-h1: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  --text-h2: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --text-h3: 1.25rem;
  --text-folio: clamp(1.4rem, 1rem + 3vw, 3.5rem);
  --text-eyebrow: 0.75rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;

  --tracking-eyebrow: 0.18em;
  --tracking-nav: 0.08em;
  --tracking-display: -0.01em;
  --tracking-body: 0;

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* Space */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-gutter: clamp(20px, 2vw + 10px, 64px);

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-none: none;
  --shadow-float: 0 8px 24px rgba(18,18,18,0.22);
  --shadow-overlay: 0 20px 60px rgba(18,18,18,0.35);
  --shadow-focus: 0 0 0 2px #FAFAF7, 0 0 0 4px #111111;

  /* Border */
  --border-hair: 1px solid rgba(18,18,18,0.14);
  --border-hair-strong: 1px solid rgba(18,18,18,0.35);
  --border-accent: 1px solid #B5502E;

  /* Breakpoints (reference only, used in media queries) */
  --bp-xs: 375px;
  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* Z-index */
  --z-base: 1;
  --z-header: 50;
  --z-filterbar: 40;
  --z-whatsapp: 60;
  --z-skeleton: 5;
  --z-lightbox: 100;
  --z-toast: 110;

  /* Motion */
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 450ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-editorial: cubic-bezier(.2,.8,.2,1);
  /* Curvas de movimiento igualadas a la referencia (medidas.md §0.3).
     Las animaciones por fotograma usan las mismas cúbicas desde js/curvas.js. */
  --ease-p: cubic-bezier(.725,0,.175,1);
  --ease-a: cubic-bezier(.75,0,.175,1);
  --ease-e: cubic-bezier(.4,0,.25,1);
  --ease-c1: cubic-bezier(.6,0,.3,1);
  --ease-c3: cubic-bezier(.165,.84,.44,1);
  --ease-c7: cubic-bezier(.15,0,.25,1);
}