:root {
  /* Brand color tokens (single source for admin & landing) */
  --color-brand-purple: #906ed8;
  --color-brand-purple-bright: #6d28d9;
  --color-brand-purple-dark: #2a1257;
  --color-brand-purple-extra-dark: #0f0030;
  --color-brand-purple-extra-light: #ede9fe;
  --color-brand-purple-light: #b288ff;
  --color-brand-purple-bleak: #443b68;
  --color-brand-purple-bleak-alt: #433a67;
  --color-brand-purple-muted: #756d96;
  --color-brand-purple-accent: #8b5cf6;
  --color-brand-purple-deep-accent: #4e33a6;

  --color-brand-gray: #64748b;
  --color-brand-gray-dark: #475569;
  --color-brand-gray-extra-dark: #1e293b;
  --color-brand-gray-extra-light: #f3f4fd;
  --color-brand-gray-light: #e2e8f0;
  --color-brand-gray-highlight: #c0cfe2;

  --color-brand-blue: #3730a3;
  --color-brand-green-dark: #12b981;
  --color-brand-green-darker: #0d9968;
  --color-brand-red-dark: #b22020;
  --color-brand-green-light: #b4ead5;
  --color-brand-green-underline: #b4d4c5;

  --color-card-gradient-start: #f8f9fa;
  --color-card-gradient-alt: #f0f2ed;
  --color-surface-3: #fafaff;

  /* Shared hex variables for direct CSS usage */
  --color-primary: var(--color-brand-purple-bright);
  --color-primary-400: var(--color-brand-purple-light);
  --color-primary-700: var(--color-brand-purple-dark);

  --color-secondary: var(--color-brand-green-dark);
  --color-secondary-700: var(--color-brand-green-darker);

  --color-surface-1: #FFFFFF;
  --color-surface-2: #E2E6DA;

  /* Gray color palette */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Base neutrals */
  --color-text: #111827; /* gray-900 */

  /* RGB tokens for Tailwind opacity support */
  --twc-brand-purple: 144 110 216;
  --twc-brand-purple-bright: 109 40 217;
  --twc-brand-purple-dark: 42 18 87;
  --twc-brand-purple-extra-dark: 15 0 48;
  --twc-brand-purple-extra-light: 237 233 254;
  --twc-brand-purple-light: 178 136 255;
  --twc-brand-purple-bleak: 67 58 104;
  --twc-brand-purple-bleak-alt: 67 58 103;
  --twc-brand-purple-muted: 117 109 150;
  --twc-brand-purple-accent: 139 92 246;
  --twc-brand-purple-deep-accent: 78 51 166;

  --twc-brand-gray: 100 116 139;
  --twc-brand-gray-dark: 71 85 105;
  --twc-brand-gray-extra-dark: 30 41 59;
  --twc-brand-gray-extra-light: 243 244 253;
  --twc-brand-gray-light: 226 232 240;
  --twc-brand-gray-highlight: 192 207 226;

  --twc-brand-blue: 55 48 163;
  --twc-brand-green-dark: 18 185 129;
  --twc-brand-green-darker: 13 153 104;
  --twc-brand-red-dark: 178 32 32;
  --twc-brand-green-light: 180 234 213;
  --twc-brand-green-underline: 180 212 197;

  --twc-card-gradient-start: 248 249 250;
  --twc-card-gradient-alt: 240 242 237;
  --twc-surface-3: 250 250 255;

  --twc-primary: var(--twc-brand-purple-bright);
  --twc-primary-400: var(--twc-brand-purple-light);
  --twc-primary-700: var(--twc-brand-purple-dark);

  --twc-secondary: var(--twc-brand-green-dark);
  --twc-secondary-700: var(--twc-brand-green-darker);

  --twc-surface-1: 255 255 255;
  --twc-surface-2: 226 230 218;
  --twc-text: 17 24 39;

  /* RGB variables for gray colors */
  --twc-gray-50: 249 250 251;
  --twc-gray-100: 243 244 246;
  --twc-gray-200: 229 231 235;
  --twc-gray-300: 209 213 219;
  --twc-gray-400: 156 163 175;
  --twc-gray-500: 107 114 128;
  --twc-gray-600: 75 85 99;
  --twc-gray-700: 55 65 81;
  --twc-gray-800: 31 41 55;
  --twc-gray-900: 17 24 39;
}