@theme {
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';

    /* TEXT VARIABLES */
    --text-2xs: 0.625rem;
    --spacing-8xl: 90rem;
    --leading-9: 36px; /* rem pls */
    --leading-7: 28px;
    --leading-8: 32px;
    --leading-6: 24px;
    --leading-4: 16px;
    --leading-none: 1px;
    --leading-5: 20px;
    --tracking-tighter: -0.8px;
    --leading-heading-none: 60px;
    --tracking-tight: -0.4px;

    /* BORDER RADIUS VARIABLES */
    --radius-0: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-base: 12px; 
    --radius-lg: 16px;

    /* BORDER WIDTH VARIABLES */
    --default-border-width: 1px;

    /* TEXT COLORS VARIABLES */
    /* main text color */
    --color-body: var(--color-gray-600);
    --color-body-subtle: var(--color-gray-500);

    /* text heading colors */
    --color-heading: var(--color-gray-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-700);
    --color-fg-brand-strong: var(--color-blue-900);

    /* used for status colors */
    --color-fg-success: var(--color-emerald-700);
    --color-fg-success-strong: var(--color-emerald-900);
    --color-fg-danger: var(--color-rose-700);
    --color-fg-danger-strong: var(--color-rose-900);
    --color-fg-warning-subtle: var(--color-orange-600);
    --color-fg-warning: var(--color-orange-900);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-purple: var(--color-purple-600);
    --color-fg-cyan: var(--color-cyan-600);
    --color-fg-indigo: var(--color-indigo-600);
    --color-fg-pink: var(--color-pink-600);
    --color-fg-lime: var(--color-lime-600);

    /* BACKGROUND COLOR VARIABLES */
    /* used for neutral colors */
    --color-neutral-primary-soft: var(--color-white);
    --color-neutral-primary: var(--color-white);
    --color-neutral-primary-medium: var(--color-white);
    --color-neutral-primary-strong: var(--color-white);
    --color-neutral-secondary-soft: var(--color-gray-50);
    --color-neutral-secondary: var(--color-gray-50);
    --color-neutral-secondary-medium: var(--color-gray-50);
    --color-neutral-secondary-strong: var(--color-gray-50);
    --color-neutral-secondary-strongest: var(--color-gray-50);
    --color-neutral-tertiary-soft: var(--color-gray-100);
    --color-neutral-tertiary: var(--color-gray-100);
    --color-neutral-tertiary-medium: var(--color-gray-100);
    --color-neutral-quaternary: var(--color-gray-200);
    --color-neutral-quaternary-medium: var(--color-gray-200);
    --color-gray: var(--color-gray-300);

    /* used for brand colors */
    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);

    /* used for status colors */
    --color-success-soft: var(--color-emerald-50);
    --color-success: var(--color-emerald-700);
    --color-success-medium: var(--color-emerald-100);
    --color-success-strong: var(--color-emerald-800);
    --color-danger-soft: var(--color-rose-50);
    --color-danger: var(--color-rose-700);
    --color-danger-medium: var(--color-rose-100);
    --color-danger-strong: var(--color-rose-800);
    --color-warning-soft: var(--color-orange-50);
    --color-warning: var(--color-orange-500);
    --color-warning-medium: var(--color-orange-100);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-gray-800);
    --color-dark: var(--color-gray-800);
    --color-dark-strong: var(--color-gray-900);
    --color-disabled: var(--color-gray-100);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-600);
    --color-pink: var(--color-pink-600);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-600);
    --color-indigo: var(--color-indigo-600);
    --color-orange: var(--color-orange-400);

    /* BORDER COLOR VARIABLES */
    --color-buffer: var(--color-white);
    --color-buffer-medium: var(--color-white);
    --color-buffer-strong: var(--color-white);
    --color-muted: var(--color-gray-50);
    --color-light-subtle: var(--color-gray-100);
    --color-light: var(--color-gray-100);
    --color-light-medium: var(--color-gray-100);
    --color-default-subtle: var(--color-gray-200);
    --color-default: var(--color-gray-200);
    --color-default-medium: var(--color-gray-200);
    --color-default-strong: var(--color-gray-200);

    /* used for status colors */
    --color-success-subtle: var(--color-emerald-200);
    --color-danger-subtle: var(--color-rose-200);
    --color-warning-subtle: var(--color-orange-200);
    --color-brand-subtle: var(--color-blue-200);
    --color-brand-light: var(--color-blue-600);
    --color-dark-subtle: var(--color-gray-800);
    --color-dark-backdrop: var(--color-gray-950);

    --squares-pattern-light-url: url(/docs/images/patterns/squares.svg);
    --squares-pattern-dark-url: url(/docs/images/patterns/squares-dark.svg);

    /* shiki variables */
    --color-shiki-fg-brand: #79b8ff;
    --color-shiki-fg-brand-subtle: #9ecbff;
}

