:root {
  /* Brand & accent */
  --black: #000000;
  --near-black: #17171c;
  --green-deep: #003c33;
  --navy-dark: #071829;
  --blue-action: #1863dc;
  --coral: #ff7759;
  --coral-soft: #ffad9b;

  /* Surface */
  --white: #ffffff;
  --stone-soft: #eeece7;
  --green-wash: #edfce9;
  --blue-wash: #f1f5ff;
  --border-card: #f2f2f2;

  /* Text & rules */
  --ink: #212121;
  --slate-muted: #93939f;
  --slate: #75758a;
  --hairline: #d9d9dd;
  --border-light: #e5e7eb;

  /* Semantic raw */
  --focus-blue: #4c6ee6;
  --focus-violet: #9b60aa;
  --error-red: #b30000;

  /* Semantic aliases — light surfaces */
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-card-warm: var(--stone-soft);
  --surface-wash-green: var(--green-wash);
  --surface-wash-blue: var(--blue-wash);
  --surface-dark: var(--near-black);
  --surface-dark-green: var(--green-deep);
  --surface-dark-navy: var(--navy-dark);

  --text-primary: var(--black);
  --text-body: var(--ink);
  --text-muted: var(--slate-muted);
  --text-tertiary: var(--slate);
  --text-link: var(--blue-action);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.62);

  --rule: var(--hairline);
  --rule-soft: var(--border-light);
  --rule-card: var(--border-card);
  --rule-on-dark: rgba(255, 255, 255, 0.18);

  --accent-editorial: var(--coral);
  --accent-editorial-soft: var(--coral-soft);

  --focus-ring: var(--focus-blue);
  --focus-input: var(--focus-violet);
  --state-error: var(--error-red);

  --btn-primary-bg: var(--near-black);
  --btn-primary-fg: var(--white);
  --btn-inverse-bg: var(--white);
  --btn-inverse-fg: var(--near-black);
}