:root {
  /* ─── Primary Orange ──────────────────────────────────────── */
  --color-primary-50:  #FFF0E6;
  --color-primary-100: #FFD4B3;
  --color-primary-200: #FFAA66;
  --color-primary:     #FF6600;
  --color-primary-600: #CC5200;
  --color-primary-800: #8F3900;
  --color-primary-900: #4A1D00;

  /* ─── Ink / Neutral ───────────────────────────────────────── */
  --color-ink-50:  #FAFAFA;
  --color-ink-100: #F2F2F2;
  --color-ink-200: #E0E0E0;
  --color-ink-300: #C4C4C4;
  --color-ink-400: #888888;
  --color-ink-500: #666666;
  --color-ink-600: #444444;
  --color-ink-700: #2E2E2E;
  --color-ink-800: #1A1A1A;
  --color-ink-900: #0D0D0D;

  /* ─── Canvas / Surface ────────────────────────────────────── */
  --color-canvas:  #FFFDF9;
  --color-surface: #F7F4EF;
  --color-muted:   #EDE8E0;
  --color-border:  #DDD8CF;

  /* ─── Steel Teal ──────────────────────────────────────────── */
  --color-teal-50:  #F0FBFF;
  --color-teal-100: #BAE8F5;
  --color-teal-200: #67CCEC;
  --color-teal:     #0F7490;
  --color-teal-600: #0A5C73;
  --color-teal-800: #064455;
  --color-teal-900: #032C38;

  /* ─── Semantic States ─────────────────────────────────────── */
  --color-success:         #16A34A;
  --color-success-surface: #F0FDF4;
  --color-error:           #DC2626;
  --color-error-surface:   #FEF2F2;
  --color-warning:         #D97706;
  --color-warning-surface: #FFFBEB;

  /* ─── Semantic Aliases ────────────────────────────────────── */
  --text-primary:   var(--color-ink-800);
  --text-secondary: var(--color-ink-600);
  --text-tertiary:  var(--color-ink-400);
  --text-on-dark:   #FFFFFF;
  --text-on-orange: var(--color-ink-800);   /* white fails WCAG AA on #FF6600 */

  --surface-page:   var(--color-canvas);
  --surface-card:   var(--color-surface);
  --surface-inset:  var(--color-muted);

  --border-default: var(--color-border);
  --border-divider: var(--color-ink-200);
}