/* =============================================================================
   RESTOKE DESIGN TOKENS - COLOR PALETTE
   =============================================================================
   Load order: 00-colors.css must be loaded before 00-foundation.css

   Color scales follow a 25-950 range where:
   - 25-100: Light backgrounds, subtle fills
   - 200-300: Borders, dividers, disabled states
   - 400-500: Primary/base color for the palette
   - 600-700: Hover states, darker accents
   - 800-950: Text on light backgrounds, dark fills
   ============================================================================= */

@layer base {
    :root {

      /* ==========================================
         GRAY SCALE (Light Mode)
         ==========================================
         Foundation of the color system. Used for:
         - Text (primary, secondary, tertiary)
         - Form fields and inputs
         - Backgrounds and surfaces
         - Dividers and borders
         - Icons and placeholder text
         ========================================== */
      --rs-gray-25: #FCFCFD;   /* Subtle backgrounds, hover states on white */
      --rs-gray-50: #FAFAFA;   /* Page backgrounds, alternate table rows */
      --rs-gray-100: #F5F5F5;  /* Card backgrounds, disabled input backgrounds */
      --rs-gray-200: #E9EAEB;  /* Borders, dividers, input borders */
      --rs-gray-300: #D5D7DA;  /* Stronger borders, disabled text backgrounds */
      --rs-gray-400: #A4A7AE;  /* Placeholder text, disabled icons */
      --rs-gray-500: #717680;  /* Secondary text, icons */
      --rs-gray-600: #535862;  /* Body text, labels */
      --rs-gray-700: #414651;  /* Headings, emphasized text */
      --rs-gray-800: #252B37;  /* Primary headings, high contrast text */
      --rs-gray-900: #181D27;  /* Near-black text, maximum contrast */
      --rs-gray-950: #0A0D12;  /* Pure dark, use sparingly */

      /* Bootstrap Gray Aliases */
      --bs-gray-100: var(--rs-gray-100);
      --bs-gray-200: var(--rs-gray-200);
      --bs-gray-300: var(--rs-gray-300);
      --bs-gray-400: var(--rs-gray-400);
      --bs-gray-500: var(--rs-gray-500);
      --bs-gray-600: var(--rs-gray-600);
      --bs-gray-700: var(--rs-gray-700);
      --bs-gray-800: var(--rs-gray-800);
      --bs-gray-900: var(--rs-gray-900);

      /* ==========================================
         GRAY SCALE (Dark Mode)
         ==========================================
         Purposefully desaturated gray palette optimized
         for dark mode interfaces. Use these instead of
         inverting light mode grays.
         ========================================== */
      --rs-gray-dark-25: #FAFAFA;   /* Primary text on dark backgrounds */
      --rs-gray-dark-50: #E9EAEB;   /* Secondary text, subtitles */
      --rs-gray-dark-100: #CECFD2;  /* Tertiary text, metadata */
      --rs-gray-dark-200: #94979C;  /* Muted text, timestamps */
      --rs-gray-dark-300: #85888E;  /* Icons, placeholder text */
      --rs-gray-dark-400: #61656C;  /* Disabled text, subtle icons */
      --rs-gray-dark-500: #535862;  /* Borders on dark surfaces */
      --rs-gray-dark-600: #414651;  /* Elevated surface backgrounds */
      --rs-gray-dark-700: #252B37;  /* Card backgrounds */
      --rs-gray-dark-800: #181D27;  /* Secondary backgrounds */
      --rs-gray-dark-900: #0A0D12;  /* Primary dark background */
      --rs-gray-dark-950: #0A0D12;  /* Deepest background */

      /* ==========================================
         BRAND (Orange/Coral)
         ==========================================
         Primary brand color used across all interactive
         elements: buttons, links, inputs, focus states.
         Defines the overall feel and brand identity.

         Usage:
         - 25-100: Brand-tinted backgrounds (CTA sections, highlights)
         - 200-300: Secondary buttons, soft badges
         - 400-500: Primary buttons, links, active states
         - 600-700: Hover states, pressed buttons
         - 800-950: Text on brand backgrounds
         ========================================== */
      --rs-brand-25: #FFFAF5;   /* Subtle brand tint backgrounds */
      --rs-brand-50: #FFF4ED;   /* Light brand backgrounds, badges */
      --rs-brand-100: #FFE5D4;  /* Secondary button backgrounds, highlights */
      --rs-brand-200: #FFC7A8;  /* Secondary button borders, soft accents */
      --rs-brand-300: #FFA070;  /* Icons on brand backgrounds */
      --rs-brand-400: #FF7843;  /* Hover state for secondary brand elements */
      --rs-brand-500: #FF642C;  /* PRIMARY: Buttons, links, interactive elements */
      --rs-brand-600: #EF2C07;  /* Hover state for primary buttons */
      --rs-brand-700: #C61C08;  /* Active/pressed state */
      --rs-brand-800: #9D190F;  /* Text on light brand backgrounds */
      --rs-brand-900: #7E1810;  /* High contrast brand text */
      --rs-brand-950: #440806;  /* Maximum contrast, dark brand badges */
      --rs-brand-solid: var(--rs-brand-500);
      --rs-brand-solid-hover: var(--rs-brand-600);

      /* Primary Color */
      --rs-primary: var(--rs-brand-500);  /* Source of truth for primary color */

      /* Bootstrap Brand Aliases */
      --bs-primary: var(--rs-primary);
      --bs-primary-rgb: 255, 100, 44;
      --bs-primary-text: #FE4611;  /* Higher contrast for text usage */
      --bs-secondary-alt: var(--rs-brand-200);
      --bs-secondary-alt-numbers: 255, 199, 168;

      /* ==========================================
         ERROR (Red)
         ==========================================
         Used for error states and destructive actions.
         Communicates critical, negative, or urgent actions
         (e.g., deleting a user, form validation errors).

         Usage:
         - 25-100: Error message backgrounds, alert banners
         - 200-300: Error badges, soft indicators
         - 400-500: Error icons, destructive button fills
         - 600-700: Hover states for destructive actions
         - 800-950: Error text, high contrast warnings
         ========================================== */
      --rs-error-25: #FFFBFA;   /* Subtle error background tint */
      --rs-error-50: #FEF3F2;   /* Error alert backgrounds */
      --rs-error-100: #FEE4E2;  /* Error badge backgrounds */
      --rs-error-200: #FECDCA;  /* Error borders, soft indicators */
      --rs-error-300: #FDA29B;  /* Error icons on light backgrounds */
      --rs-error-400: #F97066;  /* Secondary destructive elements */
      --rs-error-500: #F04438;  /* PRIMARY: Error icons, destructive buttons */
      --rs-error-600: #D92D20;  /* Hover state for destructive buttons */
      --rs-error-700: #B42318;  /* Active/pressed destructive state */
      --rs-error-800: #912018;  /* Error text on light backgrounds */
      --rs-error-900: #7A271A;  /* High contrast error text */
      --rs-error-950: #55160C;  /* Maximum contrast error text */

      /* Bootstrap Danger Aliases */
      --bs-danger: var(--rs-error-500);
      --bs-danger-numbers: 240, 68, 56;

      /* ==========================================
         WARNING (Yellow/Amber)
         ==========================================
         Communicates potentially destructive actions or
         "on hold" states. Used in confirmations to grab
         user attention before proceeding.

         Usage:
         - 25-100: Warning banner backgrounds
         - 200-300: Warning badges, pending status
         - 400-500: Warning icons, attention indicators
         - 600-700: Hover states, stronger warnings
         - 800-950: Warning text for maximum visibility
         ========================================== */
      --rs-warning-25: #FFFCF5;  /* Subtle warning tint */
      --rs-warning-50: #FFFAEB;  /* Warning alert backgrounds */
      --rs-warning-100: #FEF0C7; /* Warning badge backgrounds */
      --rs-warning-200: #FEDF89; /* Warning borders, soft indicators */
      --rs-warning-300: #FEC84B; /* Warning icons on light backgrounds */
      --rs-warning-400: #FDB022; /* Secondary warning elements */
      --rs-warning-500: #F79009; /* PRIMARY: Warning icons, caution states */
      --rs-warning-600: #DC6803; /* Hover state for warning elements */
      --rs-warning-700: #B54708; /* Active/pressed warning state */
      --rs-warning-800: #93370D; /* Warning text on light backgrounds */
      --rs-warning-900: #7A2E0E; /* High contrast warning text */
      --rs-warning-950: #4E1D09; /* Maximum contrast warning text */

      /* Bootstrap Warning Aliases */
      --bs-warning: var(--rs-warning-500);
      --bs-warning-numbers: 247, 144, 9;

      /* ==========================================
         SUCCESS (Green)
         ==========================================
         Communicates positive actions, positive trends,
         or successful confirmations. Use for completed
         states, positive metrics, and confirmations.

         Usage:
         - 25-100: Success message backgrounds
         - 200-300: Success badges, completed indicators
         - 400-500: Success icons, positive action buttons
         - 600-700: Hover states for success actions
         - 800-950: Success text, positive metrics
         ========================================== */
      --rs-success-25: #F6FEF9;  /* Subtle success tint */
      --rs-success-50: #ECFDF3;  /* Success alert backgrounds */
      --rs-success-100: #DCFAE6; /* Success badge backgrounds */
      --rs-success-200: #ABEFC6; /* Success borders, soft indicators */
      --rs-success-300: #75E0A7; /* Success icons on light backgrounds */
      --rs-success-400: #47CD89; /* Secondary success elements */
      --rs-success-500: #17B26A; /* PRIMARY: Success icons, confirm buttons */
      --rs-success-600: #079455; /* Hover state for success elements */
      --rs-success-700: #067647; /* Active/pressed success state */
      --rs-success-800: #085D3A; /* Success text on light backgrounds */
      --rs-success-900: #074D31; /* High contrast success text */
      --rs-success-950: #053321; /* Maximum contrast success text */

      /* Bootstrap Success Aliases */
      --bs-success: var(--rs-success-500);
      --bs-success-numbers: 23, 178, 106;

      /* ==========================================
         AQUA (Cyan) - Secondary Color
         ==========================================
         Cool cyan tones for freshness and calm.
         Use sparingly as an accent color for:
         - Data visualizations and charts
         - Category indicators and tags
         - Informational highlights
         - Alternative link styling
         ========================================== */
      --rs-aqua-25: #F5FEFF;   /* Subtle aqua tint */
      --rs-aqua-50: #ECFEFF;   /* Aqua badge/tag backgrounds */
      --rs-aqua-100: #CFF9FE;  /* Light aqua fills */
      --rs-aqua-200: #A5F0FC;  /* Aqua borders, chart fills */
      --rs-aqua-300: #67E3F9;  /* Chart elements, decorative */
      --rs-aqua-400: #22CCEE;  /* Secondary aqua elements */
      --rs-aqua-500: #06AED4;  /* PRIMARY: Aqua icons, links */
      --rs-aqua-600: #088AB2;  /* Hover state */
      --rs-aqua-700: #0E7090;  /* Active/pressed state */
      --rs-aqua-800: #155B75;  /* Aqua text on light backgrounds */
      --rs-aqua-900: #164C63;  /* High contrast aqua text */
      --rs-aqua-950: #082F3E;  /* Maximum contrast aqua text */

      /* Bootstrap Teal Aliases */
      --bs-teal: var(--rs-aqua-500);
      --bs-teal-numbers: 6, 174, 212;

      /* ==========================================
         FILTERED BLUE (Blue) - Secondary Color
         ==========================================
         Muted blue for professional, trustworthy elements.
         Commonly used for:
         - Informational states and messages
         - Links (alternative to brand)
         - Selected/active states
         - Data visualizations
         ========================================== */
      --rs-blue-25: #F5FAFF;   /* Subtle blue tint */
      --rs-blue-50: #EFF8FF;   /* Info alert backgrounds */
      --rs-blue-100: #D1E9FF;  /* Blue badge backgrounds */
      --rs-blue-200: #B2DDFF;  /* Blue borders, soft indicators */
      --rs-blue-300: #84CAFF;  /* Blue icons on light backgrounds */
      --rs-blue-400: #53B1FD;  /* Secondary blue elements */
      --rs-blue-500: #2E90FA;  /* PRIMARY: Info icons, links */
      --rs-blue-600: #1570EF;  /* Hover state for blue elements */
      --rs-blue-700: #175CD3;  /* Active/pressed blue state */
      --rs-blue-800: #1849A9;  /* Blue text on light backgrounds */
      --rs-blue-900: #194185;  /* High contrast blue text */
      --rs-blue-950: #102A56;  /* Maximum contrast blue text */

      /* ==========================================
         BLUE LIGHT (Cyan/Sky) - Utility Color
         ==========================================
         Light blue / cyan for info, links, highlights.
         ========================================== */
      --rs-blue-light-25: #F0F9FF;
      --rs-blue-light-50: #E0F2FE;
      --rs-blue-light-100: #B9E6FE;
      --rs-blue-light-200: #7CD4FD;
      --rs-blue-light-300: #36BFFA;
      --rs-blue-light-400: #0BA5EC;
      --rs-blue-light-500: #0BA5EC;
      --rs-blue-light-600: #0086C9;
      --rs-blue-light-700: #026AA2;
      --rs-blue-light-800: #065986;
      --rs-blue-light-900: #0B4A6F;
      --rs-blue-light-950: #062C41;

      /* Bootstrap Info Aliases */
      --bs-info: var(--rs-blue-500);
      --bs-info-numbers: 46, 144, 250;

      /* ==========================================
         ROSÉ (Pink) - Secondary Color
         ==========================================
         Warm pink for playful or premium accents.
         Use sparingly for:
         - Promotional highlights
         - Premium/special features
         - Feminine-themed content
         - Data visualization variety
         ========================================== */
      --rs-rose-25: #FFF5F6;   /* Subtle rose tint */
      --rs-rose-50: #FFF1F3;   /* Rose badge backgrounds */
      --rs-rose-100: #FFE4E8;  /* Light rose fills */
      --rs-rose-200: #FECDD6;  /* Rose borders, soft indicators */
      --rs-rose-300: #FEA3B4;  /* Rose icons on light backgrounds */
      --rs-rose-400: #FD6F8E;  /* Secondary rose elements */
      --rs-rose-500: #F63D68;  /* PRIMARY: Rose icons, accents */
      --rs-rose-600: #E31B54;  /* Hover state */
      --rs-rose-700: #C01048;  /* Active/pressed state */
      --rs-rose-800: #A11043;  /* Rose text on light backgrounds */
      --rs-rose-900: #89123E;  /* High contrast rose text */
      --rs-rose-950: #510B24;  /* Maximum contrast rose text */

      /* Bootstrap Pink Aliases */
      --bs-pink: var(--rs-rose-500);
      --bs-pink-numbers: 246, 61, 104;

      /* ==========================================
         PINK - Utility Color
         ==========================================
         Vibrant pink for highlights, badges, accents.
         ========================================== */
      --rs-pink-25: #FEF6FB;
      --rs-pink-50: #FDF2FA;
      --rs-pink-100: #FCE7F6;
      --rs-pink-200: #FCCEEF;
      --rs-pink-300: #FAA7E0;
      --rs-pink-400: #F670C7;
      --rs-pink-500: #EE46BC;
      --rs-pink-600: #DD2590;
      --rs-pink-700: #C11574;
      --rs-pink-800: #9E165F;
      --rs-pink-900: #851651;
      --rs-pink-950: #4E0D30;

      /* ==========================================
         ORANGE - Utility Color
         ==========================================
         Warm orange for energy, alerts, highlights.
         ========================================== */
      --rs-orange-25: #FEFAF5;
      --rs-orange-50: #FEF6EE;
      --rs-orange-100: #FDEAD7;
      --rs-orange-200: #F9DBAF;
      --rs-orange-300: #F7B27A;
      --rs-orange-400: #F38744;
      --rs-orange-500: #EF6820;
      --rs-orange-600: #E04F16;
      --rs-orange-700: #B93815;
      --rs-orange-800: #932F19;
      --rs-orange-900: #772917;
      --rs-orange-950: #511C10;

      /* ==========================================
         SUNNY SIDE UP (Yellow) - Secondary Color
         ==========================================
         Warm yellow for optimism and energy.
         Can be swapped with the default warning color.
         Use for:
         - Highlighting important content
         - Positive trends (alternative to green)
         - Attention-grabbing accents
         - Data visualization variety
         ========================================== */
      --rs-yellow-25: #FEFDF0;  /* Subtle yellow tint */
      --rs-yellow-50: #FEFBE8;  /* Yellow badge backgrounds */
      --rs-yellow-100: #FEF7C3; /* Light yellow fills */
      --rs-yellow-200: #FEEE95; /* Yellow borders, highlights */
      --rs-yellow-300: #FDE272; /* Yellow accents */
      --rs-yellow-400: #FAC515; /* Secondary yellow elements */
      --rs-yellow-500: #EAAA08; /* PRIMARY: Yellow icons */
      --rs-yellow-600: #CA8504; /* Hover state */
      --rs-yellow-700: #A15C07; /* Active/pressed state */
      --rs-yellow-800: #854A0E; /* Yellow text on light backgrounds */
      --rs-yellow-900: #713B12; /* High contrast yellow text */
      --rs-yellow-950: #422006; /* Maximum contrast yellow text */

      /* ==========================================
         ADDITIONAL EXTENDED COLORS
         ==========================================
         Additional colors for data visualization
         and specialty UI elements.
         ========================================== */
      --bs-purple: #7a5af8;          /* Charts, premium features */
      --bs-purple-numbers: 122, 90, 248;
      --bs-orange: #ef6820;          /* Alternative warning, charts */
      --bs-orange-numbers: 239, 104, 32;
      --bs-indigo: #6172f3;          /* Charts, alternative info */
      --bs-indigo-numbers: 97, 114, 243;

      /* Secondary Bootstrap Color */
      --bs-secondary: hsl(220, 6%, 47%);   /* Muted UI elements */
      --bs-secondary-numbers: 220, 6, 47;
      --bs-light: #f5f5f5;                 /* Light backgrounds */
      --bs-light-numbers: 245, 245, 245;
      --bs-dark: #0a0d12;                  /* Dark backgrounds, text */
      --bs-dark-numbers: 10, 13, 18;

      /* ==========================================
         BACKGROUND COLORS
         ========================================== */
      --bs-body-background-color: var(--rs-gray-50);  /* Page background */
      --bs-body-background-numbers: 250, 250, 250;
      --bs-body-bg: #ffffff;                          /* Card/content background */

      /* ==========================================
         TEXT COLORS
         ========================================== */
      --bs-body-color: #526078;                              /* Default body text */
      --bs-text-tertiary: var(--rs-gray-dark-400);           /* Muted/helper text */
      --bs-text-tertiary-numbers: 97, 101, 108;
      --bs-text-dark-theme-secondary: var(--rs-gray-dark-200); /* Dark theme secondary */
      --bs-text-dark-theme-secondary-numbers: 148, 151, 156;

      /* ==========================================
         BORDER COLORS
         ========================================== */
      --bs-border-color: var(--rs-gray-200);      /* Default borders */
      --bs-border-color-light: #f1f3f5;           /* Subtle borders */
      --bs-border-secondary: #22262F;             /* Dark theme borders */
      --bs-border-secondary-numbers: 34, 38, 47;

      /* ==========================================
         LIGHT BACKGROUNDS (Badges/Containers)
         ==========================================
         Use these for subtle colored backgrounds
         in badges, alerts, and highlighted sections.
         Pair with the corresponding 500-700 text color.
         ========================================== */

      /* Light/Neutral */
      --bs-light-bg: #f8f9fa;
      --bs-light-bg-subtle: var(--rs-gray-25);
      --bs-light-border: #e9ecef;
      --bs-light-border-subtle: #f1f3f5;

      /* Danger - for error states */
      --bs-danger-light-bg: var(--rs-error-50);
      --bs-danger-light-bg-subtle: var(--rs-error-25);
      --bs-danger-light-border: var(--rs-error-100);
      --bs-danger-light-border-subtle: var(--rs-error-50);

      /* Pink - for promotional/premium content */
      --bs-pink-light-bg: var(--rs-rose-50);
      --bs-pink-light-bg-subtle: var(--rs-rose-25);
      --bs-pink-light-border: var(--rs-rose-100);
      --bs-pink-light-border-subtle: var(--rs-rose-50);

      /* Warning - for caution states */
      --bs-warning-light-bg: var(--rs-warning-50);
      --bs-warning-light-bg-subtle: var(--rs-warning-25);
      --bs-warning-light-border: var(--rs-warning-100);
      --bs-warning-light-border-subtle: var(--rs-warning-50);

      /* Success - for positive states */
      --bs-success-light-bg: var(--rs-success-50);
      --bs-success-light-bg-subtle: var(--rs-success-25);
      --bs-success-light-border: var(--rs-success-100);
      --bs-success-light-border-subtle: var(--rs-success-50);

      /* Teal/Aqua - for informational accents */
      --bs-teal-light-bg: var(--rs-aqua-50);
      --bs-teal-light-bg-subtle: var(--rs-aqua-25);
      --bs-teal-light-border: var(--rs-aqua-100);
      --bs-teal-light-border-subtle: var(--rs-aqua-50);

      /* Info/Blue - for informational states */
      --bs-info-light-bg: var(--rs-blue-50);
      --bs-info-light-bg-subtle: var(--rs-blue-25);
      --bs-info-light-border: var(--rs-blue-100);
      --bs-info-light-border-subtle: var(--rs-blue-50);

      /* Blue - alias for info */
      --bs-blue-light-bg: var(--rs-blue-50);
      --bs-blue-light-bg-subtle: var(--rs-blue-25);
      --bs-blue-light-border: var(--rs-blue-100);
      --bs-blue-light-border-subtle: var(--rs-blue-50);

      /* Indigo - for alternative info states */
      --bs-indigo-light-bg: #eef2ff;
      --bs-indigo-light-bg-subtle: #f8f9ff;
      --bs-indigo-light-border: #e0e7ff;
      --bs-indigo-light-border-subtle: #eff2ff;

      /* Purple - for premium/special features */
      --bs-purple-light-bg: #faf5ff;
      --bs-purple-light-bg-subtle: #fcfaff;
      --bs-purple-light-border: #f3e8ff;
      --bs-purple-light-border-subtle: #f8f0ff;

      /* Magenta - for promotional content */
      --bs-magenta-light-bg: #fdf4ff;
      --bs-magenta-light-bg-subtle: #fefcff;
      --bs-magenta-light-border: #fae8ff;
      --bs-magenta-light-border-subtle: #fcf0ff;

      /* Orange - for brand-tinted backgrounds */
      --bs-orange-light-bg: var(--rs-brand-50);
      --bs-orange-light-bg-subtle: var(--rs-brand-25);
      --bs-orange-light-border: var(--rs-brand-100);
      --bs-orange-light-border-subtle: var(--rs-brand-50);

      /* Yellow - for highlights and attention */
      --bs-yellow-light-bg: var(--rs-yellow-50);
      --bs-yellow-light-bg-subtle: var(--rs-yellow-25);
      --bs-yellow-light-border: var(--rs-yellow-100);
      --bs-yellow-light-border-subtle: var(--rs-yellow-50);

      /* ==========================================
         DARK THEME COLORS
         ==========================================
         Colors optimized for dark mode interfaces.
         Use lighter color values (300-400) for
         better visibility on dark backgrounds.
         ========================================== */

      /* Dark Backgrounds */
      --bs-dark-bg-primary: #13161B;            /* Main page background */
      --bs-dark-bg-secondary: #1a1f2e;          /* Secondary surfaces */
      --bs-dark-bg-tertiary: var(--rs-gray-800); /* Cards, elevated content */
      --bs-dark-bg-elevated: #2d3441;           /* Modals, popovers */
      --bs-dark-bg-hover: #3a4150;              /* Hover states */

      /* Dark Theme Text */
      --bs-dark-text-primary: #f7f7f7;          /* Primary text */
      --bs-dark-text-secondary: #b8bcc8;        /* Secondary text */
      --bs-dark-text-tertiary: #8b919f;         /* Muted text */
      --bs-dark-text-muted: #6b7280;            /* Disabled/subtle text */
      --bs-dark-theme-primary: #F7F7F7;
      --bs-dark-theme-primary-numbers: 247, 247, 247;
      --bs-dark-theme-secondary: var(--rs-gray-dark-100);
      --bs-dark-theme-secondary-numbers: 206, 207, 210;
      --bs-dark-theme-icon-color: var(--rs-gray-dark-300);
      --bs-dark-theme-hover-color: var(--rs-gray-dark-300);
      --bs-dark-theme-hover-color-numbers: 133, 136, 142;

      /* Dark Theme Borders */
      --bs-dark-border-primary: #374151;        /* Default dark borders */
      --bs-dark-border-secondary: #4b5563;      /* Stronger borders */
      --bs-dark-border-focus: #6366f1;          /* Focus ring color */

      /* Dark Theme Brand Colors - use lighter shades */
      --bs-dark-primary: var(--rs-brand-400);          /* Primary on dark */
      --bs-dark-primary-hover: var(--rs-brand-500);    /* Hover state */
      --bs-dark-primary-active: var(--rs-brand-600);   /* Active/pressed */
      --bs-dark-secondary-alt: var(--rs-brand-300);    /* Secondary brand */
      --bs-dark-secondary-alt-hover: var(--rs-brand-400);

      /* Dark Theme Status Colors - use lighter shades */
      --bs-dark-success: var(--rs-success-400);
      --bs-dark-success-hover: var(--rs-success-500);
      --bs-dark-info: var(--rs-blue-400);
      --bs-dark-info-hover: var(--rs-blue-500);
      --bs-dark-warning: var(--rs-warning-400);
      --bs-dark-warning-hover: var(--rs-warning-500);
      --bs-dark-danger: var(--rs-error-400);
      --bs-dark-danger-hover: var(--rs-error-500);

      /* ==========================================
         SEMANTIC COLOR TOKENS
         ==========================================
         High-level semantic tokens that reference
         the color scales. Use these for consistent
         theming across components.
         ========================================== */

      /* --- Text (Light Mode) --- */
      --rs-text-primary: var(--rs-gray-900);              /* Primary text */
      --rs-text-primary-on-brand: #ffffff;              /* Primary text on brand backgrounds */
      --rs-text-secondary: var(--rs-gray-700);            /* Secondary text */
      --rs-text-secondary-hover: var(--rs-gray-800);      /* Secondary text hover */
      --rs-text-secondary-on-brand: var(--rs-brand-200);  /* Secondary text on brand backgrounds */
      --rs-text-tertiary: var(--rs-gray-600);             /* Tertiary/muted text */
      --rs-text-tertiary-hover: var(--rs-gray-700);       /* Tertiary text hover */
      --rs-text-tertiary-on-brand: var(--rs-brand-200);   /* Tertiary text on brand backgrounds */
      --rs-text-quaternary: var(--rs-gray-500);           /* Quaternary/subtle text */
      --rs-text-quaternary-on-brand: var(--rs-brand-300); /* Quaternary text on brand backgrounds */
      --rs-text-white: #ffffff;                           /* White text */
      --rs-text-disabled: var(--rs-gray-400);             /* Disabled text */
      --rs-text-placeholder: var(--rs-gray-500);          /* Placeholder text */
      --rs-text-placeholder-subtle: var(--rs-gray-300);   /* Subtle placeholder text */
      --rs-text-brand-primary: var(--rs-brand-500);       /* Primary brand text */
      --rs-text-brand-secondary: var(--rs-brand-700);     /* Secondary brand text */
      --rs-text-brand-secondary-hover: var(--rs-brand-800); /* Secondary brand text hover */
      --rs-text-brand-tertiary: var(--rs-brand-600);      /* Tertiary brand text */
      --rs-text-brand-tertiary-alt: var(--rs-brand-500);  /* Alt tertiary brand text */
      --rs-text-error-primary: var(--rs-error-600);       /* Primary error text */
      --rs-text-warning-primary: var(--rs-warning-600);   /* Primary warning text */
      --rs-text-success-primary: var(--rs-success-600);   /* Primary success text */

      /* @deprecated Use --rs-text-brand-primary instead */
      --rs-text-brand-primary-legacy: var(--rs-utility-brand-500);

      /* --- Text (Dark Mode) --- */
      --rs-text-primary-dark: var(--rs-gray-50);          /* Primary text (dark) */
      --rs-text-primary-on-brand-dark: var(--rs-gray-50); /* Primary on brand (dark) */
      --rs-text-secondary-dark: var(--rs-gray-300);       /* Secondary text (dark) */
      --rs-text-secondary-hover-dark: var(--rs-gray-200); /* Secondary hover (dark) */
      --rs-text-secondary-on-brand-dark: var(--rs-gray-300); /* Secondary on brand (dark) */
      --rs-text-tertiary-dark: var(--rs-gray-400);        /* Tertiary text (dark) */
      --rs-text-tertiary-hover-dark: var(--rs-gray-300);  /* Tertiary hover (dark) */
      --rs-text-tertiary-on-brand-dark: var(--rs-gray-400); /* Tertiary on brand (dark) */
      --rs-text-quaternary-dark: var(--rs-gray-400);      /* Quaternary text (dark) */
      --rs-text-quaternary-on-brand-dark: var(--rs-gray-400); /* Quaternary on brand (dark) */
      --rs-text-white-dark: #ffffff;                      /* White text (dark) */
      --rs-text-disabled-dark: var(--rs-gray-500);        /* Disabled text (dark) */
      --rs-text-placeholder-dark: var(--rs-gray-400);     /* Placeholder text (dark) */
      --rs-text-placeholder-subtle-dark: var(--rs-gray-700); /* Subtle placeholder (dark) */
      --rs-text-brand-primary-dark: var(--rs-brand-400);  /* Primary brand text (dark) */
      --rs-text-brand-secondary-dark: var(--rs-brand-300); /* Secondary brand text (dark) */
      --rs-text-brand-secondary-hover-dark: var(--rs-brand-200); /* Secondary brand hover (dark) */
      --rs-text-brand-tertiary-dark: var(--rs-brand-200); /* Tertiary brand text (dark) */
      --rs-text-brand-tertiary-alt-dark: var(--rs-brand-300); /* Alt tertiary brand text (dark) */
      --rs-text-error-primary-dark: var(--rs-error-400);  /* Primary error text (dark) */
      --rs-text-warning-primary-dark: var(--rs-warning-400); /* Primary warning text (dark) */
      --rs-text-success-primary-dark: var(--rs-success-400); /* Primary success text (dark) */

      /* --- Foreground/Icons (Light Mode) ---
         Use fg tokens for icons, decorative elements, and UI chrome */
      --rs-fg-primary: var(--rs-gray-900);                /* Primary icons/elements */
      --rs-fg-secondary: var(--rs-gray-700);              /* Secondary icons */
      --rs-fg-secondary-hover: var(--rs-gray-800);        /* Secondary hover */
      --rs-fg-tertiary: var(--rs-gray-600);               /* Tertiary icons */
      --rs-fg-tertiary-hover: var(--rs-gray-700);         /* Tertiary hover */
      --rs-fg-quaternary: var(--rs-gray-500);             /* Quaternary icons */
      --rs-fg-quaternary-hover: var(--rs-gray-600);       /* Quaternary hover */
      --rs-fg-quinary: var(--rs-gray-400);                /* Quinary icons */
      --rs-fg-quinary-hover: var(--rs-gray-500);          /* Quinary hover */
      --rs-fg-senary: var(--rs-gray-300);                 /* Senary/subtle icons */
      --rs-fg-white: #ffffff;                             /* White icons */
      --rs-fg-disabled: var(--rs-gray-400);               /* Disabled icons */
      --rs-fg-disabled-subtle: var(--rs-gray-300);        /* Subtle disabled icons */
      --rs-fg-brand-primary: var(--rs-brand-600);         /* Primary brand icons */
      --rs-fg-brand-primary-alt: var(--rs-brand-600);     /* Alt primary brand icons */
      --rs-fg-brand-secondary: var(--rs-brand-500);       /* Secondary brand icons */
      --rs-fg-error-primary: var(--rs-error-600);         /* Primary error icons */
      --rs-fg-error-secondary: var(--rs-error-500);       /* Secondary error icons */
      --rs-fg-warning-primary: var(--rs-warning-600);     /* Primary warning icons */
      --rs-fg-warning-secondary: var(--rs-warning-500);   /* Secondary warning icons */
      --rs-fg-success-primary: var(--rs-success-600);     /* Primary success icons */
      --rs-fg-success-secondary: var(--rs-success-500);   /* Secondary success icons */

      /* --- Foreground/Icons (Dark Mode) --- */
      --rs-fg-primary-dark: var(--rs-gray-50);            /* Primary icons (dark) */
      --rs-fg-secondary-dark: var(--rs-gray-300);         /* Secondary icons (dark) */
      --rs-fg-secondary-hover-dark: var(--rs-gray-200);   /* Secondary hover (dark) */
      --rs-fg-tertiary-dark: var(--rs-gray-400);          /* Tertiary icons (dark) */
      --rs-fg-tertiary-hover-dark: var(--rs-gray-300);    /* Tertiary hover (dark) */
      --rs-fg-quaternary-dark: var(--rs-gray-400);        /* Quaternary icons (dark) */
      --rs-fg-quaternary-hover-dark: var(--rs-gray-300);  /* Quaternary hover (dark) */
      --rs-fg-quinary-dark: var(--rs-gray-500);           /* Quinary icons (dark) */
      --rs-fg-quinary-hover-dark: var(--rs-gray-400);     /* Quinary hover (dark) */
      --rs-fg-senary-dark: var(--rs-gray-600);            /* Senary icons (dark) */
      --rs-fg-white-dark: #ffffff;                        /* White icons (dark) */
      --rs-fg-disabled-dark: var(--rs-gray-500);          /* Disabled icons (dark) */
      --rs-fg-disabled-subtle-dark: var(--rs-gray-600);   /* Subtle disabled (dark) */
      --rs-fg-brand-primary-dark: var(--rs-brand-500);    /* Primary brand (dark) */
      --rs-fg-brand-primary-alt-dark: var(--rs-brand-500); /* Alt primary brand (dark) */
      --rs-fg-brand-secondary-dark: var(--rs-brand-400);  /* Secondary brand (dark) */
      --rs-fg-error-primary-dark: var(--rs-error-500);    /* Primary error (dark) */
      --rs-fg-error-secondary-dark: var(--rs-error-400);  /* Secondary error (dark) */
      --rs-fg-warning-primary-dark: var(--rs-warning-500); /* Primary warning (dark) */
      --rs-fg-warning-secondary-dark: var(--rs-warning-400); /* Secondary warning (dark) */
      --rs-fg-success-primary-dark: var(--rs-success-500); /* Primary success (dark) */
      --rs-fg-success-secondary-dark: var(--rs-success-400); /* Secondary success (dark) */

      /* --- Backgrounds (Light Mode) --- */
      --rs-bg-primary: #ffffff;                           /* Primary/main background */
      --rs-bg: var(--rs-bg-primary);                      /* Alias for --rs-bg-primary */
      --rs-bg-primary-alt: #ffffff;                       /* Alt primary background */
      --rs-bg-primary-hover: var(--rs-gray-50);           /* Primary hover state */
      --rs-bg-primary-solid: var(--rs-gray-950);          /* Solid dark background */
      --rs-bg-secondary: var(--rs-gray-50);               /* Secondary surfaces */
      --rs-bg-secondary-alt: var(--rs-gray-50);           /* Alt secondary background */
      --rs-bg-secondary-hover: var(--rs-gray-100);        /* Secondary hover state */
      --rs-bg-secondary-subtle: var(--rs-gray-25);        /* Subtle secondary bg */
      --rs-bg-secondary-solid: var(--rs-gray-600);        /* Solid secondary bg (toggles, badges) */
      --rs-bg-tertiary: var(--rs-gray-100);               /* Tertiary backgrounds */
      --rs-bg-quaternary: var(--rs-gray-200);             /* Quaternary backgrounds */
      --rs-bg-active: var(--rs-gray-50);                  /* Active/selected state */
      --rs-bg-disabled: var(--rs-gray-100);               /* Disabled backgrounds */
      --rs-bg-disabled-subtle: var(--rs-gray-50);         /* Subtle disabled bg */
      --rs-bg-overlay: var(--rs-gray-950);                /* Overlay/modal backdrop */
      --rs-bg-brand-primary: var(--rs-brand-50);          /* Light brand background */
      --rs-bg-brand-primary-alt: var(--rs-brand-100);     /* Alt light brand bg */
      --rs-bg-brand-secondary: var(--rs-brand-600);       /* Secondary brand bg */
      --rs-bg-brand-solid: var(--rs-brand-600);           /* Solid brand background */
      --rs-bg-brand-solid-hover: var(--rs-brand-700);     /* Solid brand hover */
      --rs-bg-brand-section: var(--rs-brand-800);         /* Brand section background */
      --rs-bg-brand-section-subtle: var(--rs-brand-700);  /* Subtle brand section */
      --rs-bg-error-primary: var(--rs-error-50);          /* Light error background */
      --rs-bg-error-secondary: var(--rs-error-100);       /* Secondary error bg */
      --rs-bg-error-solid: var(--rs-error-600);           /* Solid error background */
      --rs-bg-error-solid-hover: var(--rs-error-700);     /* Solid error hover */
      --rs-bg-warning-primary: var(--rs-warning-50);      /* Light warning background */
      --rs-bg-warning-secondary: var(--rs-warning-100);   /* Secondary warning bg */
      --rs-bg-warning-solid: var(--rs-warning-600);       /* Solid warning background */
      --rs-bg-success-primary: var(--rs-success-50);      /* Light success background */
      --rs-bg-success-secondary: var(--rs-success-100);   /* Secondary success bg */
      --rs-bg-success-solid: var(--rs-success-600);       /* Solid success background */

      /* --- Backgrounds (Dark Mode) --- */
      --rs-bg-primary-dark: var(--rs-gray-950);           /* Primary bg (dark) */
      --rs-bg-primary-alt-dark: var(--rs-gray-900);       /* Alt primary (dark) */
      --rs-bg-primary-hover-dark: var(--rs-gray-800);     /* Primary hover (dark) */
      --rs-bg-primary-solid-dark: var(--rs-gray-950);     /* Solid bg (dark) */
      --rs-bg-secondary-dark: var(--rs-gray-900);         /* Secondary bg (dark) */
      --rs-bg-secondary-alt-dark: var(--rs-gray-950);     /* Alt secondary (dark) */
      --rs-bg-secondary-hover-dark: var(--rs-gray-800);   /* Secondary hover (dark) */
      --rs-bg-secondary-subtle-dark: var(--rs-gray-900);  /* Subtle secondary (dark) */
      --rs-bg-secondary-solid-dark: var(--rs-gray-300);   /* Solid secondary bg (dark) */
      --rs-bg-tertiary-dark: var(--rs-gray-800);          /* Tertiary bg (dark) */
      --rs-bg-quaternary-dark: var(--rs-gray-700);        /* Quaternary bg (dark) */
      --rs-bg-active-dark: var(--rs-gray-800);            /* Active state (dark) */
      --rs-bg-disabled-dark: var(--rs-gray-800);          /* Disabled bg (dark) */
      --rs-bg-disabled-subtle-dark: var(--rs-gray-900);   /* Subtle disabled (dark) */
      --rs-bg-overlay-dark: var(--rs-gray-950);           /* Overlay (dark) */
      --rs-bg-brand-primary-dark: var(--rs-brand-500);    /* Brand primary (dark) */
      --rs-bg-brand-primary-alt-dark: var(--rs-brand-600); /* Brand alt (dark) */
      --rs-bg-brand-secondary-dark: var(--rs-brand-600);  /* Brand secondary (dark) */
      --rs-bg-brand-solid-dark: var(--rs-brand-500);      /* Brand solid (dark) */
      --rs-bg-brand-solid-hover-dark: var(--rs-brand-600); /* Brand solid hover (dark) */
      --rs-bg-brand-section-dark: var(--rs-brand-800);    /* Brand section (dark) */
      --rs-bg-brand-section-subtle-dark: var(--rs-brand-700); /* Brand section subtle (dark) */
      --rs-bg-error-primary-dark: var(--rs-error-500);    /* Error primary (dark) */
      --rs-bg-error-secondary-dark: var(--rs-error-600);  /* Error secondary (dark) */
      --rs-bg-error-solid-dark: var(--rs-error-500);      /* Error solid (dark) */
      --rs-bg-error-solid-hover-dark: var(--rs-error-600); /* Error solid hover (dark) */
      --rs-bg-warning-primary-dark: var(--rs-warning-950); /* Warning primary (dark) */
      --rs-bg-warning-secondary-dark: var(--rs-warning-600); /* Warning secondary (dark) */
      --rs-bg-warning-solid-dark: var(--rs-warning-600);  /* Warning solid (dark) */
      --rs-bg-success-primary-dark: var(--rs-success-950); /* Success primary (dark) */
      --rs-bg-success-secondary-dark: var(--rs-success-600); /* Success secondary (dark) */
      --rs-bg-success-solid-dark: var(--rs-success-600);  /* Success solid (dark) */

      /* --- Borders (Light Mode) --- */
      --rs-border-primary: var(--rs-gray-300);            /* Primary borders (high contrast) */
      --rs-border-secondary: var(--rs-gray-200);          /* Secondary borders (most common) */
      --rs-border-secondary-alt: rgba(10, 13, 18, 0.09);  /* Alt secondary (alpha transparency) */
      --rs-border-tertiary: var(--rs-gray-100);           /* Tertiary/subtle borders */
      --rs-border-disabled: var(--rs-gray-300);           /* Disabled element borders */
      --rs-border-disabled-subtle: var(--rs-gray-200);    /* Subtle disabled borders */
      --rs-border-brand: var(--rs-brand-500);             /* Brand-colored borders */
      --rs-border-brand-solid: var(--rs-brand-600);       /* Solid brand borders */
      --rs-border-brand-solid-alt: var(--rs-brand-600);   /* Alt solid brand borders */
      --rs-border-error: var(--rs-error-300);             /* Error state borders */
      --rs-border-error-subtle: var(--rs-error-200);      /* Subtle error borders */
      --rs-border-error-solid: var(--rs-error-600);       /* Solid error borders */

      /* --- Borders (Dark Mode) --- */
      --rs-border-primary-dark: var(--rs-gray-700);       /* Primary borders (dark) */
      --rs-border-secondary-dark: var(--rs-gray-800);     /* Secondary borders (dark) */
      --rs-border-secondary-alt-dark: rgba(255, 255, 255, 0.09); /* Alt secondary (dark) */
      --rs-border-tertiary-dark: var(--rs-gray-800);      /* Tertiary borders (dark) */
      --rs-border-disabled-dark: var(--rs-gray-700);      /* Disabled borders (dark) */
      --rs-border-disabled-subtle-dark: var(--rs-gray-800); /* Subtle disabled (dark) */
      --rs-border-brand-dark: var(--rs-brand-400);        /* Brand borders (dark) */
      --rs-border-brand-solid-dark: var(--rs-brand-500);  /* Solid brand (dark) */
      --rs-border-brand-solid-alt-dark: var(--rs-brand-500); /* Alt solid brand (dark) */
      --rs-border-error-dark: var(--rs-error-400);        /* Error borders (dark) */
      --rs-border-error-subtle-dark: var(--rs-error-500); /* Subtle error (dark) */
      --rs-border-error-solid-dark: var(--rs-error-500);  /* Solid error (dark) */

      /* --- Brand Backgrounds --- */
      --rs-bg-brand-secondary: var(--rs-brand-100);       /* Light brand backgrounds */

      /* --- Focus Rings --- */
      --rs-focus-ring-brand: var(--rs-brand-500);         /* Brand focus ring */
      --rs-focus-ring-error: var(--rs-error-500);         /* Error focus ring */
      --rs-focus-ring-success: var(--rs-success-500);     /* Success focus ring */

      /* --- Code Block Tokens ---
         Semantic tokens for syntax-highlighted code blocks.
         These always use dark colors regardless of page theme,
         since code blocks look best with dark backgrounds.
         ---------------------------------------- */
      --rs-code-bg: var(--rs-gray-dark-900);              /* Main code block background */
      --rs-code-bg-header: var(--rs-gray-dark-700);       /* Header/toolbar background */
      --rs-code-text: var(--rs-gray-dark-25);             /* Primary code text */
      --rs-code-text-muted: var(--rs-gray-dark-200);      /* Comments, line numbers */
      --rs-code-border: var(--rs-gray-dark-500);          /* Border color */

      /* --- Form Elements (Light Mode) ---
         Semantic tokens for inputs, selects, textareas */
      --rs-form-bg: #ffffff;                              /* Input background */
      --rs-form-bg-disabled: var(--rs-gray-100);          /* Disabled input background */
      --rs-form-border: var(--rs-gray-300);               /* Input border (#D5D7DA) */
      --rs-form-border-hover: var(--rs-gray-400);         /* Input border on hover */
      --rs-form-border-focus: var(--rs-blue-500);         /* Input border on focus */
      --rs-form-text: #526078;                            /* Input text color */
      --rs-form-text-disabled: var(--rs-gray-400);        /* Disabled input text */
      --rs-form-placeholder: var(--rs-gray-500);          /* Placeholder text */
      --rs-form-shadow: var(--rs-shadow-xs);              /* Input shadow */
      --rs-form-focus-ring: 0 0 0 3px rgba(46, 144, 250, 0.25); /* Focus ring */

      /* --- Form Elements (Dark Mode values) --- */
      --rs-form-bg-dark: var(--rs-gray-900);              /* Input background (dark) */
      --rs-form-bg-disabled-dark: var(--rs-gray-800);     /* Disabled background (dark) */
      --rs-form-border-dark: var(--rs-gray-700);          /* Input border (dark) */
      --rs-form-border-hover-dark: var(--rs-gray-600);    /* Border hover (dark) */
      --rs-form-border-focus-dark: var(--rs-blue-400);    /* Border focus (dark) */
      --rs-form-text-dark: var(--rs-gray-50);             /* Input text (dark) */
      --rs-form-text-disabled-dark: var(--rs-gray-500);   /* Disabled text (dark) */
      --rs-form-placeholder-dark: var(--rs-gray-400);     /* Placeholder (dark) */
      --rs-form-shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
      --rs-form-focus-ring-dark: 0 0 0 3px rgba(46, 144, 250, 0.4);

      /* --- Shadows --- */

      --rs-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
      --rs-shadow-sm:
        0px 1px 2px -1px rgba(10, 13, 18, 0.10),
        0px 1px 3px 0px rgba(10, 13, 18, 0.10);
      --rs-shadow-md:
        0px 2px 4px -2px rgba(10, 13, 18, 0.06),
        0px 4px 6px -1px rgba(10, 13, 18, 0.10);
      --rs-shadow-lg:
        0px 2px 2px -1px rgba(10, 13, 18, 0.04),
        0px 4px 6px -2px rgba(10, 13, 18, 0.03);
      --rs-shadow-xl:
        0px 3px 3px -1.5px rgba(10, 13, 18, 0.04),
        0px 8px 8px -4px rgba(10, 13, 18, 0.03);
      --rs-shadow-2xl:
        0px 4px 4px -2px rgba(10, 13, 18, 0.04),
        0px 24px 48px -12px rgba(10, 13, 18, 0.18);
      --rs-shadow-3xl:
        0px 5px 5px -2.5px rgba(10, 13, 18, 0.04),
        0px 32px 64px -12px rgba(10, 13, 18, 0.14);

      /* --- Alpha White (Light Mode) ---
         Use for overlays and layered effects on dark surfaces */
      --rs-alpha-white-10: rgba(255, 255, 255, 0.10);
      --rs-alpha-white-20: rgba(255, 255, 255, 0.20);
      --rs-alpha-white-30: rgba(255, 255, 255, 0.30);
      --rs-alpha-white-40: rgba(255, 255, 255, 0.40);
      --rs-alpha-white-50: rgba(255, 255, 255, 0.50);
      --rs-alpha-white-60: rgba(255, 255, 255, 0.60);
      --rs-alpha-white-70: rgba(255, 255, 255, 0.70);
      --rs-alpha-white-80: rgba(255, 255, 255, 0.80);
      --rs-alpha-white-90: rgba(255, 255, 255, 0.90);
      --rs-alpha-white-100: rgba(255, 255, 255, 1.00);

      /* --- Alpha Black (Light Mode) ---
         Use for overlays, shadows, and layered effects on light surfaces */
      --rs-alpha-black-10: rgba(10, 13, 18, 0.10);
      --rs-alpha-black-20: rgba(10, 13, 18, 0.20);
      --rs-alpha-black-30: rgba(10, 13, 18, 0.30);
      --rs-alpha-black-40: rgba(10, 13, 18, 0.40);
      --rs-alpha-black-50: rgba(10, 13, 18, 0.50);
      --rs-alpha-black-60: rgba(10, 13, 18, 0.60);
      --rs-alpha-black-70: rgba(10, 13, 18, 0.70);
      --rs-alpha-black-80: rgba(10, 13, 18, 0.80);
      --rs-alpha-black-90: rgba(10, 13, 18, 0.90);
      --rs-alpha-black-100: rgba(10, 13, 18, 1.00);

      /* --- Alpha White (Dark Mode values) --- */
      --rs-alpha-white-10-dark: rgba(24, 29, 39, 0.10);
      --rs-alpha-white-20-dark: rgba(24, 29, 39, 0.20);
      --rs-alpha-white-30-dark: rgba(24, 29, 39, 0.30);
      --rs-alpha-white-40-dark: rgba(24, 29, 39, 0.40);
      --rs-alpha-white-50-dark: rgba(24, 29, 39, 0.50);
      --rs-alpha-white-60-dark: rgba(24, 29, 39, 0.60);
      --rs-alpha-white-70-dark: rgba(24, 29, 39, 0.70);
      --rs-alpha-white-80-dark: rgba(24, 29, 39, 0.80);
      --rs-alpha-white-90-dark: rgba(24, 29, 39, 0.90);
      --rs-alpha-white-100-dark: rgba(24, 29, 39, 1.00);

      /* --- Alpha Black (Dark Mode values) --- */
      --rs-alpha-black-10-dark: rgba(245, 245, 245, 0.10);
      --rs-alpha-black-20-dark: rgba(245, 245, 245, 0.20);
      --rs-alpha-black-30-dark: rgba(245, 245, 245, 0.30);
      --rs-alpha-black-40-dark: rgba(245, 245, 245, 0.40);
      --rs-alpha-black-50-dark: rgba(245, 245, 245, 0.50);
      --rs-alpha-black-60-dark: rgba(245, 245, 245, 0.60);
      --rs-alpha-black-70-dark: rgba(245, 245, 245, 0.70);
      --rs-alpha-black-80-dark: rgba(245, 245, 245, 0.80);
      --rs-alpha-black-90-dark: rgba(245, 245, 245, 0.90);
      --rs-alpha-black-100-dark: rgba(245, 245, 245, 1.00);

      /* --- Utility --- */
      --rs-dark-gray-alpha: rgba(255, 255, 255, 0.16); /* Transparent overlay */

      /* --- Utility Gray (Light Mode) --- */
      --rs-utility-gray-50: #FAFAFA;
      --rs-utility-gray-100: #F5F5F5;
      --rs-utility-gray-200: #E5E5E5;
      --rs-utility-gray-300: #D6D6D6;
      --rs-utility-gray-400: #A3A3A3;
      --rs-utility-gray-500: #737373;
      --rs-utility-gray-600: #525252;
      --rs-utility-gray-700: #424242;
      --rs-utility-gray-800: #292929;
      --rs-utility-gray-900: #1A1A1A;
      --rs-utility-gray-950: #0D0D0D;

      /* --- Utility Gray (Dark Mode values) --- */
      --rs-utility-gray-50-dark: #FAFAFA;
      --rs-utility-gray-100-dark: #F5F5F5;
      --rs-utility-gray-200-dark: #333333;
      --rs-utility-gray-300-dark: #525252;
      --rs-utility-gray-400-dark: #737373;
      --rs-utility-gray-500-dark: #A3A3A3;
      --rs-utility-gray-600-dark: #D6D6D6;
      --rs-utility-gray-700-dark: #E5E5E5;
      --rs-utility-gray-800-dark: #F0F0F0;
      --rs-utility-gray-900-dark: #F5F5F5;
      --rs-utility-gray-950-dark: #FAFAFA;

      /* --- Utility Brand (Light Mode) --- */
      --rs-utility-brand-50: #FEF5F2;
      --rs-utility-brand-100: #FDDCD1;
      --rs-utility-brand-200: #FBB8A2;
      --rs-utility-brand-300: #F99474;
      --rs-utility-brand-400: #F77045;
      --rs-utility-brand-500: #FE4611;
      --rs-utility-brand-600: #CB380E;
      --rs-utility-brand-700: #982A0A;
      --rs-utility-brand-800: #7A220A;
      --rs-utility-brand-900: #5C1908;
      --rs-utility-brand-950: #3D1005;

      /* --- Utility Brand (Dark Mode values) --- */
      --rs-utility-brand-50-dark: #4C1506;
      --rs-utility-brand-100-dark: #7A220A;
      --rs-utility-brand-200-dark: #A92E0D;
      --rs-utility-brand-300-dark: #D73A11;
      --rs-utility-brand-400-dark: #FE4611;
      --rs-utility-brand-500-dark: #F77045;
      --rs-utility-brand-600-dark: #F99474;
      --rs-utility-brand-700-dark: #FBB8A2;
      --rs-utility-brand-800-dark: #FDDCD1;
      --rs-utility-brand-900-dark: #FEF0EB;
      --rs-utility-brand-950-dark: #FEF5F2;

      /* --- Utility Error (Light Mode) --- */
      --rs-utility-error-50: #FEF3F2;
      --rs-utility-error-100: #FEE4E2;
      --rs-utility-error-200: #FECDCA;
      --rs-utility-error-300: #FDA29B;
      --rs-utility-error-400: #F97066;
      --rs-utility-error-500: #F04438;
      --rs-utility-error-600: #D92D20;
      --rs-utility-error-700: #B42318;
      --rs-utility-error-800: #912018;
      --rs-utility-error-900: #7A271A;
      --rs-utility-error-950: #55160C;

      /* --- Utility Error (Dark Mode values) --- */
      --rs-utility-error-50-dark: #55160C;
      --rs-utility-error-100-dark: #7A271A;
      --rs-utility-error-200-dark: #912018;
      --rs-utility-error-300-dark: #B42318;
      --rs-utility-error-400-dark: #D92D20;
      --rs-utility-error-500-dark: #F04438;
      --rs-utility-error-600-dark: #F97066;
      --rs-utility-error-700-dark: #FDA29B;
      --rs-utility-error-800-dark: #FECDCA;
      --rs-utility-error-900-dark: #FEE4E2;
      --rs-utility-error-950-dark: #FEF3F2;

      /* --- Utility Warning (Light Mode) --- */
      --rs-utility-warning-50: #FFFAEB;
      --rs-utility-warning-100: #FEF0C7;
      --rs-utility-warning-200: #FEDF89;
      --rs-utility-warning-300: #FEC84B;
      --rs-utility-warning-400: #FDB022;
      --rs-utility-warning-500: #F79009;
      --rs-utility-warning-600: #DC6803;
      --rs-utility-warning-700: #B54708;
      --rs-utility-warning-800: #93370D;
      --rs-utility-warning-900: #7A2E0E;
      --rs-utility-warning-950: #4E1D09;

      /* --- Utility Warning (Dark Mode values) --- */
      --rs-utility-warning-50-dark: #4E1D09;
      --rs-utility-warning-100-dark: #7A2E0E;
      --rs-utility-warning-200-dark: #93370D;
      --rs-utility-warning-300-dark: #B54708;
      --rs-utility-warning-400-dark: #DC6803;
      --rs-utility-warning-500-dark: #F79009;
      --rs-utility-warning-600-dark: #FDB022;
      --rs-utility-warning-700-dark: #FEC84B;
      --rs-utility-warning-800-dark: #FEDF89;
      --rs-utility-warning-900-dark: #FEF0C7;
      --rs-utility-warning-950-dark: #FFFAEB;

      /* --- Utility Success (Light Mode) --- */
      --rs-utility-success-50: #ECFDF3;
      --rs-utility-success-100: #DCFAE6;
      --rs-utility-success-200: #ABEFC6;
      --rs-utility-success-300: #75E0A7;
      --rs-utility-success-400: #47CD89;
      --rs-utility-success-500: #17B26A;
      --rs-utility-success-600: #079455;
      --rs-utility-success-700: #067647;
      --rs-utility-success-800: #085D3A;
      --rs-utility-success-900: #074D31;
      --rs-utility-success-950: #053321;

      /* --- Utility Success (Dark Mode values) --- */
      --rs-utility-success-50-dark: #053321;
      --rs-utility-success-100-dark: #074D31;
      --rs-utility-success-200-dark: #085D3A;
      --rs-utility-success-300-dark: #067647;
      --rs-utility-success-400-dark: #079455;
      --rs-utility-success-500-dark: #17B26A;
      --rs-utility-success-600-dark: #47CD89;
      --rs-utility-success-700-dark: #75E0A7;
      --rs-utility-success-800-dark: #ABEFC6;
      --rs-utility-success-900-dark: #DCFAE6;
      --rs-utility-success-950-dark: #ECFDF3;

      /* --- Utility Blue Light (Light Mode) --- */
      --rs-utility-blue-light-500: #0BA5EC;
      --rs-utility-blue-light-600: #0086C9;
      --rs-utility-blue-light-700: #026AA2;

      /* --- Utility Blue Light (Dark Mode values) --- */
      --rs-utility-blue-light-500-dark: var(--rs-blue-light-500);
      --rs-utility-blue-light-600-dark: var(--rs-blue-light-400);
      --rs-utility-blue-light-700-dark: var(--rs-blue-light-300);

      /* --- Utility Pink (Light Mode) --- */
      --rs-utility-pink-50: #FDF2FA;
      --rs-utility-pink-100: #FCE7F6;
      --rs-utility-pink-200: #FCCEEF;
      --rs-utility-pink-300: #FAA7E0;
      --rs-utility-pink-400: #F670C7;
      --rs-utility-pink-500: #EE46BC;
      --rs-utility-pink-600: #DD2590;
      --rs-utility-pink-700: #C11574;
      --rs-utility-pink-800: var(--rs-pink-800);
      --rs-utility-pink-900: var(--rs-pink-900);
      --rs-utility-pink-950: var(--rs-pink-950);

      /* --- Utility Pink (Dark Mode values) --- */
      --rs-utility-pink-50-dark: var(--rs-pink-950);
      --rs-utility-pink-100-dark: var(--rs-pink-900);
      --rs-utility-pink-200-dark: var(--rs-pink-800);
      --rs-utility-pink-300-dark: var(--rs-pink-700);
      --rs-utility-pink-400-dark: var(--rs-pink-600);
      --rs-utility-pink-500-dark: var(--rs-pink-500);
      --rs-utility-pink-600-dark: var(--rs-pink-400);
      --rs-utility-pink-700-dark: var(--rs-pink-300);
      --rs-utility-pink-800-dark: var(--rs-pink-200);
      --rs-utility-pink-900-dark: var(--rs-pink-100);
      --rs-utility-pink-950-dark: var(--rs-pink-50);

      /* --- Utility Orange (Light Mode) --- */
      --rs-utility-orange-50: #FEF6EE;
      --rs-utility-orange-100: #FDEAD7;
      --rs-utility-orange-200: #F9DBAF;
      --rs-utility-orange-300: #F7B27A;
      --rs-utility-orange-400: #F38744;
      --rs-utility-orange-500: #EF6820;
      --rs-utility-orange-600: #E04F16;
      --rs-utility-orange-700: #B93815;
      --rs-utility-orange-800: var(--rs-orange-800);
      --rs-utility-orange-900: var(--rs-orange-900);
      --rs-utility-orange-950: var(--rs-orange-950);

      /* --- Utility Orange (Dark Mode values) --- */
      --rs-utility-orange-50-dark: var(--rs-orange-950);
      --rs-utility-orange-100-dark: var(--rs-orange-900);
      --rs-utility-orange-200-dark: var(--rs-orange-800);
      --rs-utility-orange-300-dark: var(--rs-orange-700);
      --rs-utility-orange-400-dark: var(--rs-orange-600);
      --rs-utility-orange-500-dark: var(--rs-orange-500);
      --rs-utility-orange-600-dark: var(--rs-orange-400);
      --rs-utility-orange-700-dark: var(--rs-orange-300);
      --rs-utility-orange-800-dark: var(--rs-orange-200);
      --rs-utility-orange-900-dark: var(--rs-orange-100);
      --rs-utility-orange-950-dark: var(--rs-orange-50);
    }
}