@layer theme {
    [data-theme="minimal"] {
        --font-sans: 'Open Sans', sans-serif;
        --font-body: 'Open Sans', sans-serif;
         
        /* Flowbite variables */
        
        /* shadow variables */
        --shadow-xs: 0;
        --shadow-sm: 0;
        --shadow-md: 0;
        --shadow-lg: 0;
        --shadow-xl: 0;
        --shadow: 0;
        /* text variables */
        --leading-9: 36px; /* rem pls */
        --leading-7: 28px;
        --leading-8: 32px;
        --leading-6: 24px;
        --leading-4: 16px;
        --leading-none: 1px;
        --leading-5: 20px;
        --tracking-tighter: -0.8px;
        --leading-heading-none: 60px;
        --tracking-tight: -0.4px;
        
        /* radius variables */
        --radius-0: 0px;
        --radius-xxs: 2px;
        --radius-xs: 2px;
        --radius-sm: 4px;
        --radius: 6px;
        --radius-base: 8px; 
        --radius-lg: 16px;
        
        /* border width variables */
        --default-border-width: 1px;
        
        /* text color variables */
        --color-body: var(--color-stone-600);
        --color-body-subtle: var(--color-stone-500);
        --color-heading: var(--color-stone-900);
        --color-fg-brand-subtle: var(--color-stone-200);
        --color-fg-brand: var(--color-stone-950);
        --color-fg-brand-strong: var(--color-stone-900);
        --color-fg-success: var(--color-green-700);
        --color-fg-success-strong: var(--color-green-900);
        --color-fg-danger: var(--color-red-700);
        --color-fg-danger-strong: var(--color-red-900);
        --color-fg-warning-subtle: var(--color-orange-600);
        --color-fg-warning: var(--color-orange-900);
        --color-fg-yellow: var(--color-yellow-400);
        --color-fg-disabled: var(--color-stone-400);
        --color-fg-purple: var(--color-purple-600);
        --color-fg-cyan: var(--color-cyan-600);
        --color-fg-indigo: var(--color-indigo-600);
        --color-fg-pink: var(--color-pink-600);
        --color-fg-lime: var(--color-lime-600);
        
        /* background color variables */
        --color-neutral-primary-soft: var(--color-white);
        --color-neutral-primary: var(--color-white);
        --color-neutral-primary-medium: var(--color-white);
        --color-neutral-primary-strong: var(--color-white);
        --color-neutral-secondary-soft: var(--color-stone-100);
        --color-neutral-secondary: var(--color-stone-100);
        --color-neutral-secondary-medium: var(--color-stone-100);
        --color-neutral-secondary-strong: var(--color-stone-100);
        --color-neutral-secondary-strongest: var(--color-stone-100);
        --color-neutral-tertiary-soft: var(--color-stone-100);
        --color-neutral-tertiary: var(--color-stone-100);
        --color-neutral-tertiary-medium: var(--color-stone-100);
        --color-neutral-quaternary: var(--color-stone-200);
        --color-neutral-quaternary-medium: var(--color-stone-200);
        --color-gray: var(--color-stone-300);
        --color-brand-softer: var(--color-stone-50);
        --color-brand-soft: var(--color-stone-100);
        --color-brand: var(--color-stone-900);
        --color-brand-medium: var(--color-stone-200);
        --color-brand-strong: var(--color-stone-800);
        --color-success-soft: var(--color-green-50);
        --color-success: var(--color-green-700);
        --color-success-medium: var(--color-green-100);
        --color-success-strong: var(--color-green-800);
        --color-danger-soft: var(--color-red-50);
        --color-danger: var(--color-red-700);
        --color-danger-medium: var(--color-red-100);
        --color-danger-strong: var(--color-red-800);
        --color-warning-soft: var(--color-orange-50);
        --color-warning: var(--color-orange-500);
        --color-warning-medium: var(--color-orange-100);
        --color-warning-strong: var(--color-orange-700);
        --color-dark-soft: var(--color-stone-800);
        --color-dark: var(--color-stone-800);
        --color-dark-strong: var(--color-stone-900);
        --color-disabled: var(--color-stone-100);
        --color-purple: var(--color-purple-500);
        --color-sky: var(--color-sky-500);
        --color-teal: var(--color-teal-600);
        --color-pink: var(--color-pink-600);
        --color-cyan: var(--color-cyan-500);
        --color-fuchsia: var(--color-fuchsia-600);
        --color-indigo: var(--color-indigo-600);
        --color-orange: var(--color-orange-400);
        
        /* border color variables */
        --color-buffer: var(--color-white);
        --color-buffer-medium: var(--color-white);
        --color-buffer-strong: var(--color-white);
        --color-muted: var(--color-stone-50);
        --color-light-subtle: var(--color-stone-50);
        --color-light: var(--color-stone-50);
        --color-light-medium: var(--color-stone-50);
        --color-default-subtle: var(--color-stone-100);
        --color-default: var(--color-stone-100);
        --color-default-medium: var(--color-stone-100);
        --color-default-strong: var(--color-stone-100);
        --color-success-subtle: var(--color-green-200);
        --color-danger-subtle: var(--color-red-200);
        --color-warning-subtle: var(--color-orange-200);
        --color-brand-subtle: var(--color-stone-200);
        --color-brand-light: var(--color-stone-600);
        --color-dark-subtle: var(--color-stone-800);
        --color-dark-backdrop: var(--color-stone-950);

        --squares-pattern-light-url: url(/docs/images/patterns/squares-minimal.svg);
        --squares-pattern-dark-url: url(/docs/images/patterns/squares-minimal-dark.svg);

        /* shiki variables */
        --color-shiki-fg-brand: white;          /* bright but still readable on dark bg */
        --color-shiki-fg-brand-subtle: white;   /* softer, pastel-like tint */
    }

    [data-theme="enterprise"] {
    --font-sans: 'STIX Two Text', serif;
    --font-body: 'STIX Two Text', serif;
        
    /* Flowbite variables */
    
    --leading-9: 36px; /* rem pls */
    --leading-7: 28px;
    --leading-8: 32px;
    --leading-6: 24px;
    --leading-4: 16px;
    --leading-none: 1px;
    --leading-5: 20px;
    --tracking-tighter: -0.8px;
    --leading-heading-none: 60px;
    --tracking-tight: -0.4px;
    
    --text-xs: 0.825rem;
    --text-sm:  0.925rem;
    --text-base: 1.125rem;

    /* radius variables */
    --radius-xxs: 1px;
    --radius-xs: 1px;
    --radius-sm: 1px;
    --radius: 4px;
    --radius: 4px;
    --radius-md: 4px;
    --radius-base: 4px; 
    --radius-lg: 4px;
    
    /* border width variables */
    --default-border-width: 1px;
    
    /* text color variables */
    --color-body: var(--color-zinc-600);
    --color-body-subtle: var(--color-zinc-500);
    --color-heading: var(--color-zinc-900);
    --color-fg-brand-subtle: var(--color-cyan-200);
    --color-fg-brand: var(--color-cyan-700);
    --color-fg-brand-strong: var(--color-cyan-900);
    --color-fg-success: var(--color-green-700);
    --color-fg-success-strong: var(--color-green-900);
    --color-fg-danger: var(--color-red-700);
    --color-fg-danger-strong: var(--color-red-900);
    --color-fg-warning-subtle: var(--color-orange-600);
    --color-fg-warning: var(--color-orange-900);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-zinc-400);
    --color-fg-purple: var(--color-purple-600);
    --color-fg-cyan: var(--color-cyan-600);
    --color-fg-indigo: var(--color-cyan-600);
    --color-fg-pink: var(--color-pink-600);
    --color-fg-lime: var(--color-lime-600);
    
    /* background color variables */
    --color-neutral-primary-soft: var(--color-white);
    --color-neutral-primary: var(--color-white);
    --color-neutral-primary-medium: var(--color-white);
    --color-neutral-primary-strong: var(--color-white);
    --color-neutral-secondary-soft: var(--color-white);
    --color-neutral-secondary: var(--color-white);
    --color-neutral-secondary-medium: var(--color-white);
    --color-neutral-secondary-strong: var(--color-white);
    --color-neutral-secondary-strongest: var(--color-white);
    --color-neutral-tertiary-soft: var(--color-zinc-100);
    --color-neutral-tertiary: var(--color-zinc-100);
    --color-neutral-tertiary-medium: var(--color-zinc-100);
    --color-neutral-quaternary: var(--color-zinc-200);
    --color-neutral-quaternary-medium: var(--color-zinc-200);
    --color-gray: var(--color-zinc-300);
    --color-brand-softer: var(--color-cyan-50);
    --color-brand-soft: var(--color-cyan-100);
    --color-brand: var(--color-cyan-900);
    --color-brand-medium: var(--color-cyan-200);
    --color-brand-strong: var(--color-cyan-800);
    --color-success-soft: var(--color-green-50);
    --color-success: var(--color-green-700);
    --color-success-medium: var(--color-green-100);
    --color-success-strong: var(--color-green-800);
    --color-danger-soft: var(--color-red-50);
    --color-danger: var(--color-red-700);
    --color-danger-medium: var(--color-red-100);
    --color-danger-strong: var(--color-red-800);
    --color-warning-soft: var(--color-orange-50);
    --color-warning: var(--color-orange-500);
    --color-warning-medium: var(--color-orange-100);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-zinc-800);
    --color-dark: var(--color-zinc-800);
    --color-dark-strong: var(--color-zinc-900);
    --color-disabled: var(--color-zinc-100);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-600);
    --color-pink: var(--color-pink-600);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-600);
    --color-indigo: var(--color-cyan-600);
    --color-orange: var(--color-orange-400);
    
    /* border color variables */
    --color-buffer: var(--color-white);
    --color-buffer-medium: var(--color-white);
    --color-buffer-strong: var(--color-white);
    --color-muted: var(--color-zinc-50);
    --color-light-subtle: var(--color-zinc-100);
    --color-light: var(--color-zinc-100);
    --color-light-medium: var(--color-zinc-100);
    --color-default-subtle: var(--color-zinc-200);
    --color-default: var(--color-zinc-200);
    --color-default-medium: var(--color-zinc-200);
    --color-default-strong: var(--color-zinc-200);
    --color-success-subtle: var(--color-green-200);
    --color-danger-subtle: var(--color-red-200);
    --color-warning-subtle: var(--color-orange-200);
    --color-brand-subtle: var(--color-cyan-200);
    --color-brand-light: var(--color-cyan-600);
    --color-dark-subtle: var(--color-zinc-800);
    --color-dark-backdrop: var(--color-zinc-950);

    --squares-pattern-light-url: url(/docs/images/patterns/squares-enterprise.svg);
    --squares-pattern-dark-url: url(/docs/images/patterns/squares-enterprise-dark.svg);

    /* shiki variables */
    --color-shiki-fg-brand: #56c0d8;          /* medium-light tint */
    --color-shiki-fg-brand-subtle: #8ad9e7;   /* lighter, softer tint */
    }

    [data-theme="playful"] {
        --font-sans: 'Shantell Sans', cursive;
        --font-body: 'Shantell Sans', cursive;
            
        /* Flowbite variables */
        
        --leading-9: 36px; /* rem pls */
        --leading-7: 28px;
        --leading-8: 32px;
        --leading-6: 24px;
        --leading-4: 16px;
        --leading-none: 1px;
        --leading-5: 20px;
        --tracking-tighter: -0.8px;
        --leading-heading-none: 60px;
        --tracking-tight: -0.4px;
        
        /* radius variables */
        --radius-xxs: 2px;
        --radius-xs: 2px;
        --radius-sm: 10px;
        --radius: 10px;
        --radius: 14px;
        --radius-md: 14px;
        --radius-base: 20px; 
        --radius-lg: 16px;
        
        /* border width variables */
        --default-border-width: 1px;
        
        /* text color variables */
        --color-body: var(--color-slate-600);
        --color-body-subtle: var(--color-slate-500);
        --color-heading: var(--color-slate-900);
        --color-fg-brand-subtle: var(--color-pink-200);
        --color-fg-brand: var(--color-pink-700);
        --color-fg-brand-strong: var(--color-pink-900);
        --color-fg-success: var(--color-green-700);
        --color-fg-success-strong: var(--color-green-900);
        --color-fg-danger: var(--color-red-700);
        --color-fg-danger-strong: var(--color-red-900);
        --color-fg-warning-subtle: var(--color-orange-600);
        --color-fg-warning: var(--color-orange-900);
        --color-fg-yellow: var(--color-yellow-400);
        --color-fg-disabled: var(--color-slate-400);
        --color-fg-purple: var(--color-purple-600);
        --color-fg-cyan: var(--color-cyan-600);
        --color-fg-indigo: var(--color-indigo-600);
        --color-fg-pink: var(--color-pink-600);
        --color-fg-lime: var(--color-lime-600);
        
        /* background color variables */
        --color-neutral-primary-soft: var(--color-white);
        --color-neutral-primary: var(--color-white);
        --color-neutral-primary-medium: var(--color-white);
        --color-neutral-primary-strong: var(--color-white);
        --color-neutral-secondary-soft: var(--color-slate-50);
        --color-neutral-secondary: var(--color-slate-50);
        --color-neutral-secondary-medium: var(--color-slate-50);
        --color-neutral-secondary-strong: var(--color-slate-50);
        --color-neutral-secondary-strongest: var(--color-slate-50);
        --color-neutral-tertiary-soft: var(--color-slate-100);
        --color-neutral-tertiary: var(--color-slate-100);
        --color-neutral-tertiary-medium: var(--color-slate-100);
        --color-neutral-quaternary: var(--color-slate-200);
        --color-neutral-quaternary-medium: var(--color-slate-200);
        --color-gray: var(--color-slate-300);
        --color-brand-softer: var(--color-pink-50);
        --color-brand-soft: var(--color-pink-100);
        --color-brand: var(--color-pink-900);
        --color-brand-medium: var(--color-pink-200);
        --color-brand-strong: var(--color-pink-800);
        --color-success-soft: var(--color-green-50);
        --color-success: var(--color-green-700);
        --color-success-medium: var(--color-green-100);
        --color-success-strong: var(--color-green-800);
        --color-danger-soft: var(--color-red-50);
        --color-danger: var(--color-red-700);
        --color-danger-medium: var(--color-red-100);
        --color-danger-strong: var(--color-red-800);
        --color-warning-soft: var(--color-orange-50);
        --color-warning: var(--color-orange-500);
        --color-warning-medium: var(--color-orange-100);
        --color-warning-strong: var(--color-orange-700);
        --color-dark-soft: var(--color-slate-800);
        --color-dark: var(--color-slate-800);
        --color-dark-strong: var(--color-slate-900);
        --color-disabled: var(--color-slate-100);
        --color-purple: var(--color-purple-500);
        --color-sky: var(--color-sky-500);
        --color-teal: var(--color-teal-600);
        --color-pink: var(--color-pink-600);
        --color-cyan: var(--color-cyan-500);
        --color-fuchsia: var(--color-fuchsia-600);
        --color-indigo: var(--color-indigo-600);
        --color-orange: var(--color-orange-400);
        
        /* border color variables */
        --color-buffer: var(--color-white);
        --color-buffer-medium: var(--color-white);
        --color-buffer-strong: var(--color-white);
        --color-muted: var(--color-slate-50);
        --color-light-subtle: var(--color-slate-100);
        --color-light: var(--color-slate-100);
        --color-light-medium: var(--color-slate-100);
        --color-default-subtle: var(--color-slate-200);
        --color-default: var(--color-slate-200);
        --color-default-medium: var(--color-slate-200);
        --color-default-strong: var(--color-slate-200);
        --color-success-subtle: var(--color-green-200);
        --color-danger-subtle: var(--color-red-200);
        --color-warning-subtle: var(--color-orange-200);
        --color-brand-subtle: var(--color-pink-200);
        --color-brand-light: var(--color-pink-600);
        --color-dark-subtle: var(--color-slate-800);
        --color-dark-backdrop: var(--color-slate-950);

        --squares-pattern-light-url: url(/docs/images/patterns/squares-playful.svg);
        --squares-pattern-dark-url: url(/docs/images/patterns/squares-playful-dark.svg);

        /* shiki variables */
        --color-shiki-fg-brand: #f06292;          /* vivid but readable on dark bg */
        --color-shiki-fg-brand-subtle: #f48fb1;   /* lighter and friendlier tone */
    }

    [data-theme="mono"] {
        --font-sans: 'Google Sans Code', monospace;
        --font-body: 'Google Sans Code', monospace;
        
        /* Flowbite variables */
        
        --leading-9: 36px; /* rem pls */
        --leading-7: 28px;
        --leading-8: 32px;
        --leading-6: 24px;
        --leading-4: 16px;
        --leading-none: 1px;
        --leading-5: 20px;
        --tracking-tighter: -0.8px;
        --leading-heading-none: 60px;
        --tracking-tight: -0.4px;
        --tracking-normal: -0.4px;
        
        /* radius variables */
        --radius-xxs: 1px;
        --radius-xs: 1px;
        --radius-sm: 1px;
        --radius: 1px;
        --radius-md: 1px;
        --radius-base: 1px; 
        --radius-lg: 1px;
        
        /* border width variables */
        --default-border-width: 1px;
        
        /* text color variables */
        --color-body: var(--color-neutral-600);
        --color-body-subtle: var(--color-neutral-500);
        --color-heading: var(--color-neutral-900);
        --color-fg-brand-subtle: var(--color-indigo-200);
        --color-fg-brand: var(--color-indigo-700);
        --color-fg-brand-strong: var(--color-indigo-900);
        --color-fg-success: var(--color-green-700);
        --color-fg-success-strong: var(--color-green-900);
        --color-fg-danger: var(--color-red-700);
        --color-fg-danger-strong: var(--color-red-900);
        --color-fg-warning-subtle: var(--color-orange-600);
        --color-fg-warning: var(--color-orange-900);
        --color-fg-yellow: var(--color-yellow-400);
        --color-fg-disabled: var(--color-neutral-400);
        --color-fg-purple: var(--color-purple-600);
        --color-fg-cyan: var(--color-cyan-600);
        --color-fg-indigo: var(--color-indigo-600);
        --color-fg-pink: var(--color-pink-600);
        --color-fg-lime: var(--color-lime-600);
        
        /* background color variables */
        --color-neutral-primary-soft: var(--color-white);
        --color-neutral-primary: var(--color-white);
        --color-neutral-primary-medium: var(--color-white);
        --color-neutral-primary-strong: var(--color-white);
        --color-neutral-secondary-soft: var(--color-neutral-50);
        --color-neutral-secondary: var(--color-neutral-50);
        --color-neutral-secondary-medium: var(--color-neutral-50);
        --color-neutral-secondary-strong: var(--color-neutral-50);
        --color-neutral-secondary-strongest: var(--color-neutral-50);
        --color-neutral-tertiary-soft: var(--color-neutral-100);
        --color-neutral-tertiary: var(--color-neutral-100);
        --color-neutral-tertiary-medium: var(--color-neutral-100);
        --color-neutral-quaternary: var(--color-neutral-200);
        --color-neutral-quaternary-medium: var(--color-neutral-200);
        --color-gray: var(--color-neutral-300);
        --color-brand-softer: var(--color-indigo-50);
        --color-brand-soft: var(--color-indigo-100);
        --color-brand: var(--color-indigo-900);
        --color-brand-medium: var(--color-indigo-200);
        --color-brand-strong: var(--color-indigo-800);
        --color-success-soft: var(--color-green-50);
        --color-success: var(--color-green-700);
        --color-success-medium: var(--color-green-100);
        --color-success-strong: var(--color-green-800);
        --color-danger-soft: var(--color-red-50);
        --color-danger: var(--color-red-700);
        --color-danger-medium: var(--color-red-100);
        --color-danger-strong: var(--color-red-800);
        --color-warning-soft: var(--color-orange-50);
        --color-warning: var(--color-orange-500);
        --color-warning-medium: var(--color-orange-100);
        --color-warning-strong: var(--color-orange-700);
        --color-dark-soft: var(--color-neutral-800);
        --color-dark: var(--color-neutral-800);
        --color-dark-strong: var(--color-neutral-900);
        --color-disabled: var(--color-neutral-100);
        --color-purple: var(--color-purple-500);
        --color-sky: var(--color-sky-500);
        --color-teal: var(--color-teal-600);
        --color-pink: var(--color-pink-600);
        --color-cyan: var(--color-cyan-500);
        --color-fuchsia: var(--color-fuchsia-600);
        --color-indigo: var(--color-indigo-600);
        --color-orange: var(--color-orange-400);
        
        /* border color variables */
        --color-buffer: var(--color-white);
        --color-buffer-medium: var(--color-white);
        --color-buffer-strong: var(--color-white);
        --color-muted: var(--color-neutral-50);
        --color-light-subtle: var(--color-neutral-100);
        --color-light: var(--color-neutral-100);
        --color-light-medium: var(--color-neutral-100);
        --color-default-subtle: var(--color-neutral-200);
        --color-default: var(--color-neutral-200);
        --color-default-medium: var(--color-neutral-200);
        --color-default-strong: var(--color-neutral-200);
        --color-success-subtle: var(--color-green-200);
        --color-danger-subtle: var(--color-red-200);
        --color-warning-subtle: var(--color-orange-200);
        --color-brand-subtle: var(--color-indigo-200);
        --color-brand-light: var(--color-indigo-600);
        --color-dark-subtle: var(--color-neutral-800);
        --color-dark-backdrop: var(--color-neutral-950);
        
        --squares-pattern-light-url: url(/docs/images/patterns/squares-mono.svg);
        --squares-pattern-dark-url: url(/docs/images/patterns/squares-mono-dark.svg);

        /* shiki variables */
        --color-shiki-fg-brand: #9387ff;          /* balanced mid-light tint */
        --color-shiki-fg-brand-subtle: #b4adff;   /* gentle highlight version */
    }
}

