:root{
  /* --- Surfaces (warm paper) --- */
  --color-bg-primary:#F5F1E8;
  --color-bg-secondary:#EDE7D9;
  --color-surface:#FBF8F1;
  --color-surface-alt:#EAE3D3;

  /* --- Ink (deep teal) --- */
  --color-ink:#0D2B31;
  --color-ink-deep:#081F24;

  /* --- Text --- */
  --color-text-primary:#16262A;
  --color-text-secondary:#55605E;
  --color-text-on-ink:#F5F1E8;
  --color-text-on-ink-soft:#A9BEBC;

  /* --- Lines --- */
  --color-line:#E3DCCB;
  --color-line-on-ink:#1F454C;

  /* --- Accent (terracotta) --- */
  --color-accent:#E8562F;
  --color-accent-text:#AC3712;
  --color-accent-soft:#F7DDD1;
  --color-accent-hover:#8A2A0C;
  --color-accent-on-ink:#FF7A4D;
  --color-on-accent:#2A1206;

  /* --- Semantic --- */
  --color-success:#4E5F33;
  --color-success-soft:#E0E4CD;
  --color-error:#8E3520;
  --color-error-soft:#F2DBD3;
  --color-mint:#7FBFAE;

  --gradient-accent:linear-gradient(135deg,#F0673D 0%,#AC3712 100%);

  /* --- Semantic aliases: use these in components --- */
  --surface-page:var(--color-bg-primary);
  --surface-page-alt:var(--color-bg-secondary);
  --surface-card:var(--color-surface);
  --surface-card-alt:var(--color-surface-alt);
  --surface-inverse:var(--color-ink);
  --surface-inverse-deep:var(--color-ink-deep);
  --surface-accent:var(--color-accent);
  --surface-accent-soft:var(--color-accent-soft);

  --text-body:var(--color-text-primary);
  --text-muted:var(--color-text-secondary);
  --text-link:var(--color-accent-text);
  --text-link-hover:var(--color-accent-hover);
  --text-inverse:var(--color-text-on-ink);
  --text-inverse-muted:var(--color-text-on-ink-soft);
  --text-on-accent:var(--color-on-accent);

  --border-default:var(--color-line);
  --border-strong:var(--color-ink);
  --border-inverse:var(--color-line-on-ink);
  --border-focus:var(--color-accent);

  --state-hover-ink:var(--color-ink-deep);
  --state-hover-accent:var(--color-accent-hover);
  --focus-ring:0 0 0 3px rgba(232,86,47,0.28);
  --overlay-scrim:rgba(8,31,36,0.52);
}