:root {
  /* ---- Base palette ---- */
  --ink-950: #08202F;   /* Properly navy — primary text, dark surfaces, wordmark */
  --ink-800: #123043;
  --ink-700: #1D4258;
  --ink-500: #4C6A78;
  --ink-300: #8CA3AC;
  --ink-150: #C4D2D6;
  --ink-100: #DCE5E7;

  --paper-0:   #FFFFFF;
  --paper-50:  #FCFCFB;  /* near-white app background — matches properlyinvesting.com.au and the Coposit reference */
  --paper-100: #F3F2EF;
  --paper-200: #E9E7E2;

  --line-100: #E7E3DA;   /* hairline borders on paper */
  --line-200: #D8D2C5;
  --line-inverse: rgba(255,255,255,0.16);

  --cyan-100: #D9FAFF;
  --cyan-300: #8FF1FF;   /* hand-drawn underline / highlight tint — sampled from live marketing use */
  --cyan-500: #29E1FE;   /* Properly cyan — the one accent */
  --cyan-600: #10B7D6;
  --cyan-700: #0B8CA6;
  --pure-black: #000000; /* solid pill-CTA fill — buttons sit on true black, not navy, per live site */

  /* Stage accents — muted tints used ONLY to distinguish Acquire / Amplify / Ascend content, never as primary UI color */
  --stage-acquire: #29E1FE;   /* Acquire — cyan (entry) */
  --stage-amplify: #E3A93C;   /* Amplify — warm amber (cash-flow, growth) */
  --stage-ascend:  #4C6A78;   /* Ascend — deep slate (commercial, mature) */

  --success-500: #2E9E5B;
  --warning-500: #D98A1F;
  --critical-500: #C4483A;
}

:root {
  /* ---- Semantic aliases ---- */
  --surface-page: var(--paper-50);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-100);
  --surface-inverse: var(--ink-950);
  --surface-accent: var(--cyan-500);
  --surface-accent-tint: var(--cyan-100);

  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-300);
  --text-inverse: var(--paper-0);
  --text-inverse-secondary: var(--ink-150);
  --text-on-accent: var(--ink-950);
  --text-link: var(--ink-950);

  --border-subtle: var(--line-100);
  --border-default: var(--line-200);
  --border-inverse: var(--line-inverse);
  --border-focus: var(--ink-950);

  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-active: var(--cyan-700);
  --accent-tint: var(--cyan-100);

  --cta-fill: var(--pure-black);      /* primary/pill button fill */
  --cta-fill-hover: #1A1A1A;
}