[data-theme="modern"].dark, [data-theme="modern"] .dark {
   /* text color variables */
     --color-body: var(--color-gray-400);
     --color-body-subtle: var(--color-gray-400);
     --color-heading: var(--color-white);
     --color-fg-brand-subtle: var(--color-blue-200);
     --color-fg-brand: var(--color-blue-500);
     --color-fg-brand-strong: var(--color-blue-400);
     --color-fg-success: var(--color-emerald-600);
     --color-fg-success-strong: var(--color-emerald-300);
     --color-fg-danger: var(--color-rose-500);
     --color-fg-danger-strong: var(--color-rose-300);
     --color-fg-warning-subtle: var(--color-orange-500);
     --color-fg-warning: var(--color-orange-300);
     --color-fg-yellow: var(--color-yellow-400);
     --color-fg-disabled: var(--color-gray-600);
     --color-fg-purple: var(--color-purple-500);
     --color-fg-cyan: var(--color-cyan-500);
     --color-fg-indigo: var(--color-indigo-500);
     --color-fg-pink: var(--color-pink-500);
     --color-fg-lime: var(--color-lime-500);
 
   /* background color variables */
     --color-neutral-primary-soft: var(--color-gray-900);
     --color-neutral-primary: var(--color-gray-950);
     --color-neutral-primary-medium: var(--color-gray-800);
     --color-neutral-primary-strong: var(--color-gray-700);
     --color-neutral-secondary-soft: var(--color-gray-900);
     --color-neutral-secondary: var(--color-gray-950);
     --color-neutral-secondary-medium: var(--color-gray-800);
     --color-neutral-secondary-strong: var(--color-gray-700);
     --color-neutral-secondary-strongest: var(--color-gray-600);
     --color-neutral-tertiary-soft: var(--color-gray-900);
     --color-neutral-tertiary: var(--color-gray-800);
     --color-neutral-tertiary-medium: var(--color-gray-700);
     --color-neutral-quaternary: var(--color-gray-700);
     --color-neutral-quaternary-medium: var(--color-gray-600);
     --color-gray: var(--color-gray-600);
     --color-brand-softer: var(--color-blue-950);
     --color-brand-soft: var(--color-blue-900);
     --color-brand: var(--color-blue-600);
     --color-brand-medium: var(--color-blue-900);
     --color-brand-strong: var(--color-blue-700);
     --color-success-soft: var(--color-emerald-950);
     --color-success: var(--color-emerald-600);
     --color-success-medium: var(--color-emerald-900);
     --color-success-strong: var(--color-emerald-700);
     --color-danger-soft: var(--color-rose-950);
     --color-danger: var(--color-rose-700);
     --color-danger-medium: var(--color-rose-900);
     --color-danger-strong: var(--color-rose-800);
     --color-warning-soft: var(--color-orange-950);
     --color-warning: var(--color-orange-600);
     --color-warning-medium: var(--color-orange-900);
     --color-warning-strong: var(--color-orange-700);
     --color-dark-soft: var(--color-gray-700);
     --color-dark: var(--color-gray-800);
     --color-dark-strong: var(--color-gray-700);
     --color-disabled: var(--color-gray-800);
     --color-purple: var(--color-purple-500);
     --color-sky: var(--color-sky-500);
     --color-teal: var(--color-teal-500);
     --color-pink: var(--color-pink-500);
     --color-cyan: var(--color-cyan-500);
     --color-fuchsia: var(--color-fuchsia-500);
     --color-indigo: var(--color-indigo-500);
     --color-orange: var(--color-orange-400);
 
      /* border color variables */
     --color-buffer: var(--color-gray-950);
     --color-buffer-medium: var(--color-gray-900);
     --color-buffer-strong: var(--color-gray-800);
     --color-muted: var(--color-gray-900);
     --color-light-subtle: var(--color-gray-900);
     --color-light: var(--color-gray-800);
     --color-light-medium: var(--color-gray-700);
     --color-default-subtle: var(--color-gray-900);
     --color-default: var(--color-gray-800);
     --color-default-medium: var(--color-gray-700);
     --color-default-strong: var(--color-gray-600);
     --color-success-subtle: var(--color-emerald-900);
     --color-danger-subtle: var(--color-rose-900);
     --color-warning-subtle: var(--color-orange-900);
     --color-brand-subtle: var(--color-blue-900);
     --color-brand-light: var(--color-blue-600);
     --color-dark-subtle: var(--color-gray-700);
     --color-dark-backdrop: var(--color-gray-950);
     
}

