:root{
  /* ---------- Brand core ---------- */
  --mch-orange:#EA6942;      /* naranja — the single accent */
  --mch-grey:#353637;        /* gris — the ink */
  --mch-beige:#F2EEE3;       /* beige — the paper */

  /* ---------- Orange ramp ---------- */
  --orange-100:#FDEDE7;
  --orange-200:#F9CDBD;
  --orange-300:#F3A587;
  --orange-400:#EE8560;
  --orange-500:#EA6942;      /* = --mch-orange */
  --orange-600:#D5522B;
  --orange-700:#AE4021;
  --orange-800:#7C2C16;

  /* ---------- Grey / ink ramp ---------- */
  --grey-000:#FFFFFF;
  --grey-050:#F7F6F3;
  --grey-100:#E7E5DE;
  --grey-200:#CFCCC3;
  --grey-300:#A9A7A0;
  --grey-400:#7C7C79;
  --grey-500:#5A5A5A;
  --grey-600:#454647;
  --grey-700:#353637;        /* = --mch-grey */
  --grey-800:#282929;
  --grey-900:#1B1C1C;

  /* ---------- Beige / paper ramp ---------- */
  --beige-050:#FAF8F2;
  --beige-100:#F2EEE3;       /* = --mch-beige */
  --beige-200:#E8E2D2;
  --beige-300:#D9D1BC;
  --beige-400:#C2B89F;

  /* ---------- Semantic: surfaces ---------- */
  --surface-page:var(--beige-100);
  --surface-page-alt:var(--beige-050);
  --surface-card:var(--grey-000);
  --surface-sunken:var(--beige-200);
  --surface-inverse:var(--grey-700);
  --surface-inverse-alt:var(--grey-800);
  --surface-accent:var(--orange-500);
  --surface-accent-soft:var(--orange-100);

  /* ---------- Semantic: text ---------- */
  --text-strong:var(--grey-800);
  --text-body:var(--grey-700);
  --text-muted:var(--grey-400);
  --text-subtle:var(--grey-300);
  --text-accent:var(--orange-600);
  --text-on-accent:var(--beige-050);
  --text-on-inverse:var(--beige-100);
  --text-on-inverse-muted:var(--grey-300);

  /* ---------- Semantic: lines ---------- */
  --line-hairline:var(--beige-300);
  --line-strong:var(--grey-700);
  --line-inverse:var(--grey-600);
  --line-accent:var(--orange-500);

  /* ---------- Semantic: interaction ---------- */
  --action-primary-bg:var(--orange-500);
  --action-primary-bg-hover:var(--orange-600);
  --action-primary-bg-active:var(--orange-700);
  --action-primary-fg:var(--beige-050);
  --action-secondary-bg:var(--grey-700);
  --action-secondary-bg-hover:var(--grey-800);
  --action-secondary-fg:var(--beige-100);
  --action-ghost-fg:var(--grey-700);
  --action-ghost-bg-hover:var(--beige-200);
  --focus-ring:var(--orange-500);
  --disabled-fg:var(--grey-300);
  --disabled-bg:var(--beige-200);

  /* ---------- Semantic: status ---------- */
  --status-success:#3F7D57;
  --status-success-soft:#E4EFE7;
  --status-warning:#C98A1E;
  --status-warning-soft:#F8EEDA;
  --status-danger:#B33A26;
  --status-danger-soft:#F8E4E0;
  --status-info:var(--grey-600);
  --status-info-soft:var(--beige-200);
}

/* Inverted context — put on any dark section wrapper. */
[data-theme="dark"]{
  --surface-page:var(--grey-700);
  --surface-page-alt:var(--grey-800);
  --surface-card:var(--grey-600);
  --surface-sunken:var(--grey-800);
  --text-strong:var(--beige-050);
  --text-body:var(--beige-100);
  --text-muted:var(--grey-300);
  --text-subtle:var(--grey-400);
  --text-accent:var(--orange-400);
  --line-hairline:var(--grey-600);
  --line-strong:var(--beige-100);
  --action-ghost-fg:var(--beige-100);
  --action-ghost-bg-hover:var(--grey-600);
  --action-secondary-bg:var(--beige-100);
  --action-secondary-bg-hover:var(--beige-050);
  --action-secondary-fg:var(--grey-700);
}