/* =============================================================================
   DARK MODE TOKEN SWAP
   =============================================================================
   When [data-theme="dark"] is set, swap base tokens to their dark equivalents.
   This allows components to use var(--rs-text-primary) and automatically
   get the correct value for the current theme.
   ============================================================================= */

[data-theme="dark"] {
  /* --- Text --- */
  --rs-text-primary: var(--rs-text-primary-dark);
  --rs-text-primary-on-brand: var(--rs-text-primary-on-brand-dark);
  --rs-text-secondary: var(--rs-text-secondary-dark);
  --rs-text-secondary-hover: var(--rs-text-secondary-hover-dark);
  --rs-text-secondary-on-brand: var(--rs-text-secondary-on-brand-dark);
  --rs-text-tertiary: var(--rs-text-tertiary-dark);
  --rs-text-tertiary-hover: var(--rs-text-tertiary-hover-dark);
  --rs-text-tertiary-on-brand: var(--rs-text-tertiary-on-brand-dark);
  --rs-text-quaternary: var(--rs-text-quaternary-dark);
  --rs-text-quaternary-on-brand: var(--rs-text-quaternary-on-brand-dark);
  --rs-text-white: var(--rs-text-white-dark);
  --rs-text-disabled: var(--rs-text-disabled-dark);
  --rs-text-placeholder: var(--rs-text-placeholder-dark);
  --rs-text-placeholder-subtle: var(--rs-text-placeholder-subtle-dark);
  --rs-text-brand-primary: var(--rs-text-brand-primary-dark);
  --rs-text-brand-secondary: var(--rs-text-brand-secondary-dark);
  --rs-text-brand-secondary-hover: var(--rs-text-brand-secondary-hover-dark);
  --rs-text-brand-tertiary: var(--rs-text-brand-tertiary-dark);
  --rs-text-brand-tertiary-alt: var(--rs-text-brand-tertiary-alt-dark);
  --rs-text-error-primary: var(--rs-text-error-primary-dark);
  --rs-text-warning-primary: var(--rs-text-warning-primary-dark);
  --rs-text-success-primary: var(--rs-text-success-primary-dark);

  /* --- Foreground/Icons --- */
  --rs-fg-primary: var(--rs-fg-primary-dark);
  --rs-fg-secondary: var(--rs-fg-secondary-dark);
  --rs-fg-secondary-hover: var(--rs-fg-secondary-hover-dark);
  --rs-fg-tertiary: var(--rs-fg-tertiary-dark);
  --rs-fg-tertiary-hover: var(--rs-fg-tertiary-hover-dark);
  --rs-fg-quaternary: var(--rs-fg-quaternary-dark);
  --rs-fg-quaternary-hover: var(--rs-fg-quaternary-hover-dark);
  --rs-fg-quinary: var(--rs-fg-quinary-dark);
  --rs-fg-quinary-hover: var(--rs-fg-quinary-hover-dark);
  --rs-fg-senary: var(--rs-fg-senary-dark);
  --rs-fg-white: var(--rs-fg-white-dark);
  --rs-fg-disabled: var(--rs-fg-disabled-dark);
  --rs-fg-disabled-subtle: var(--rs-fg-disabled-subtle-dark);
  --rs-fg-brand-primary: var(--rs-fg-brand-primary-dark);
  --rs-fg-brand-primary-alt: var(--rs-fg-brand-primary-alt-dark);
  --rs-fg-brand-secondary: var(--rs-fg-brand-secondary-dark);
  --rs-fg-error-primary: var(--rs-fg-error-primary-dark);
  --rs-fg-error-secondary: var(--rs-fg-error-secondary-dark);
  --rs-fg-warning-primary: var(--rs-fg-warning-primary-dark);
  --rs-fg-warning-secondary: var(--rs-fg-warning-secondary-dark);
  --rs-fg-success-primary: var(--rs-fg-success-primary-dark);
  --rs-fg-success-secondary: var(--rs-fg-success-secondary-dark);

  /* --- Backgrounds --- */
  --rs-bg: var(--rs-bg-primary-dark);
  --rs-bg-primary: var(--rs-bg-primary-dark);
  --rs-bg-primary-alt: var(--rs-bg-primary-alt-dark);
  --rs-bg-primary-hover: var(--rs-bg-primary-hover-dark);
  --rs-bg-primary-solid: var(--rs-bg-primary-solid-dark);
  --rs-bg-secondary: var(--rs-bg-secondary-dark);
  --rs-bg-secondary-alt: var(--rs-bg-secondary-alt-dark);
  --rs-bg-secondary-hover: var(--rs-bg-secondary-hover-dark);
  --rs-bg-secondary-subtle: var(--rs-bg-secondary-subtle-dark);
  --rs-bg-secondary-solid: var(--rs-bg-secondary-solid-dark);
  --rs-bg-tertiary: var(--rs-bg-tertiary-dark);
  --rs-bg-quaternary: var(--rs-bg-quaternary-dark);
  --rs-bg-active: var(--rs-bg-active-dark);
  --rs-bg-disabled: var(--rs-bg-disabled-dark);
  --rs-bg-disabled-subtle: var(--rs-bg-disabled-subtle-dark);
  --rs-bg-overlay: var(--rs-bg-overlay-dark);
  --rs-bg-brand-primary: var(--rs-bg-brand-primary-dark);
  --rs-bg-brand-primary-alt: var(--rs-bg-brand-primary-alt-dark);
  --rs-bg-brand-secondary: var(--rs-bg-brand-secondary-dark);
  --rs-bg-brand-solid: var(--rs-bg-brand-solid-dark);
  --rs-bg-brand-solid-hover: var(--rs-bg-brand-solid-hover-dark);
  --rs-bg-brand-section: var(--rs-bg-brand-section-dark);
  --rs-bg-brand-section-subtle: var(--rs-bg-brand-section-subtle-dark);
  --rs-bg-error-primary: var(--rs-bg-error-primary-dark);
  --rs-bg-error-secondary: var(--rs-bg-error-secondary-dark);
  --rs-bg-error-solid: var(--rs-bg-error-solid-dark);
  --rs-bg-error-solid-hover: var(--rs-bg-error-solid-hover-dark);
  --rs-bg-warning-primary: var(--rs-bg-warning-primary-dark);
  --rs-bg-warning-secondary: var(--rs-bg-warning-secondary-dark);
  --rs-bg-warning-solid: var(--rs-bg-warning-solid-dark);
  --rs-bg-success-primary: var(--rs-bg-success-primary-dark);
  --rs-bg-success-secondary: var(--rs-bg-success-secondary-dark);
  --rs-bg-success-solid: var(--rs-bg-success-solid-dark);

  /* --- Borders --- */
  --rs-border-primary: var(--rs-border-primary-dark);
  --rs-border-secondary: var(--rs-border-secondary-dark);
  --rs-border-secondary-alt: var(--rs-border-secondary-alt-dark);
  --rs-border-tertiary: var(--rs-border-tertiary-dark);
  --rs-border-disabled: var(--rs-border-disabled-dark);
  --rs-border-disabled-subtle: var(--rs-border-disabled-subtle-dark);
  --rs-border-brand: var(--rs-border-brand-dark);
  --rs-border-brand-solid: var(--rs-border-brand-solid-dark);
  --rs-border-brand-solid-alt: var(--rs-border-brand-solid-alt-dark);
  --rs-border-error: var(--rs-border-error-dark);
  --rs-border-error-solid: var(--rs-border-error-solid-dark);
  --rs-border-error-subtle: var(--rs-border-error-subtle-dark);

  /* --- Form Elements --- */
  --rs-form-bg: var(--rs-form-bg-dark);
  --rs-form-bg-disabled: var(--rs-form-bg-disabled-dark);
  --rs-form-border: var(--rs-form-border-dark);
  --rs-form-border-hover: var(--rs-form-border-hover-dark);
  --rs-form-border-focus: var(--rs-form-border-focus-dark);
  --rs-form-text: var(--rs-form-text-dark);
  --rs-form-text-disabled: var(--rs-form-text-disabled-dark);
  --rs-form-placeholder: var(--rs-form-placeholder-dark);
  --rs-form-shadow: var(--rs-form-shadow-dark);
  --rs-form-focus-ring: var(--rs-form-focus-ring-dark);

  /* --- Utility Gray --- */
  --rs-utility-gray-50: var(--rs-utility-gray-50-dark);
  --rs-utility-gray-100: var(--rs-utility-gray-100-dark);
  --rs-utility-gray-200: var(--rs-utility-gray-200-dark);
  --rs-utility-gray-300: var(--rs-utility-gray-300-dark);
  --rs-utility-gray-400: var(--rs-utility-gray-400-dark);
  --rs-utility-gray-500: var(--rs-utility-gray-500-dark);
  --rs-utility-gray-600: var(--rs-utility-gray-600-dark);
  --rs-utility-gray-700: var(--rs-utility-gray-700-dark);

  /* --- Utility Brand --- */
  --rs-utility-brand-50: var(--rs-utility-brand-50-dark);
  --rs-utility-brand-100: var(--rs-utility-brand-100-dark);
  --rs-utility-brand-200: var(--rs-utility-brand-200-dark);
  --rs-utility-brand-300: var(--rs-utility-brand-300-dark);
  --rs-utility-brand-400: var(--rs-utility-brand-400-dark);
  --rs-utility-brand-500: var(--rs-utility-brand-500-dark);
  --rs-utility-brand-600: var(--rs-utility-brand-600-dark);
  --rs-utility-brand-700: var(--rs-utility-brand-700-dark);

  /* --- Utility Error --- */
  --rs-utility-error-50: var(--rs-utility-error-50-dark);
  --rs-utility-error-100: var(--rs-utility-error-100-dark);
  --rs-utility-error-200: var(--rs-utility-error-200-dark);
  --rs-utility-error-300: var(--rs-utility-error-300-dark);
  --rs-utility-error-400: var(--rs-utility-error-400-dark);
  --rs-utility-error-500: var(--rs-utility-error-500-dark);
  --rs-utility-error-600: var(--rs-utility-error-600-dark);
  --rs-utility-error-700: var(--rs-utility-error-700-dark);

  /* --- Utility Warning --- */
  --rs-utility-warning-50: var(--rs-utility-warning-50-dark);
  --rs-utility-warning-100: var(--rs-utility-warning-100-dark);
  --rs-utility-warning-200: var(--rs-utility-warning-200-dark);
  --rs-utility-warning-300: var(--rs-utility-warning-300-dark);
  --rs-utility-warning-400: var(--rs-utility-warning-400-dark);
  --rs-utility-warning-500: var(--rs-utility-warning-500-dark);
  --rs-utility-warning-600: var(--rs-utility-warning-600-dark);
  --rs-utility-warning-700: var(--rs-utility-warning-700-dark);

  /* --- Utility Success --- */
  --rs-utility-success-50: var(--rs-utility-success-50-dark);
  --rs-utility-success-100: var(--rs-utility-success-100-dark);
  --rs-utility-success-200: var(--rs-utility-success-200-dark);
  --rs-utility-success-300: var(--rs-utility-success-300-dark);
  --rs-utility-success-400: var(--rs-utility-success-400-dark);
  --rs-utility-success-500: var(--rs-utility-success-500-dark);
  --rs-utility-success-600: var(--rs-utility-success-600-dark);
  --rs-utility-success-700: var(--rs-utility-success-700-dark);

  /* --- Utility Blue Light --- */
  --rs-utility-blue-light-500: var(--rs-utility-blue-light-500-dark);
  --rs-utility-blue-light-600: var(--rs-utility-blue-light-600-dark);
  --rs-utility-blue-light-700: var(--rs-utility-blue-light-700-dark);

  /* --- Utility Pink --- */
  --rs-utility-pink-50: var(--rs-utility-pink-50-dark);
  --rs-utility-pink-100: var(--rs-utility-pink-100-dark);
  --rs-utility-pink-200: var(--rs-utility-pink-200-dark);
  --rs-utility-pink-300: var(--rs-utility-pink-300-dark);
  --rs-utility-pink-400: var(--rs-utility-pink-400-dark);
  --rs-utility-pink-500: var(--rs-utility-pink-500-dark);
  --rs-utility-pink-600: var(--rs-utility-pink-600-dark);
  --rs-utility-pink-700: var(--rs-utility-pink-700-dark);

  /* --- Utility Orange --- */
  --rs-utility-orange-50: var(--rs-utility-orange-50-dark);
  --rs-utility-orange-100: var(--rs-utility-orange-100-dark);
  --rs-utility-orange-200: var(--rs-utility-orange-200-dark);
  --rs-utility-orange-300: var(--rs-utility-orange-300-dark);
  --rs-utility-orange-400: var(--rs-utility-orange-400-dark);
  --rs-utility-orange-500: var(--rs-utility-orange-500-dark);
  --rs-utility-orange-600: var(--rs-utility-orange-600-dark);
  --rs-utility-orange-700: var(--rs-utility-orange-700-dark);
  --rs-utility-orange-800: var(--rs-utility-orange-800-dark);
  --rs-utility-orange-900: var(--rs-utility-orange-900-dark);
  --rs-utility-orange-950: var(--rs-utility-orange-950-dark);

  /* --- Utility Gray 800-950 --- */
  --rs-utility-gray-800: var(--rs-utility-gray-800-dark);
  --rs-utility-gray-900: var(--rs-utility-gray-900-dark);
  --rs-utility-gray-950: var(--rs-utility-gray-950-dark);

  /* --- Utility Brand 800-950 --- */
  --rs-utility-brand-800: var(--rs-utility-brand-800-dark);
  --rs-utility-brand-900: var(--rs-utility-brand-900-dark);
  --rs-utility-brand-950: var(--rs-utility-brand-950-dark);

  /* --- Utility Error 800-950 --- */
  --rs-utility-error-800: var(--rs-utility-error-800-dark);
  --rs-utility-error-900: var(--rs-utility-error-900-dark);
  --rs-utility-error-950: var(--rs-utility-error-950-dark);

  /* --- Utility Warning 800-950 --- */
  --rs-utility-warning-800: var(--rs-utility-warning-800-dark);
  --rs-utility-warning-900: var(--rs-utility-warning-900-dark);
  --rs-utility-warning-950: var(--rs-utility-warning-950-dark);

  /* --- Utility Success 800-950 --- */
  --rs-utility-success-800: var(--rs-utility-success-800-dark);
  --rs-utility-success-900: var(--rs-utility-success-900-dark);
  --rs-utility-success-950: var(--rs-utility-success-950-dark);

  /* --- Utility Pink 800-950 --- */
  --rs-utility-pink-800: var(--rs-utility-pink-800-dark);
  --rs-utility-pink-900: var(--rs-utility-pink-900-dark);
  --rs-utility-pink-950: var(--rs-utility-pink-950-dark);

  /* --- Alpha Colors --- */
  --rs-alpha-white-10: var(--rs-alpha-white-10-dark);
  --rs-alpha-white-20: var(--rs-alpha-white-20-dark);
  --rs-alpha-white-30: var(--rs-alpha-white-30-dark);
  --rs-alpha-white-40: var(--rs-alpha-white-40-dark);
  --rs-alpha-white-50: var(--rs-alpha-white-50-dark);
  --rs-alpha-white-60: var(--rs-alpha-white-60-dark);
  --rs-alpha-white-70: var(--rs-alpha-white-70-dark);
  --rs-alpha-white-80: var(--rs-alpha-white-80-dark);
  --rs-alpha-white-90: var(--rs-alpha-white-90-dark);
  --rs-alpha-white-100: var(--rs-alpha-white-100-dark);
  --rs-alpha-black-10: var(--rs-alpha-black-10-dark);
  --rs-alpha-black-20: var(--rs-alpha-black-20-dark);
  --rs-alpha-black-30: var(--rs-alpha-black-30-dark);
  --rs-alpha-black-40: var(--rs-alpha-black-40-dark);
  --rs-alpha-black-50: var(--rs-alpha-black-50-dark);
  --rs-alpha-black-60: var(--rs-alpha-black-60-dark);
  --rs-alpha-black-70: var(--rs-alpha-black-70-dark);
  --rs-alpha-black-80: var(--rs-alpha-black-80-dark);
  --rs-alpha-black-90: var(--rs-alpha-black-90-dark);
  --rs-alpha-black-100: var(--rs-alpha-black-100-dark);
}