[data-theme="minimal"].dark, [data-theme="minimal"] .dark {
    /* text color variables */
    --color-body: var(--color-stone-400);
    --color-body-subtle: var(--color-stone-400);
    --color-heading: var(--color-white);
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-white);
    --color-fg-brand-strong: var(--color-stone-200);
    --color-fg-success: var(--color-green-600);
    --color-fg-success-strong: var(--color-green-300);
    --color-fg-danger: var(--color-red-500);
    --color-fg-danger-strong: var(--color-red-300);
    --color-fg-warning-subtle: var(--color-orange-500);
    --color-fg-warning: var(--color-orange-300);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-stone-600);
    --color-fg-purple: var(--color-purple-500);
    --color-fg-cyan: var(--color-cyan-500);
    --color-fg-indigo: var(--color-indigo-500);
    --color-fg-pink: var(--color-pink-500);
    --color-fg-lime: var(--color-lime-500);
    
    /* background color variables */
    --color-neutral-primary-soft: var(--color-stone-900);
    --color-neutral-primary: var(--color-stone-950);
    --color-neutral-primary-medium: var(--color-stone-800);
    --color-neutral-primary-strong: var(--color-stone-700);
    --color-neutral-secondary-soft: var(--color-stone-900);
    --color-neutral-secondary: var(--color-stone-950);
    --color-neutral-secondary-medium: var(--color-stone-800);
    --color-neutral-secondary-strong: var(--color-stone-700);
    --color-neutral-secondary-strongest: var(--color-stone-600);
    --color-neutral-tertiary-soft: var(--color-stone-900);
    --color-neutral-tertiary: var(--color-stone-800);
    --color-neutral-tertiary-medium: var(--color-stone-700);
    --color-neutral-quaternary: var(--color-stone-700);
    --color-neutral-quaternary-medium: var(--color-stone-600);
    --color-gray: var(--color-stone-600);
    --color-brand-softer: var(--color-stone-900);
    --color-brand-soft: var(--color-stone-900);
    --color-brand: var(--color-stone-600);
    --color-brand-medium: var(--color-stone-900);
    --color-brand-strong: var(--color-stone-700);
    --color-success-soft: var(--color-green-950);
    --color-success: var(--color-green-600);
    --color-success-medium: var(--color-green-900);
    --color-success-strong: var(--color-green-700);
    --color-danger-soft: var(--color-red-950);
    --color-danger: var(--color-red-700);
    --color-danger-medium: var(--color-red-900);
    --color-danger-strong: var(--color-red-800);
    --color-warning-soft: var(--color-orange-950);
    --color-warning: var(--color-orange-600);
    --color-warning-medium: var(--color-orange-900);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-stone-700);
    --color-dark: var(--color-stone-800);
    --color-dark-strong: var(--color-stone-700);
    --color-disabled: var(--color-stone-800);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-500);
    --color-pink: var(--color-pink-500);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-500);
    --color-indigo: var(--color-indigo-500);
    --color-orange: var(--color-orange-400);
    
    /* border color variables */
    --color-buffer: var(--color-stone-950);
    --color-buffer-medium: var(--color-stone-900);
    --color-buffer-strong: var(--color-stone-800);
    --color-muted: var(--color-stone-900);
    --color-light-subtle: var(--color-stone-900);
    --color-light: var(--color-stone-800);
    --color-light-medium: var(--color-stone-700);
    --color-default-subtle: var(--color-stone-900);
    --color-default: var(--color-stone-900);
    --color-default-medium: var(--color-stone-800);
    --color-default-strong: var(--color-stone-700);
    --color-success-subtle: var(--color-green-900);
    --color-danger-subtle: var(--color-red-900);
    --color-warning-subtle: var(--color-orange-900);
    --color-brand-subtle: var(--color-stone-900);
    --color-brand-light: var(--color-stone-600);
    --color-dark-subtle: var(--color-stone-700);
    --color-dark-backdrop: var(--color-stone-950);
    
}

