/* Slidr color tokens, light-first.
   Core brand: Moonstone (primary fill), Rose (CTA, sparing), Space Cadet (text/dark), Blizzard (bg).
   Accessibility: Moonstone 500 is a FILL, not text on white. Moonstone text uses 700 (#007F8B).
   Rose text uses 600 (#D60065). Primary buttons = Space Cadet text on Moonstone. */
:root {
  /* Brand core */
  --moonstone: #00BBCC;
  --rose: #FF0078;
  --spacecadet: #24283E;
  --blizzard: #FFFFFF;

  /* Moonstone ramp */
  --moonstone-50: #EBFAFB;
  --moonstone-100: #D6F4F7;
  --moonstone-200: #A8E8EE;
  --moonstone-300: #70D9E2;
  --moonstone-400: #33C9D6;
  --moonstone-500: #00BBCC;
  --moonstone-600: #009DAB;
  --moonstone-700: #007F8B;
  --moonstone-800: #00616A;
  --moonstone-900: #00474E;

  /* Rose ramp */
  --rose-50: #FFEBF4;
  --rose-100: #FFD6E9;
  --rose-200: #FFA8D1;
  --rose-300: #FF70B3;
  --rose-400: #FF3393;
  --rose-500: #FF0078;
  --rose-600: #D60065;
  --rose-700: #AD0052;
  --rose-800: #85003E;
  --rose-900: #61002E;

  /* Space Cadet ramp */
  --sc-50: #EDEEF0;
  --sc-100: #DCDDE0;
  --sc-200: #B5B6BD;
  --sc-300: #848793;
  --sc-400: #505365;
  --sc-500: #24283E;
  --sc-600: #1E2234;
  --sc-700: #181B2A;
  --sc-800: #131520;
  --sc-900: #0E0F18;

  /* Neutral (cool gray) ramp */
  --n-50: #F7F7F8;
  --n-100: #EBECEE;
  --n-200: #D4D6DB;
  --n-300: #BABCC5;
  --n-400: #8C909E;
  --n-500: #5B6075;
  --n-600: #51566B;
  --n-700: #484D62;
  --n-800: #3E4358;
  --n-900: #34394E;

  /* Semantic (AA on white) + soft backgrounds */
  --success: #157A47;
  --success-bg: #E7F6EE;
  --warning: #8A5800;
  --warning-bg: #FBF1DD;
  --error: #C81E40;
  --error-bg: #FBE9ED;
  --info: #0E6F92;
  --info-bg: #E4F2F8;

  /* Role tokens */
  --bg: var(--n-50);
  --surface: #FFFFFF;
  --surface-sunken: var(--n-50);
  --text: var(--sc-500);
  --text-muted: var(--n-600);
  --text-subtle: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-300);

  --primary: var(--moonstone-500);
  --primary-hover: var(--moonstone-600);
  --on-primary: var(--sc-500);
  --primary-text: var(--moonstone-700); /* Moonstone text on white, AA */

  --cta: var(--rose-500);
  --cta-hover: var(--rose-600);
  --on-cta: #FFFFFF;
  --cta-text: var(--rose-600); /* Rose text on white, AA */

  --link: var(--moonstone-700);
  --focus: var(--moonstone-500);
  --focus-ring: 0 0 0 3px var(--moonstone-300);
}