/**
 * Design System — Color Palette
 * All shades use naming: --ds-{color}-100 (lightest) to --ds-{color}-900 (darkest).
 * Base: --ds-base-black, --ds-base-white (excluded from 100–900).
 */
:root {
  /* Base (excluded from 100–900) */
  --ds-base-black: #000000;
  --ds-base-white: #FFFFFF;

  /* Blue: 100 (lightest) → 900 (darkest) */
  --ds-blue-100: #E9F2FF;
  --ds-blue-200: #CCE0FF;
  --ds-blue-300: #85B8FF;
  --ds-blue-400: #579DFF;
  --ds-blue-500: #388BFF;
  --ds-blue-600: #1D7AFC;
  --ds-blue-700: #0C66E4;
  --ds-blue-800: #0055CC;
  --ds-blue-900: #09326C;

  /* green: 100 → 900 */
  --ds-green-100: #E8F3F0;
  --ds-green-200: #D2E7E2;
  --ds-green-300: #A5CEC4;
  --ds-green-400: #77B6A7;
  --ds-green-500: #4A9D89;
  --ds-green-600: #1D856C;
  --ds-green-700: #186F5A;
  --ds-green-800: #135948;
  --ds-green-900: #0F4336;

  /* Primary (purple): 100 → 900 */
  --ds-primary-100: #F6F1FB;
  --ds-primary-200: #EDE3F8;
  --ds-primary-300: #E4D5F4;
  --ds-primary-400: #C8ABE9;
  --ds-primary-500: #B68FE2;
  --ds-primary-600: #A473DB;
  --ds-primary-700: #8A5AC1;
  --ds-primary-800: #7140A8;
  --ds-primary-900: #58278E;

  /* Red: 100 → 900 */
  --ds-red-100: #FFF2EF;
  --ds-red-200: #FFE6DE;
  --ds-red-300: #FFCDBE;
  --ds-red-400: #FFB39D;
  --ds-red-500: #FF9A7D;
  --ds-red-600: #FF815C;
  --ds-red-700: #E56843;
  --ds-red-800: #CC4E29;
  --ds-red-900: #B23510;

  /* Yellow: 100 → 800 (8 shades) */
  --ds-yellow-100: #FFF3CD;
  --ds-yellow-200: #FFE69C;
  --ds-yellow-300: #FFDA6A;
  --ds-yellow-400: #FFCD39;
  --ds-yellow-500: #FFC107;
  --ds-yellow-600: #CC9A06;
  --ds-yellow-700: #997404;
  --ds-yellow-800: #664D03;
  --ds-yellow-900: #332701;

  /* Gray: 100 → 900 */
  --ds-gray-100: #F6F7FB;
  --ds-gray-200: #EBEEF5;
  --ds-gray-300: #DADCE3;
  --ds-gray-400: #C0C5D1;
  --ds-gray-500: #A5AAB8;
  --ds-gray-600: #7D8599;
  --ds-gray-700: #4E5466;
  --ds-gray-800: #373F52;
  --ds-gray-900: #1F2433;

  /* Semantic aliases for components: enabled=800, hover=700, pressed=900 */
  --ds-color-primary: var(--ds-primary-800);
  --ds-color-primary-hover: var(--ds-primary-700);
  --ds-color-primary-active: var(--ds-primary-900);
  --ds-color-secondary: var(--ds-gray-800);
  --ds-color-secondary-hover: var(--ds-gray-700);
  --ds-color-secondary-active: var(--ds-gray-900);
  --ds-color-error: var(--ds-red-800);
  --ds-color-error-hover: var(--ds-red-700);
  --ds-color-error-active: var(--ds-red-900);
  /* Focus ring: color-800 at 20% opacity */
  --ds-focus-ring-primary: 0px 0px 0px 3px #7140A833;
  --ds-focus-ring-secondary: 0px 0px 0px 3px #373F5233;
  --ds-focus-ring-error: 0px 0px 0px 3px #CC4E2933;
}