[data-theme="enterprise"].dark, [data-theme="enterprise"] .dark {
/* text color variables */
--color-body: var(--color-zinc-400);
--color-body-subtle: var(--color-zinc-400);
--color-heading: var(--color-white);
--color-fg-brand-subtle: var(--color-cyan-200);
--color-fg-brand: var(--color-cyan-500);
--color-fg-brand-strong: var(--color-cyan-400);
--color-fg-success: var(--color-green-600);
--color-fg-success-strong: var(--color-green-300);
--color-fg-danger: var(--color-red-500);
--color-fg-danger-strong: var(--color-red-300);
--color-fg-warning-subtle: var(--color-orange-500);
--color-fg-warning: var(--color-orange-300);
--color-fg-yellow: var(--color-yellow-400);
--color-fg-disabled: var(--color-zinc-600);
--color-fg-purple: var(--color-purple-500);
--color-fg-cyan: var(--color-cyan-500);
--color-fg-indigo: var(--color-cyan-500);
--color-fg-pink: var(--color-pink-500);
--color-fg-lime: var(--color-lime-500);

/* background color variables */
--color-neutral-primary-soft: var(--color-zinc-900);
--color-neutral-primary: var(--color-zinc-950);
--color-neutral-primary-medium: var(--color-zinc-800);
--color-neutral-primary-strong: var(--color-zinc-700);
--color-neutral-secondary-soft: var(--color-zinc-900);
--color-neutral-secondary: var(--color-zinc-950);
--color-neutral-secondary-medium: var(--color-zinc-800);
--color-neutral-secondary-strong: var(--color-zinc-700);
--color-neutral-secondary-strongest: var(--color-zinc-600);
--color-neutral-tertiary-soft: var(--color-zinc-900);
--color-neutral-tertiary: var(--color-zinc-800);
--color-neutral-tertiary-medium: var(--color-zinc-700);
--color-neutral-quaternary: var(--color-zinc-700);
--color-neutral-quaternary-medium: var(--color-zinc-600);
--color-gray: var(--color-zinc-600);
--color-brand-softer: var(--color-cyan-950);
--color-brand-soft: var(--color-cyan-900);
--color-brand: var(--color-cyan-600);
--color-brand-medium: var(--color-cyan-900);
--color-brand-strong: var(--color-cyan-700);
--color-success-soft: var(--color-green-950);
--color-success: var(--color-green-600);
--color-success-medium: var(--color-green-900);
--color-success-strong: var(--color-green-700);
--color-danger-soft: var(--color-red-950);
--color-danger: var(--color-red-700);
--color-danger-medium: var(--color-red-900);
--color-danger-strong: var(--color-red-800);
--color-warning-soft: var(--color-orange-950);
--color-warning: var(--color-orange-600);
--color-warning-medium: var(--color-orange-900);
--color-warning-strong: var(--color-orange-700);
--color-dark-soft: var(--color-zinc-700);
--color-dark: var(--color-zinc-800);
--color-dark-strong: var(--color-zinc-700);
--color-disabled: var(--color-zinc-800);
--color-purple: var(--color-purple-500);
--color-sky: var(--color-sky-500);
--color-teal: var(--color-teal-500);
--color-pink: var(--color-pink-500);
--color-cyan: var(--color-cyan-500);
--color-fuchsia: var(--color-fuchsia-500);
--color-indigo: var(--color-cyan-500);
--color-orange: var(--color-orange-400);

/* border color variables */
--color-buffer: var(--color-zinc-950);
--color-buffer-medium: var(--color-zinc-900);
--color-buffer-strong: var(--color-zinc-800);
--color-muted: var(--color-zinc-900);
--color-light-subtle: var(--color-zinc-900);
--color-light: var(--color-zinc-800);
--color-light-medium: var(--color-zinc-700);
--color-default-subtle: var(--color-zinc-900);
--color-default: var(--color-zinc-800);
--color-default-medium: var(--color-zinc-700);
--color-default-strong: var(--color-zinc-600);
--color-success-subtle: var(--color-green-900);
--color-danger-subtle: var(--color-red-900);
--color-warning-subtle: var(--color-orange-900);
--color-brand-subtle: var(--color-cyan-900);
--color-brand-light: var(--color-cyan-600);
--color-dark-subtle: var(--color-zinc-700);
--color-dark-backdrop: var(--color-zinc-950);

}

