:root{
  /* ---- Brand core (from One Page Brand Guidelines) ---- */
  --teal: #00B1AC;        /* Deep Teal   — primary */
  --purple: #753BBD;      /* Royal Purple */
  --ink: #1F2A44;         /* Soft Black  — grounding text/surface */
  --tangerine: #FF9E1B;   /* Tangerine */
  --poppy: #EE2938;       /* Poppy Red */

  /* ---- Teal ramp (primary) ---- */
  --teal-700: #00726F;
  --teal-600: #008C88;
  --teal-500: #00B1AC;
  --teal-300: #6ED2CE;
  --teal-100: #C7EDEB;
  --teal-50:  #E9F8F7;

  /* ---- Purple ramp ---- */
  --purple-700: #4E2382;
  --purple-500: #753BBD;
  --purple-300: #B18BDD;
  --purple-100: #E4D8F2;
  --purple-50:  #F3EDFA;

  /* ---- Ink / neutral ramp (tinted with the Soft Black hue, not pure grey) ---- */
  --ink-900: #141D30;
  --ink-800: #1F2A44;   /* Soft Black */
  --ink-700: #34405C;
  --ink-600: #4C5872;
  --ink-500: #6B7690;
  --ink-400: #97A0B4;
  --ink-300: #C2C8D4;
  --ink-200: #DEE2EA;
  --ink-100: #EEF0F5;
  --ink-50:  #F7F8FB;
  --white:   #FFFFFF;

  /* ---- Warm accents ---- */
  --tangerine-500: #FF9E1B;
  --tangerine-100: #FFEACB;
  --poppy-500: #EE2938;
  --poppy-100: #FBD4D7;

  /* ================= Semantic aliases ================= */
  --color-primary: var(--teal-500);
  --color-primary-hover: var(--teal-600);
  --color-primary-active: var(--teal-700);
  --color-secondary: var(--purple-500);
  --color-secondary-hover: var(--purple-700);
  --color-accent: var(--tangerine-500);

  --text-strong: var(--ink-800);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-brand: var(--white);
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);

  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-800);
  --surface-brand: var(--teal-500);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-400);
  --border-focus: var(--teal-500);

  /* Feedback */
  --color-success: #1F9E6B;
  --color-warning: var(--tangerine-500);
  --color-danger: var(--poppy-500);
  --color-info: var(--purple-500);
}