:root {
  /* Muestras del mockup (no identidad definitiva) */
  --color-background: #F9F3ED;
  --color-surface: #F6F2EC;
  --color-cream: #F9F2E8;
  --color-brand: #B4863B;
  --color-heading: #190A0E;
  --color-muted: #625C58;
  --color-divider-soft: #F8F1E9;

  /* Derivados accesibles medidos (ver instructions.md):
     brand-strong 4.8:1 sobre marfil; control-border 5.75:1 */
  --color-brand-strong: #8A6527;
  --color-control-border: #7A5A24;

  /* Transparencias derivadas de la paleta (sin colores nuevos) */
  --color-background-translucent: rgb(249 243 237 / 0.86);
  --color-hairline: rgb(25 10 14 / 0.08);
  --color-brand-tint: rgb(180 134 59 / 0.14);

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-display: clamp(2.125rem, 8.5vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --radius-card: 1.25rem;
  --radius-card-lg: 1.75rem;
  --radius-control: 0.875rem;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgb(25 10 14 / 0.04), 0 6px 18px rgb(25 10 14 / 0.06);
  --shadow-raised: 0 2px 6px rgb(25 10 14 / 0.06), 0 18px 40px rgb(25 10 14 / 0.1);
  --shadow-brand: 0 6px 18px rgb(180 134 59 / 0.32);
  --shadow-nav: 0 -1px 0 var(--color-hairline), 0 -8px 24px rgb(25 10 14 / 0.06);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-base: 0.2s var(--ease-out);

  --icon-size: 1.5rem;
  --icon-size-small: 1.25rem;

  --tap-target: 3rem;
  --content-width: 72rem;
  --header-height: 3.75rem;
  --public-nav-height: 4.25rem;
}