[data-theme="playful"].dark, [data-theme="playful"] .dark {
/* text color variables */
--color-body: var(--color-slate-400);
--color-body-subtle: var(--color-slate-400);
--color-heading: var(--color-white);
--color-fg-brand-subtle: var(--color-pink-200);
--color-fg-brand: var(--color-pink-500);
--color-fg-brand-strong: var(--color-pink-400);
--color-fg-success: var(--color-green-600);
--color-fg-success-strong: var(--color-green-300);
--color-fg-danger: var(--color-red-500);
--color-fg-danger-strong: var(--color-red-300);
--color-fg-warning-subtle: var(--color-orange-500);
--color-fg-warning: var(--color-orange-300);
--color-fg-yellow: var(--color-yellow-400);
--color-fg-disabled: var(--color-slate-600);
--color-fg-purple: var(--color-purple-500);
--color-fg-cyan: var(--color-cyan-500);
--color-fg-indigo: var(--color-indigo-500);
--color-fg-pink: var(--color-pink-500);
--color-fg-lime: var(--color-lime-500);

/* background color variables */
--color-neutral-primary-soft: var(--color-slate-900);
--color-neutral-primary: var(--color-slate-950);
--color-neutral-primary-medium: var(--color-slate-800);
--color-neutral-primary-strong: var(--color-slate-700);
--color-neutral-secondary-soft: var(--color-slate-900);
--color-neutral-secondary: var(--color-slate-950);
--color-neutral-secondary-medium: var(--color-slate-800);
--color-neutral-secondary-strong: var(--color-slate-700);
--color-neutral-secondary-strongest: var(--color-slate-600);
--color-neutral-tertiary-soft: var(--color-slate-900);
--color-neutral-tertiary: var(--color-slate-800);
--color-neutral-tertiary-medium: var(--color-slate-700);
--color-neutral-quaternary: var(--color-slate-700);
--color-neutral-quaternary-medium: var(--color-slate-600);
--color-gray: var(--color-slate-600);
--color-brand-softer: var(--color-pink-950);
--color-brand-soft: var(--color-pink-900);
--color-brand: var(--color-pink-600);
--color-brand-medium: var(--color-pink-900);
--color-brand-strong: var(--color-pink-700);
--color-success-soft: var(--color-green-950);
--color-success: var(--color-green-600);
--color-success-medium: var(--color-green-900);
--color-success-strong: var(--color-green-700);
--color-danger-soft: var(--color-red-950);
--color-danger: var(--color-red-700);
--color-danger-medium: var(--color-red-900);
--color-danger-strong: var(--color-red-800);
--color-warning-soft: var(--color-orange-950);
--color-warning: var(--color-orange-600);
--color-warning-medium: var(--color-orange-900);
--color-warning-strong: var(--color-orange-700);
--color-dark-soft: var(--color-slate-700);
--color-dark: var(--color-slate-800);
--color-dark-strong: var(--color-slate-700);
--color-disabled: var(--color-slate-800);
--color-purple: var(--color-purple-500);
--color-sky: var(--color-sky-500);
--color-teal: var(--color-teal-500);
--color-pink: var(--color-pink-500);
--color-cyan: var(--color-cyan-500);
--color-fuchsia: var(--color-fuchsia-500);
--color-indigo: var(--color-indigo-500);
--color-orange: var(--color-orange-400);

/* border color variables */
--color-buffer: var(--color-slate-950);
--color-buffer-medium: var(--color-slate-900);
--color-buffer-strong: var(--color-slate-800);
--color-muted: var(--color-slate-900);
--color-light-subtle: var(--color-slate-900);
--color-light: var(--color-slate-800);
--color-light-medium: var(--color-slate-700);
--color-default-subtle: var(--color-slate-900);
--color-default: var(--color-slate-800);
--color-default-medium: var(--color-slate-700);
--color-default-strong: var(--color-slate-600);
--color-success-subtle: var(--color-green-900);
--color-danger-subtle: var(--color-red-900);
--color-warning-subtle: var(--color-orange-900);
--color-brand-subtle: var(--color-pink-900);
--color-brand-light: var(--color-pink-600);
--color-dark-subtle: var(--color-slate-700);
--color-dark-backdrop: var(--color-slate-950);

}

