:root {
  /* ─── Marca · roles primarios ─────────────────────────── */
  --color-primary:        #B8462C;   /* terracota · CTAs, marca */
  --color-primary-hover:  #A03D26;   /* -8% lightness */
  --color-primary-muted:  #E8C9BD;   /* 18% mix con bg */
  --color-secondary:      #C8902B;   /* mostaza · progreso, destacar */
  --color-accent:         #5F6E48;   /* olivo · confirmación, frescura */
  --color-accent-hover:   #4F5C3C;

  /* ─── Superficies ─────────────────────────────────────── */
  --color-bg:             #FAF4E8;   /* lienzo principal */
  --color-surface:        #F2EADC;   /* cards, contenedores */
  --color-surface-2:      #EDDFC4;   /* alt elevation */

  /* ─── Texto ───────────────────────────────────────────── */
  --color-text:           #1E1A14;
  --color-text-muted:     #6B5F4E;
  --color-text-inverse:   #FAF4E8;

  /* ─── Estructura ──────────────────────────────────────── */
  --color-border:         rgba(30, 26, 20, 0.10);
  --color-border-strong:  rgba(30, 26, 20, 0.20);
  --color-focus-ring:     rgba(184, 70, 44, 0.35);

  /* ─── Estados semánticos ──────────────────────────────── */
  --color-success:        #5F6E48;
  --color-warning:        #C8902B;
  --color-danger:         #9C3A2A;
}