/* =============================================================================
   RESTOKE DESIGN TOKENS - SEMANTIC COLORS
   =============================================================================
   Application-level color tokens that reference primitives. Use these tokens
   in components for consistent theming and automatic dark mode support.

   Requires: colors.primitives.css (must be loaded first)
   ============================================================================= */

@layer base {
    :root {

      /* ==========================================
         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: var(--rs-white);        /* 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-500); /* Quaternary text on brand backgrounds */
      --rs-text-white: var(--rs-white);                    /* 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-100); /* Quaternary on brand (dark) */
      --rs-text-white-dark: var(--rs-white);              /* 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: var(--rs-white);                      /* 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: var(--rs-white);                 /* 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: var(--rs-white);                   /* Primary/main background */
      --rs-bg: var(--rs-bg-primary);                      /* Alias for --rs-bg-primary */
      --rs-bg-primary-alt: var(--rs-white);               /* 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-error-solid-active: var(--rs-error-800);    /* Solid error active/pressed */
      --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-error-solid-active-dark: var(--rs-error-700); /* Error solid active (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: var(--rs-white);                      /* 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: var(--rs-text-body-color);           /* 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 ---
         Note: Shadow tokens are defined in effects.css
         Use --rs-shadow-xs, --rs-shadow-sm, etc. from that file
         ---------------------------------------- */

      /* --- 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) ---
         Note: This is a neutral gray scale (no blue tint).
         Intentionally different from --rs-gray-* which has a slight blue tint.
         Use for neutral UI elements that shouldn't have brand influence.
         ---------------------------------------- */
      --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) ---
         Note: This is a pure red-orange scale for high-contrast text.
         Intentionally different from --rs-brand-* which is coral/salmon.
         Use --rs-utility-brand-500 for text that needs WCAG contrast.
         ---------------------------------------- */
      --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: var(--rs-error-50);
      --rs-utility-error-100: var(--rs-error-100);
      --rs-utility-error-200: var(--rs-error-200);
      --rs-utility-error-300: var(--rs-error-300);
      --rs-utility-error-400: var(--rs-error-400);
      --rs-utility-error-500: var(--rs-error-500);
      --rs-utility-error-600: var(--rs-error-600);
      --rs-utility-error-700: var(--rs-error-700);
      --rs-utility-error-800: var(--rs-error-800);
      --rs-utility-error-900: var(--rs-error-900);
      --rs-utility-error-950: var(--rs-error-950);

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

      /* --- Utility Warning (Light Mode) --- */
      --rs-utility-warning-50: var(--rs-warning-50);
      --rs-utility-warning-100: var(--rs-warning-100);
      --rs-utility-warning-200: var(--rs-warning-200);
      --rs-utility-warning-300: var(--rs-warning-300);
      --rs-utility-warning-400: var(--rs-warning-400);
      --rs-utility-warning-500: var(--rs-warning-500);
      --rs-utility-warning-600: var(--rs-warning-600);
      --rs-utility-warning-700: var(--rs-warning-700);
      --rs-utility-warning-800: var(--rs-warning-800);
      --rs-utility-warning-900: var(--rs-warning-900);
      --rs-utility-warning-950: var(--rs-warning-950);

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

      /* --- Utility Success (Light Mode) --- */
      --rs-utility-success-50: var(--rs-success-50);
      --rs-utility-success-100: var(--rs-success-100);
      --rs-utility-success-200: var(--rs-success-200);
      --rs-utility-success-300: var(--rs-success-300);
      --rs-utility-success-400: var(--rs-success-400);
      --rs-utility-success-500: var(--rs-success-500);
      --rs-utility-success-600: var(--rs-success-600);
      --rs-utility-success-700: var(--rs-success-700);
      --rs-utility-success-800: var(--rs-success-800);
      --rs-utility-success-900: var(--rs-success-900);
      --rs-utility-success-950: var(--rs-success-950);

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

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

      /* --- 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: var(--rs-pink-50);
      --rs-utility-pink-100: var(--rs-pink-100);
      --rs-utility-pink-200: var(--rs-pink-200);
      --rs-utility-pink-300: var(--rs-pink-300);
      --rs-utility-pink-400: var(--rs-pink-400);
      --rs-utility-pink-500: var(--rs-pink-500);
      --rs-utility-pink-600: var(--rs-pink-600);
      --rs-utility-pink-700: var(--rs-pink-700);
      --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: var(--rs-orange-50);
      --rs-utility-orange-100: var(--rs-orange-100);
      --rs-utility-orange-200: var(--rs-orange-200);
      --rs-utility-orange-300: var(--rs-orange-300);
      --rs-utility-orange-400: var(--rs-orange-400);
      --rs-utility-orange-500: var(--rs-orange-500);
      --rs-utility-orange-600: var(--rs-orange-600);
      --rs-utility-orange-700: var(--rs-orange-700);
      --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);
    }
}