[data-theme="mono"].dark, [data-theme="mono"] .dark {
    /* text color variables */
    --color-body: var(--color-neutral-400);
    --color-body-subtle: var(--color-neutral-400);
    --color-heading: var(--color-white);
    --color-fg-brand-subtle: var(--color-indigo-200);
    --color-fg-brand: var(--color-indigo-500);
    --color-fg-brand-strong: var(--color-indigo-400);
    --color-fg-success: var(--color-green-600);
    --color-fg-success-strong: var(--color-green-300);
    --color-fg-danger: var(--color-red-500);
    --color-fg-danger-strong: var(--color-red-300);
    --color-fg-warning-subtle: var(--color-orange-500);
    --color-fg-warning: var(--color-orange-300);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-neutral-600);
    --color-fg-purple: var(--color-purple-500);
    --color-fg-cyan: var(--color-cyan-500);
    --color-fg-indigo: var(--color-indigo-500);
    --color-fg-pink: var(--color-pink-500);
    --color-fg-lime: var(--color-lime-500);
    
    /* background color variables */
    --color-neutral-primary-soft: var(--color-neutral-900);
    --color-neutral-primary: var(--color-neutral-950);
    --color-neutral-primary-medium: var(--color-neutral-800);
    --color-neutral-primary-strong: var(--color-neutral-700);
    --color-neutral-secondary-soft: var(--color-neutral-900);
    --color-neutral-secondary: var(--color-neutral-950);
    --color-neutral-secondary-medium: var(--color-neutral-800);
    --color-neutral-secondary-strong: var(--color-neutral-700);
    --color-neutral-secondary-strongest: var(--color-neutral-600);
    --color-neutral-tertiary-soft: var(--color-neutral-900);
    --color-neutral-tertiary: var(--color-neutral-800);
    --color-neutral-tertiary-medium: var(--color-neutral-700);
    --color-neutral-quaternary: var(--color-neutral-700);
    --color-neutral-quaternary-medium: var(--color-neutral-600);
    --color-gray: var(--color-neutral-600);
    --color-brand-softer: var(--color-indigo-950);
    --color-brand-soft: var(--color-indigo-900);
    --color-brand: var(--color-indigo-600);
    --color-brand-medium: var(--color-indigo-900);
    --color-brand-strong: var(--color-indigo-700);
    --color-success-soft: var(--color-green-950);
    --color-success: var(--color-green-600);
    --color-success-medium: var(--color-green-900);
    --color-success-strong: var(--color-green-700);
    --color-danger-soft: var(--color-red-950);
    --color-danger: var(--color-red-700);
    --color-danger-medium: var(--color-red-900);
    --color-danger-strong: var(--color-red-800);
    --color-warning-soft: var(--color-orange-950);
    --color-warning: var(--color-orange-600);
    --color-warning-medium: var(--color-orange-900);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-neutral-700);
    --color-dark: var(--color-neutral-800);
    --color-dark-strong: var(--color-neutral-700);
    --color-disabled: var(--color-neutral-800);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-500);
    --color-pink: var(--color-pink-500);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-500);
    --color-indigo: var(--color-indigo-500);
    --color-orange: var(--color-orange-400);
    
    /* border color variables */
    --color-buffer: var(--color-neutral-950);
    --color-buffer-medium: var(--color-neutral-900);
    --color-buffer-strong: var(--color-neutral-800);
    --color-muted: var(--color-neutral-900);
    --color-light-subtle: var(--color-neutral-900);
    --color-light: var(--color-neutral-800);
    --color-light-medium: var(--color-neutral-700);
    --color-default-subtle: var(--color-neutral-900);
    --color-default: var(--color-neutral-800);
    --color-default-medium: var(--color-neutral-700);
    --color-default-strong: var(--color-neutral-600);
    --color-success-subtle: var(--color-green-900);
    --color-danger-subtle: var(--color-red-900);
    --color-warning-subtle: var(--color-orange-900);
    --color-brand-subtle: var(--color-indigo-900);
    --color-brand-light: var(--color-indigo-600);
    --color-dark-subtle: var(--color-neutral-700);
    --color-dark-backdrop: var(--color-neutral-950);
}