:root {
  /* ---- Color: roles fijos según brief ---- */
  --color-carbon: #1B1512;      /* fondos oscuros y texto principal sobre claro */
  --color-crema: #F3ECE0;       /* fondos claros y texto sobre oscuro */
  --color-brasa: #C9502B;       /* acento principal: CTA, enlaces activos, hover */
  --color-oro: #C9A15A;         /* acento secundario: íconos, detalles, precios */
  --color-romero: #3F4A3B;      /* acento terciario: ingredientes frescos, insignias */

  /* ---- Derivados (mismos tonos, distinta opacidad/luminosidad) ---- */
  --color-carbon-80: rgba(27, 21, 18, 0.8);
  --color-carbon-60: rgba(27, 21, 18, 0.6);
  --color-carbon-15: rgba(27, 21, 18, 0.1);
  --color-crema-70: rgba(243, 236, 224, 0.7);
  --color-crema-40: rgba(243, 236, 224, 0.4);
  --color-brasa-dark: #A63E1F;
  --color-brasa-15: rgba(201, 80, 43, 0.14);
  --color-oro-15: rgba(201, 161, 90, 0.16);
  --color-romero-15: rgba(63, 74, 59, 0.12);

  /* ---- Tipografía ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

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

  /* Escala tipográfica fluida */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.7rem + 2vw, 3.4rem);
  --fs-3xl: clamp(2.8rem, 2rem + 3.5vw, 5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Espaciado ---- */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 2px 10px rgba(27, 21, 18, 0.06);
  --shadow-md: 0 12px 32px rgba(27, 21, 18, 0.1);
  --shadow-brasa: 0 10px 28px rgba(201, 80, 43, 0.28);

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-base: 0.35s var(--ease);
}