@raminy/css-config/dist/index.css

Tailwind CSS v4 configuration with predefined themes, semantic color tokens, and SCSS utilities for theme customization and generation.

:root{--theme-primary-mode-light: hsl(195, 100%, 32%);--theme-primary-mode-dark: hsl(195, 100%, 32%);--theme-primary: var(--theme-primary-color-cg-blue);--color-primary: var(--theme-primary);--theme-primary-hover-mode-light: hsl(195, 100%, 28.8%);--theme-primary-hover-mode-dark: hsl(195, 100%, 38.8%);--theme-primary-hover: var(--theme-primary-hover-color-cg-blue);--color-primary-hover: var(--theme-primary-hover);--theme-primary-active-mode-light: hsl(195, 100%, 25.6%);--theme-primary-active-mode-dark: hsl(195, 100%, 45.6%);--theme-primary-active: var(--theme-primary-active-color-cg-blue);--color-primary-active: var(--theme-primary-active);--theme-primary-inverted-mode-light: hsl(195, 100%, 32%);--theme-primary-inverted-mode-dark: hsl(195, 100%, 32%);--theme-primary-inverted: var(--theme-primary-inverted-color-cg-blue);--color-primary-inverted: var(--theme-primary-inverted);--theme-primary-inverted-hover-mode-light: hsl(195, 100%, 38.8%);--theme-primary-inverted-hover-mode-dark: hsl(195, 100%, 28.8%);--theme-primary-inverted-hover: var(--theme-primary-inverted-hover-color-cg-blue);--color-primary-inverted-hover: var(--theme-primary-inverted-hover);--theme-primary-inverted-active-mode-light: hsl(195, 100%, 45.6%);--theme-primary-inverted-active-mode-dark: hsl(195, 100%, 25.6%);--theme-primary-inverted-active: var(--theme-primary-inverted-active-color-cg-blue);--color-primary-inverted-active: var(--theme-primary-inverted-active);--theme-on-primary-mode-light: #fefefd;--theme-on-primary-mode-dark: #fefefd;--theme-on-primary: var(--theme-on-primary-color-cg-blue);--color-on-primary: var(--theme-on-primary);--theme-on-primary-inverted-mode-light: #fefefd;--theme-on-primary-inverted-mode-dark: #fefefd;--theme-on-primary-inverted: var(--theme-on-primary-inverted-color-cg-blue);--color-on-primary-inverted: var(--theme-on-primary-inverted);--theme-primary-text-mode-light: hsl(195, 100%, 22.4%);--theme-primary-text-mode-dark: hsl(195, 100%, 86.4%);--theme-primary-text: var(--theme-primary-text-color-cg-blue);--color-primary-text: var(--theme-primary-text);--theme-secondary-mode-light: hsl(195, 60%, 89.8%);--theme-secondary-mode-dark: hsl(195, 80%, 52.4%);--theme-secondary: var(--theme-secondary-color-cg-blue);--color-secondary: var(--theme-secondary);--theme-secondary-hover-mode-light: hsl(195, 60%, 85.31%);--theme-secondary-hover-mode-dark: hsl(195, 80%, 57.16%);--theme-secondary-hover: var(--theme-secondary-hover-color-cg-blue);--color-secondary-hover: var(--theme-secondary-hover);--theme-secondary-active-mode-light: hsl(195, 60%, 80.82%);--theme-secondary-active-mode-dark: hsl(195, 80%, 61.92%);--theme-secondary-active: var(--theme-secondary-active-color-cg-blue);--color-secondary-active: var(--theme-secondary-active);--theme-secondary-inverted-mode-light: hsl(195, 80%, 52.4%);--theme-secondary-inverted-mode-dark: hsl(195, 60%, 89.8%);--theme-secondary-inverted: var(--theme-secondary-inverted-color-cg-blue);--color-secondary-inverted: var(--theme-secondary-inverted);--theme-secondary-inverted-hover-mode-light: hsl(195, 80%, 57.16%);--theme-secondary-inverted-hover-mode-dark: hsl(195, 60%, 85.31%);--theme-secondary-inverted-hover: var(--theme-secondary-inverted-hover-color-cg-blue);--color-secondary-inverted-hover: var(--theme-secondary-inverted-hover);--theme-secondary-inverted-active-mode-light: hsl(195, 80%, 61.92%);--theme-secondary-inverted-active-mode-dark: hsl(195, 60%, 80.82%);--theme-secondary-inverted-active: var(--theme-secondary-inverted-active-color-cg-blue);--color-secondary-inverted-active: var(--theme-secondary-inverted-active);--theme-on-secondary-mode-light: hsl(195, 100%, 22.4%);--theme-on-secondary-mode-dark: hsl(195, 100%, 16%);--theme-on-secondary: var(--theme-on-secondary-color-cg-blue);--color-on-secondary: var(--theme-on-secondary);--theme-on-secondary-inverted-mode-light: hsl(195, 60%, 89.8%);--theme-on-secondary-inverted-mode-dark: hsl(195, 100%, 22.4%);--theme-on-secondary-inverted: var(--theme-on-secondary-inverted-color-cg-blue);--color-on-secondary-inverted: var(--theme-on-secondary-inverted);--theme-default-mode-light: #fefefd;--theme-default-mode-dark: #2c2c2e;--theme-default: var(--theme-default-color-cg-blue);--color-default: var(--theme-default);--theme-on-default-mode-light: #2c2c2e;--theme-on-default-mode-dark: #fefefd;--theme-on-default: var(--theme-on-default-color-cg-blue);--color-on-default: var(--theme-on-default);--theme-inverted-mode-light: #2c2c2e;--theme-inverted-mode-dark: #fefefd;--theme-inverted: var(--theme-inverted-color-cg-blue);--color-inverted: var(--theme-inverted);--theme-on-inverted-mode-light: #fefefd;--theme-on-inverted-mode-dark: #2c2c2e;--theme-on-inverted: var(--theme-on-inverted-color-cg-blue);--color-on-inverted: var(--theme-on-inverted);--theme-surface-mode-light: hsl(195, 40%, 93.2%);--theme-surface-mode-dark: hsl(195, 50%, 42.2%);--theme-surface: var(--theme-surface-color-cg-blue);--color-surface: var(--theme-surface);--theme-surface-hover-mode-light: hsl(195, 40%, 88.54%);--theme-surface-hover-mode-dark: hsl(195, 50%, 45.09%);--theme-surface-hover: var(--theme-surface-hover-color-cg-blue);--color-surface-hover: var(--theme-surface-hover);--theme-surface-active-mode-light: hsl(195, 40%, 83.88%);--theme-surface-active-mode-dark: hsl(195, 50%, 47.98%);--theme-surface-active: var(--theme-surface-active-color-cg-blue);--color-surface-active: var(--theme-surface-active);--theme-surface-inverted-mode-light: hsl(195, 50%, 42.2%);--theme-surface-inverted-mode-dark: hsl(195, 40%, 93.2%);--theme-surface-inverted: var(--theme-surface-inverted-color-cg-blue);--color-surface-inverted: var(--theme-surface-inverted);--theme-surface-inverted-hover-mode-light: hsl(195, 50%, 45.09%);--theme-surface-inverted-hover-mode-dark: hsl(195, 40%, 88.54%);--theme-surface-inverted-hover: var(--theme-surface-inverted-hover-color-cg-blue);--color-surface-inverted-hover: var(--theme-surface-inverted-hover);--theme-surface-inverted-active-mode-light: hsl(195, 50%, 47.98%);--theme-surface-inverted-active-mode-dark: hsl(195, 40%, 83.88%);--theme-surface-inverted-active: var(--theme-surface-inverted-active-color-cg-blue);--color-surface-inverted-active: var(--theme-surface-inverted-active);--theme-backdrop-mode-light: rgba(0, 0, 0, .5);--theme-backdrop-mode-dark: rgba(0, 0, 0, .7);--theme-backdrop: var(--theme-backdrop-color-cg-blue);--color-backdrop: var(--theme-backdrop);--theme-overlay-mode-light: rgba(0, 0, 0, .04);--theme-overlay-mode-dark: rgba(255, 255, 255, .06);--theme-overlay: var(--theme-overlay-color-cg-blue);--color-overlay: var(--theme-overlay);--theme-modal-mode-light: #fefefd;--theme-modal-mode-dark: #262626;--theme-modal: var(--theme-modal-color-cg-blue);--color-modal: var(--theme-modal);--theme-skeleton-mode-light: #e0e0e0;--theme-skeleton-mode-dark: #3a3a3a;--theme-skeleton: var(--theme-skeleton-color-cg-blue);--color-skeleton: var(--theme-skeleton);--theme-on-skeleton-mode-light: #f0f0f0;--theme-on-skeleton-mode-dark: #4a4a4a;--theme-on-skeleton: var(--theme-on-skeleton-color-cg-blue);--color-on-skeleton: var(--theme-on-skeleton);--theme-muted-mode-light: hsl(0, 0%, 32%);--theme-muted-mode-dark: hsl(0, 0%, 92%);--theme-muted: var(--theme-muted-color-cg-blue);--color-muted: var(--theme-muted);--theme-placeholder-mode-light: hsl(0, 0%, 52%);--theme-placeholder-mode-dark: hsl(0, 0%, 76%);--theme-placeholder: var(--theme-placeholder-color-cg-blue);--color-placeholder: var(--theme-placeholder);--theme-disabled-mode-light: hsl(0, 0%, 55%);--theme-disabled-mode-dark: hsl(0, 0%, 35%);--theme-disabled: var(--theme-disabled-color-cg-blue);--color-disabled: var(--theme-disabled);--theme-on-disabled-mode-light: hsl(0, 0%, 95%);--theme-on-disabled-mode-dark: hsl(0, 0%, 85%);--theme-on-disabled: var(--theme-on-disabled-color-cg-blue);--color-on-disabled: var(--theme-on-disabled);--theme-divider-mode-light: hsl(195, 20%, 83%);--theme-divider-mode-dark: hsl(195, 20%, 83%);--theme-divider: var(--theme-divider-color-cg-blue);--color-divider: var(--theme-divider);--theme-divider-hover-mode-light: hsl(195, 20%, 78.85%);--theme-divider-hover-mode-dark: hsl(195, 20%, 83.85%);--theme-divider-hover: var(--theme-divider-hover-color-cg-blue);--color-divider-hover: var(--theme-divider-hover);--theme-divider-active-mode-light: hsl(195, 20%, 74.7%);--theme-divider-active-mode-dark: hsl(195, 20%, 84.7%);--theme-divider-active: var(--theme-divider-active-color-cg-blue);--color-divider-active: var(--theme-divider-active);--theme-divider-disabled-mode-light: hsl(0, 0%, 60%);--theme-divider-disabled-mode-dark: hsl(0, 0%, 45%);--theme-divider-disabled: var(--theme-divider-disabled-color-cg-blue);--color-divider-disabled: var(--theme-divider-disabled);--theme-focus-ring-mode-light: hsla(195, 100%, 32%, .7);--theme-focus-ring-mode-dark: hsla(195, 100%, 32%, .9);--theme-focus-ring: var(--theme-focus-ring-color-cg-blue);--color-focus-ring: var(--theme-focus-ring);--theme-shadow-mode-light: rgba(0, 0, 0, .1);--theme-shadow-mode-dark: rgba(0, 0, 0, .4);--theme-shadow: var(--theme-shadow-color-cg-blue);--color-shadow: var(--theme-shadow);--theme-error-mode-light: hsl(0, 70%, 40%);--theme-error-mode-dark: hsl(0, 70%, 40%);--theme-error: var(--theme-error-color-cg-blue);--color-error: var(--theme-error);--theme-error-hover-mode-light: hsl(0, 70%, 38%);--theme-error-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-hover: var(--theme-error-hover-color-cg-blue);--color-error-hover: var(--theme-error-hover);--theme-error-active-mode-light: hsl(0, 70%, 36%);--theme-error-active-mode-dark: hsl(0, 70%, 36%);--theme-error-active: var(--theme-error-active-color-cg-blue);--color-error-active: var(--theme-error-active);--theme-error-inverted-mode-light: hsl(0, 70%, 40%);--theme-error-inverted-mode-dark: hsl(0, 70%, 40%);--theme-error-inverted: var(--theme-error-inverted-color-cg-blue);--color-error-inverted: var(--theme-error-inverted);--theme-error-inverted-hover-mode-light: hsl(0, 70%, 38%);--theme-error-inverted-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-inverted-hover: var(--theme-error-inverted-hover-color-cg-blue);--color-error-inverted-hover: var(--theme-error-inverted-hover);--theme-error-inverted-active-mode-light: hsl(0, 70%, 36%);--theme-error-inverted-active-mode-dark: hsl(0, 70%, 36%);--theme-error-inverted-active: var(--theme-error-inverted-active-color-cg-blue);--color-error-inverted-active: var(--theme-error-inverted-active);--theme-on-error-mode-light: #fefefd;--theme-on-error-mode-dark: hsl(0, 100%, 95%);--theme-on-error: var(--theme-on-error-color-cg-blue);--color-on-error: var(--theme-on-error);--theme-on-error-inverted-mode-light: #fefefd;--theme-on-error-inverted-mode-dark: hsl(0, 100%, 95%);--theme-on-error-inverted: var(--theme-on-error-inverted-color-cg-blue);--color-on-error-inverted: var(--theme-on-error-inverted);--theme-error-secondary-mode-light: hsl(0, 100%, 95%);--theme-error-secondary-mode-dark: hsl(0, 100%, 95%);--theme-error-secondary: var(--theme-error-secondary-color-cg-blue);--color-error-secondary: var(--theme-error-secondary);--theme-error-secondary-hover-mode-light: hsl(0, 100%, 90.25%);--theme-error-secondary-hover-mode-dark: hsl(0, 100%, 90.25%);--theme-error-secondary-hover: var(--theme-error-secondary-hover-color-cg-blue);--color-error-secondary-hover: var(--theme-error-secondary-hover);--theme-error-secondary-active-mode-light: hsl(0, 100%, 85.5%);--theme-error-secondary-active-mode-dark: hsl(0, 100%, 85.5%);--theme-error-secondary-active: var(--theme-error-secondary-active-color-cg-blue);--color-error-secondary-active: var(--theme-error-secondary-active);--theme-on-error-secondary-mode-light: hsl(0, 70%, 30%);--theme-on-error-secondary-mode-dark: hsl(0, 70%, 30%);--theme-on-error-secondary: var(--theme-on-error-secondary-color-cg-blue);--color-on-error-secondary: var(--theme-on-error-secondary);--theme-error-text-mode-light: hsl(0, 70%, 30%);--theme-error-text-mode-dark: hsl(0, 70%, 90%);--theme-error-text: var(--theme-error-text-color-cg-blue);--color-error-text: var(--theme-error-text);--theme-success-mode-light: hsl(142, 50%, 35%);--theme-success-mode-dark: hsl(142, 50%, 35%);--theme-success: var(--theme-success-color-cg-blue);--color-success: var(--theme-success);--theme-success-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-hover: var(--theme-success-hover-color-cg-blue);--color-success-hover: var(--theme-success-hover);--theme-success-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-active: var(--theme-success-active-color-cg-blue);--color-success-active: var(--theme-success-active);--theme-success-inverted-mode-light: hsl(142, 50%, 35%);--theme-success-inverted-mode-dark: hsl(142, 50%, 35%);--theme-success-inverted: var(--theme-success-inverted-color-cg-blue);--color-success-inverted: var(--theme-success-inverted);--theme-success-inverted-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-inverted-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-inverted-hover: var(--theme-success-inverted-hover-color-cg-blue);--color-success-inverted-hover: var(--theme-success-inverted-hover);--theme-success-inverted-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-inverted-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-inverted-active: var(--theme-success-inverted-active-color-cg-blue);--color-success-inverted-active: var(--theme-success-inverted-active);--theme-on-success-mode-light: #fefefd;--theme-on-success-mode-dark: hsl(142, 70%, 95%);--theme-on-success: var(--theme-on-success-color-cg-blue);--color-on-success: var(--theme-on-success);--theme-on-success-inverted-mode-light: #fefefd;--theme-on-success-inverted-mode-dark: hsl(142, 70%, 95%);--theme-on-success-inverted: var(--theme-on-success-inverted-color-cg-blue);--color-on-success-inverted: var(--theme-on-success-inverted);--theme-success-secondary-mode-light: hsl(142, 70%, 90%);--theme-success-secondary-mode-dark: hsl(142, 70%, 90%);--theme-success-secondary: var(--theme-success-secondary-color-cg-blue);--color-success-secondary: var(--theme-success-secondary);--theme-success-secondary-hover-mode-light: hsl(142, 70%, 85.5%);--theme-success-secondary-hover-mode-dark: hsl(142, 70%, 85.5%);--theme-success-secondary-hover: var(--theme-success-secondary-hover-color-cg-blue);--color-success-secondary-hover: var(--theme-success-secondary-hover);--theme-success-secondary-active-mode-light: hsl(142, 70%, 81%);--theme-success-secondary-active-mode-dark: hsl(142, 70%, 81%);--theme-success-secondary-active: var(--theme-success-secondary-active-color-cg-blue);--color-success-secondary-active: var(--theme-success-secondary-active);--theme-on-success-secondary-mode-light: hsl(142, 50%, 25%);--theme-on-success-secondary-mode-dark: hsl(142, 50%, 25%);--theme-on-success-secondary: var(--theme-on-success-secondary-color-cg-blue);--color-on-success-secondary: var(--theme-on-success-secondary);--theme-success-text-mode-light: hsl(142, 50%, 25%);--theme-success-text-mode-dark: hsl(142, 50%, 85%);--theme-success-text: var(--theme-success-text-color-cg-blue);--color-success-text: var(--theme-success-text);--theme-warning-mode-light: hsl(45, 100%, 85%);--theme-warning-mode-dark: hsl(45, 100%, 68%);--theme-warning: var(--theme-warning-color-cg-blue);--color-warning: var(--theme-warning);--theme-on-warning-mode-light: hsl(30, 100%, 25%);--theme-on-warning-mode-dark: hsl(45, 100%, 95%);--theme-on-warning: var(--theme-on-warning-color-cg-blue);--color-on-warning: var(--theme-on-warning);--theme-link-mode-light: #2563eb;--theme-link-mode-dark: #60a5fa;--theme-link: var(--theme-link-color-cg-blue);--color-link: var(--theme-link);--theme-link-hover-mode-light: #1d4ed8;--theme-link-hover-mode-dark: #93c5fd;--theme-link-hover: var(--theme-link-hover-color-cg-blue);--color-link-hover: var(--theme-link-hover);--theme-link-active-mode-light: #1e40af;--theme-link-active-mode-dark: #bfdbfe;--theme-link-active: var(--theme-link-active-color-cg-blue);--color-link-active: var(--theme-link-active)}[data-theme=cg-blue]{--theme-primary-mode-light: hsl(195, 100%, 32%);--theme-primary-mode-dark: hsl(195, 100%, 32%);--theme-primary: var(--theme-primary-color-cg-blue);--color-primary: var(--theme-primary);--theme-primary-hover-mode-light: hsl(195, 100%, 28.8%);--theme-primary-hover-mode-dark: hsl(195, 100%, 38.8%);--theme-primary-hover: var(--theme-primary-hover-color-cg-blue);--color-primary-hover: var(--theme-primary-hover);--theme-primary-active-mode-light: hsl(195, 100%, 25.6%);--theme-primary-active-mode-dark: hsl(195, 100%, 45.6%);--theme-primary-active: var(--theme-primary-active-color-cg-blue);--color-primary-active: var(--theme-primary-active);--theme-primary-inverted-mode-light: hsl(195, 100%, 32%);--theme-primary-inverted-mode-dark: hsl(195, 100%, 32%);--theme-primary-inverted: var(--theme-primary-inverted-color-cg-blue);--color-primary-inverted: var(--theme-primary-inverted);--theme-primary-inverted-hover-mode-light: hsl(195, 100%, 38.8%);--theme-primary-inverted-hover-mode-dark: hsl(195, 100%, 28.8%);--theme-primary-inverted-hover: var(--theme-primary-inverted-hover-color-cg-blue);--color-primary-inverted-hover: var(--theme-primary-inverted-hover);--theme-primary-inverted-active-mode-light: hsl(195, 100%, 45.6%);--theme-primary-inverted-active-mode-dark: hsl(195, 100%, 25.6%);--theme-primary-inverted-active: var(--theme-primary-inverted-active-color-cg-blue);--color-primary-inverted-active: var(--theme-primary-inverted-active);--theme-on-primary-mode-light: #fefefd;--theme-on-primary-mode-dark: #fefefd;--theme-on-primary: var(--theme-on-primary-color-cg-blue);--color-on-primary: var(--theme-on-primary);--theme-on-primary-inverted-mode-light: #fefefd;--theme-on-primary-inverted-mode-dark: #fefefd;--theme-on-primary-inverted: var(--theme-on-primary-inverted-color-cg-blue);--color-on-primary-inverted: var(--theme-on-primary-inverted);--theme-primary-text-mode-light: hsl(195, 100%, 22.4%);--theme-primary-text-mode-dark: hsl(195, 100%, 86.4%);--theme-primary-text: var(--theme-primary-text-color-cg-blue);--color-primary-text: var(--theme-primary-text);--theme-secondary-mode-light: hsl(195, 60%, 89.8%);--theme-secondary-mode-dark: hsl(195, 80%, 52.4%);--theme-secondary: var(--theme-secondary-color-cg-blue);--color-secondary: var(--theme-secondary);--theme-secondary-hover-mode-light: hsl(195, 60%, 85.31%);--theme-secondary-hover-mode-dark: hsl(195, 80%, 57.16%);--theme-secondary-hover: var(--theme-secondary-hover-color-cg-blue);--color-secondary-hover: var(--theme-secondary-hover);--theme-secondary-active-mode-light: hsl(195, 60%, 80.82%);--theme-secondary-active-mode-dark: hsl(195, 80%, 61.92%);--theme-secondary-active: var(--theme-secondary-active-color-cg-blue);--color-secondary-active: var(--theme-secondary-active);--theme-secondary-inverted-mode-light: hsl(195, 80%, 52.4%);--theme-secondary-inverted-mode-dark: hsl(195, 60%, 89.8%);--theme-secondary-inverted: var(--theme-secondary-inverted-color-cg-blue);--color-secondary-inverted: var(--theme-secondary-inverted);--theme-secondary-inverted-hover-mode-light: hsl(195, 80%, 57.16%);--theme-secondary-inverted-hover-mode-dark: hsl(195, 60%, 85.31%);--theme-secondary-inverted-hover: var(--theme-secondary-inverted-hover-color-cg-blue);--color-secondary-inverted-hover: var(--theme-secondary-inverted-hover);--theme-secondary-inverted-active-mode-light: hsl(195, 80%, 61.92%);--theme-secondary-inverted-active-mode-dark: hsl(195, 60%, 80.82%);--theme-secondary-inverted-active: var(--theme-secondary-inverted-active-color-cg-blue);--color-secondary-inverted-active: var(--theme-secondary-inverted-active);--theme-on-secondary-mode-light: hsl(195, 100%, 22.4%);--theme-on-secondary-mode-dark: hsl(195, 100%, 16%);--theme-on-secondary: var(--theme-on-secondary-color-cg-blue);--color-on-secondary: var(--theme-on-secondary);--theme-on-secondary-inverted-mode-light: hsl(195, 60%, 89.8%);--theme-on-secondary-inverted-mode-dark: hsl(195, 100%, 22.4%);--theme-on-secondary-inverted: var(--theme-on-secondary-inverted-color-cg-blue);--color-on-secondary-inverted: var(--theme-on-secondary-inverted);--theme-default-mode-light: #fefefd;--theme-default-mode-dark: #2c2c2e;--theme-default: var(--theme-default-color-cg-blue);--color-default: var(--theme-default);--theme-on-default-mode-light: #2c2c2e;--theme-on-default-mode-dark: #fefefd;--theme-on-default: var(--theme-on-default-color-cg-blue);--color-on-default: var(--theme-on-default);--theme-inverted-mode-light: #2c2c2e;--theme-inverted-mode-dark: #fefefd;--theme-inverted: var(--theme-inverted-color-cg-blue);--color-inverted: var(--theme-inverted);--theme-on-inverted-mode-light: #fefefd;--theme-on-inverted-mode-dark: #2c2c2e;--theme-on-inverted: var(--theme-on-inverted-color-cg-blue);--color-on-inverted: var(--theme-on-inverted);--theme-surface-mode-light: hsl(195, 40%, 93.2%);--theme-surface-mode-dark: hsl(195, 50%, 42.2%);--theme-surface: var(--theme-surface-color-cg-blue);--color-surface: var(--theme-surface);--theme-surface-hover-mode-light: hsl(195, 40%, 88.54%);--theme-surface-hover-mode-dark: hsl(195, 50%, 45.09%);--theme-surface-hover: var(--theme-surface-hover-color-cg-blue);--color-surface-hover: var(--theme-surface-hover);--theme-surface-active-mode-light: hsl(195, 40%, 83.88%);--theme-surface-active-mode-dark: hsl(195, 50%, 47.98%);--theme-surface-active: var(--theme-surface-active-color-cg-blue);--color-surface-active: var(--theme-surface-active);--theme-surface-inverted-mode-light: hsl(195, 50%, 42.2%);--theme-surface-inverted-mode-dark: hsl(195, 40%, 93.2%);--theme-surface-inverted: var(--theme-surface-inverted-color-cg-blue);--color-surface-inverted: var(--theme-surface-inverted);--theme-surface-inverted-hover-mode-light: hsl(195, 50%, 45.09%);--theme-surface-inverted-hover-mode-dark: hsl(195, 40%, 88.54%);--theme-surface-inverted-hover: var(--theme-surface-inverted-hover-color-cg-blue);--color-surface-inverted-hover: var(--theme-surface-inverted-hover);--theme-surface-inverted-active-mode-light: hsl(195, 50%, 47.98%);--theme-surface-inverted-active-mode-dark: hsl(195, 40%, 83.88%);--theme-surface-inverted-active: var(--theme-surface-inverted-active-color-cg-blue);--color-surface-inverted-active: var(--theme-surface-inverted-active);--theme-backdrop-mode-light: rgba(0, 0, 0, .5);--theme-backdrop-mode-dark: rgba(0, 0, 0, .7);--theme-backdrop: var(--theme-backdrop-color-cg-blue);--color-backdrop: var(--theme-backdrop);--theme-overlay-mode-light: rgba(0, 0, 0, .04);--theme-overlay-mode-dark: rgba(255, 255, 255, .06);--theme-overlay: var(--theme-overlay-color-cg-blue);--color-overlay: var(--theme-overlay);--theme-modal-mode-light: #fefefd;--theme-modal-mode-dark: #262626;--theme-modal: var(--theme-modal-color-cg-blue);--color-modal: var(--theme-modal);--theme-skeleton-mode-light: #e0e0e0;--theme-skeleton-mode-dark: #3a3a3a;--theme-skeleton: var(--theme-skeleton-color-cg-blue);--color-skeleton: var(--theme-skeleton);--theme-on-skeleton-mode-light: #f0f0f0;--theme-on-skeleton-mode-dark: #4a4a4a;--theme-on-skeleton: var(--theme-on-skeleton-color-cg-blue);--color-on-skeleton: var(--theme-on-skeleton);--theme-muted-mode-light: hsl(0, 0%, 32%);--theme-muted-mode-dark: hsl(0, 0%, 92%);--theme-muted: var(--theme-muted-color-cg-blue);--color-muted: var(--theme-muted);--theme-placeholder-mode-light: hsl(0, 0%, 52%);--theme-placeholder-mode-dark: hsl(0, 0%, 76%);--theme-placeholder: var(--theme-placeholder-color-cg-blue);--color-placeholder: var(--theme-placeholder);--theme-disabled-mode-light: hsl(0, 0%, 55%);--theme-disabled-mode-dark: hsl(0, 0%, 35%);--theme-disabled: var(--theme-disabled-color-cg-blue);--color-disabled: var(--theme-disabled);--theme-on-disabled-mode-light: hsl(0, 0%, 95%);--theme-on-disabled-mode-dark: hsl(0, 0%, 85%);--theme-on-disabled: var(--theme-on-disabled-color-cg-blue);--color-on-disabled: var(--theme-on-disabled);--theme-divider-mode-light: hsl(195, 20%, 83%);--theme-divider-mode-dark: hsl(195, 20%, 83%);--theme-divider: var(--theme-divider-color-cg-blue);--color-divider: var(--theme-divider);--theme-divider-hover-mode-light: hsl(195, 20%, 78.85%);--theme-divider-hover-mode-dark: hsl(195, 20%, 83.85%);--theme-divider-hover: var(--theme-divider-hover-color-cg-blue);--color-divider-hover: var(--theme-divider-hover);--theme-divider-active-mode-light: hsl(195, 20%, 74.7%);--theme-divider-active-mode-dark: hsl(195, 20%, 84.7%);--theme-divider-active: var(--theme-divider-active-color-cg-blue);--color-divider-active: var(--theme-divider-active);--theme-divider-disabled-mode-light: hsl(0, 0%, 60%);--theme-divider-disabled-mode-dark: hsl(0, 0%, 45%);--theme-divider-disabled: var(--theme-divider-disabled-color-cg-blue);--color-divider-disabled: var(--theme-divider-disabled);--theme-focus-ring-mode-light: hsla(195, 100%, 32%, .7);--theme-focus-ring-mode-dark: hsla(195, 100%, 32%, .9);--theme-focus-ring: var(--theme-focus-ring-color-cg-blue);--color-focus-ring: var(--theme-focus-ring);--theme-shadow-mode-light: rgba(0, 0, 0, .1);--theme-shadow-mode-dark: rgba(0, 0, 0, .4);--theme-shadow: var(--theme-shadow-color-cg-blue);--color-shadow: var(--theme-shadow);--theme-error-mode-light: hsl(0, 70%, 40%);--theme-error-mode-dark: hsl(0, 70%, 40%);--theme-error: var(--theme-error-color-cg-blue);--color-error: var(--theme-error);--theme-error-hover-mode-light: hsl(0, 70%, 38%);--theme-error-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-hover: var(--theme-error-hover-color-cg-blue);--color-error-hover: var(--theme-error-hover);--theme-error-active-mode-light: hsl(0, 70%, 36%);--theme-error-active-mode-dark: hsl(0, 70%, 36%);--theme-error-active: var(--theme-error-active-color-cg-blue);--color-error-active: var(--theme-error-active);--theme-error-inverted-mode-light: hsl(0, 70%, 40%);--theme-error-inverted-mode-dark: hsl(0, 70%, 40%);--theme-error-inverted: var(--theme-error-inverted-color-cg-blue);--color-error-inverted: var(--theme-error-inverted);--theme-error-inverted-hover-mode-light: hsl(0, 70%, 38%);--theme-error-inverted-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-inverted-hover: var(--theme-error-inverted-hover-color-cg-blue);--color-error-inverted-hover: var(--theme-error-inverted-hover);--theme-error-inverted-active-mode-light: hsl(0, 70%, 36%);--theme-error-inverted-active-mode-dark: hsl(0, 70%, 36%);--theme-error-inverted-active: var(--theme-error-inverted-active-color-cg-blue);--color-error-inverted-active: var(--theme-error-inverted-active);--theme-on-error-mode-light: #fefefd;--theme-on-error-mode-dark: hsl(0, 100%, 95%);--theme-on-error: var(--theme-on-error-color-cg-blue);--color-on-error: var(--theme-on-error);--theme-on-error-inverted-mode-light: #fefefd;--theme-on-error-inverted-mode-dark: hsl(0, 100%, 95%);--theme-on-error-inverted: var(--theme-on-error-inverted-color-cg-blue);--color-on-error-inverted: var(--theme-on-error-inverted);--theme-error-secondary-mode-light: hsl(0, 100%, 95%);--theme-error-secondary-mode-dark: hsl(0, 100%, 95%);--theme-error-secondary: var(--theme-error-secondary-color-cg-blue);--color-error-secondary: var(--theme-error-secondary);--theme-error-secondary-hover-mode-light: hsl(0, 100%, 90.25%);--theme-error-secondary-hover-mode-dark: hsl(0, 100%, 90.25%);--theme-error-secondary-hover: var(--theme-error-secondary-hover-color-cg-blue);--color-error-secondary-hover: var(--theme-error-secondary-hover);--theme-error-secondary-active-mode-light: hsl(0, 100%, 85.5%);--theme-error-secondary-active-mode-dark: hsl(0, 100%, 85.5%);--theme-error-secondary-active: var(--theme-error-secondary-active-color-cg-blue);--color-error-secondary-active: var(--theme-error-secondary-active);--theme-on-error-secondary-mode-light: hsl(0, 70%, 30%);--theme-on-error-secondary-mode-dark: hsl(0, 70%, 30%);--theme-on-error-secondary: var(--theme-on-error-secondary-color-cg-blue);--color-on-error-secondary: var(--theme-on-error-secondary);--theme-error-text-mode-light: hsl(0, 70%, 30%);--theme-error-text-mode-dark: hsl(0, 70%, 90%);--theme-error-text: var(--theme-error-text-color-cg-blue);--color-error-text: var(--theme-error-text);--theme-success-mode-light: hsl(142, 50%, 35%);--theme-success-mode-dark: hsl(142, 50%, 35%);--theme-success: var(--theme-success-color-cg-blue);--color-success: var(--theme-success);--theme-success-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-hover: var(--theme-success-hover-color-cg-blue);--color-success-hover: var(--theme-success-hover);--theme-success-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-active: var(--theme-success-active-color-cg-blue);--color-success-active: var(--theme-success-active);--theme-success-inverted-mode-light: hsl(142, 50%, 35%);--theme-success-inverted-mode-dark: hsl(142, 50%, 35%);--theme-success-inverted: var(--theme-success-inverted-color-cg-blue);--color-success-inverted: var(--theme-success-inverted);--theme-success-inverted-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-inverted-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-inverted-hover: var(--theme-success-inverted-hover-color-cg-blue);--color-success-inverted-hover: var(--theme-success-inverted-hover);--theme-success-inverted-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-inverted-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-inverted-active: var(--theme-success-inverted-active-color-cg-blue);--color-success-inverted-active: var(--theme-success-inverted-active);--theme-on-success-mode-light: #fefefd;--theme-on-success-mode-dark: hsl(142, 70%, 95%);--theme-on-success: var(--theme-on-success-color-cg-blue);--color-on-success: var(--theme-on-success);--theme-on-success-inverted-mode-light: #fefefd;--theme-on-success-inverted-mode-dark: hsl(142, 70%, 95%);--theme-on-success-inverted: var(--theme-on-success-inverted-color-cg-blue);--color-on-success-inverted: var(--theme-on-success-inverted);--theme-success-secondary-mode-light: hsl(142, 70%, 90%);--theme-success-secondary-mode-dark: hsl(142, 70%, 90%);--theme-success-secondary: var(--theme-success-secondary-color-cg-blue);--color-success-secondary: var(--theme-success-secondary);--theme-success-secondary-hover-mode-light: hsl(142, 70%, 85.5%);--theme-success-secondary-hover-mode-dark: hsl(142, 70%, 85.5%);--theme-success-secondary-hover: var(--theme-success-secondary-hover-color-cg-blue);--color-success-secondary-hover: var(--theme-success-secondary-hover);--theme-success-secondary-active-mode-light: hsl(142, 70%, 81%);--theme-success-secondary-active-mode-dark: hsl(142, 70%, 81%);--theme-success-secondary-active: var(--theme-success-secondary-active-color-cg-blue);--color-success-secondary-active: var(--theme-success-secondary-active);--theme-on-success-secondary-mode-light: hsl(142, 50%, 25%);--theme-on-success-secondary-mode-dark: hsl(142, 50%, 25%);--theme-on-success-secondary: var(--theme-on-success-secondary-color-cg-blue);--color-on-success-secondary: var(--theme-on-success-secondary);--theme-success-text-mode-light: hsl(142, 50%, 25%);--theme-success-text-mode-dark: hsl(142, 50%, 85%);--theme-success-text: var(--theme-success-text-color-cg-blue);--color-success-text: var(--theme-success-text);--theme-warning-mode-light: hsl(45, 100%, 85%);--theme-warning-mode-dark: hsl(45, 100%, 68%);--theme-warning: var(--theme-warning-color-cg-blue);--color-warning: var(--theme-warning);--theme-on-warning-mode-light: hsl(30, 100%, 25%);--theme-on-warning-mode-dark: hsl(45, 100%, 95%);--theme-on-warning: var(--theme-on-warning-color-cg-blue);--color-on-warning: var(--theme-on-warning);--theme-link-mode-light: #2563eb;--theme-link-mode-dark: #60a5fa;--theme-link: var(--theme-link-color-cg-blue);--color-link: var(--theme-link);--theme-link-hover-mode-light: #1d4ed8;--theme-link-hover-mode-dark: #93c5fd;--theme-link-hover: var(--theme-link-hover-color-cg-blue);--color-link-hover: var(--theme-link-hover);--theme-link-active-mode-light: #1e40af;--theme-link-active-mode-dark: #bfdbfe;--theme-link-active: var(--theme-link-active-color-cg-blue);--color-link-active: var(--theme-link-active)}[data-theme=cyan]{--theme-primary-mode-light: hsl(187, 47%, 55%);--theme-primary-mode-dark: hsl(187, 47%, 55%);--theme-primary: var(--theme-primary-color-cyan);--color-primary: var(--theme-primary);--theme-primary-hover-mode-light: hsl(187, 47%, 49.5%);--theme-primary-hover-mode-dark: hsl(187, 47%, 59.5%);--theme-primary-hover: var(--theme-primary-hover-color-cyan);--color-primary-hover: var(--theme-primary-hover);--theme-primary-active-mode-light: hsl(187, 47%, 44%);--theme-primary-active-mode-dark: hsl(187, 47%, 64%);--theme-primary-active: var(--theme-primary-active-color-cyan);--color-primary-active: var(--theme-primary-active);--theme-primary-inverted-mode-light: hsl(187, 47%, 55%);--theme-primary-inverted-mode-dark: hsl(187, 47%, 55%);--theme-primary-inverted: var(--theme-primary-inverted-color-cyan);--color-primary-inverted: var(--theme-primary-inverted);--theme-primary-inverted-hover-mode-light: hsl(187, 47%, 59.5%);--theme-primary-inverted-hover-mode-dark: hsl(187, 47%, 49.5%);--theme-primary-inverted-hover: var(--theme-primary-inverted-hover-color-cyan);--color-primary-inverted-hover: var(--theme-primary-inverted-hover);--theme-primary-inverted-active-mode-light: hsl(187, 47%, 64%);--theme-primary-inverted-active-mode-dark: hsl(187, 47%, 44%);--theme-primary-inverted-active: var(--theme-primary-inverted-active-color-cyan);--color-primary-inverted-active: var(--theme-primary-inverted-active);--theme-on-primary-mode-light: #fefefd;--theme-on-primary-mode-dark: #fefefd;--theme-on-primary: var(--theme-on-primary-color-cyan);--color-on-primary: var(--theme-on-primary);--theme-on-primary-inverted-mode-light: #fefefd;--theme-on-primary-inverted-mode-dark: #fefefd;--theme-on-primary-inverted: var(--theme-on-primary-inverted-color-cyan);--color-on-primary-inverted: var(--theme-on-primary-inverted);--theme-primary-text-mode-light: hsl(187, 47%, 38.5%);--theme-primary-text-mode-dark: hsl(187, 47%, 91%);--theme-primary-text: var(--theme-primary-text-color-cyan);--color-primary-text: var(--theme-primary-text);--theme-secondary-mode-light: hsl(187, 28.2%, 93.25%);--theme-secondary-mode-dark: hsl(187, 37.6%, 68.5%);--theme-secondary: var(--theme-secondary-color-cyan);--color-secondary: var(--theme-secondary);--theme-secondary-hover-mode-light: hsl(187, 28.2%, 88.5875%);--theme-secondary-hover-mode-dark: hsl(187, 37.6%, 71.65%);--theme-secondary-hover: var(--theme-secondary-hover-color-cyan);--color-secondary-hover: var(--theme-secondary-hover);--theme-secondary-active-mode-light: hsl(187, 28.2%, 83.925%);--theme-secondary-active-mode-dark: hsl(187, 37.6%, 74.8%);--theme-secondary-active: var(--theme-secondary-active-color-cyan);--color-secondary-active: var(--theme-secondary-active);--theme-secondary-inverted-mode-light: hsl(187, 37.6%, 68.5%);--theme-secondary-inverted-mode-dark: hsl(187, 28.2%, 93.25%);--theme-secondary-inverted: var(--theme-secondary-inverted-color-cyan);--color-secondary-inverted: var(--theme-secondary-inverted);--theme-secondary-inverted-hover-mode-light: hsl(187, 37.6%, 71.65%);--theme-secondary-inverted-hover-mode-dark: hsl(187, 28.2%, 88.5875%);--theme-secondary-inverted-hover: var(--theme-secondary-inverted-hover-color-cyan);--color-secondary-inverted-hover: var(--theme-secondary-inverted-hover);--theme-secondary-inverted-active-mode-light: hsl(187, 37.6%, 74.8%);--theme-secondary-inverted-active-mode-dark: hsl(187, 28.2%, 83.925%);--theme-secondary-inverted-active: var(--theme-secondary-inverted-active-color-cyan);--color-secondary-inverted-active: var(--theme-secondary-inverted-active);--theme-on-secondary-mode-light: hsl(187, 47%, 38.5%);--theme-on-secondary-mode-dark: hsl(187, 47%, 27.5%);--theme-on-secondary: var(--theme-on-secondary-color-cyan);--color-on-secondary: var(--theme-on-secondary);--theme-on-secondary-inverted-mode-light: hsl(187, 28.2%, 93.25%);--theme-on-secondary-inverted-mode-dark: hsl(187, 47%, 38.5%);--theme-on-secondary-inverted: var(--theme-on-secondary-inverted-color-cyan);--color-on-secondary-inverted: var(--theme-on-secondary-inverted);--theme-default-mode-light: #fefefd;--theme-default-mode-dark: #2c2c2e;--theme-default: var(--theme-default-color-cyan);--color-default: var(--theme-default);--theme-on-default-mode-light: #2c2c2e;--theme-on-default-mode-dark: #fefefd;--theme-on-default: var(--theme-on-default-color-cyan);--color-on-default: var(--theme-on-default);--theme-inverted-mode-light: #2c2c2e;--theme-inverted-mode-dark: #fefefd;--theme-inverted: var(--theme-inverted-color-cyan);--color-inverted: var(--theme-inverted);--theme-on-inverted-mode-light: #fefefd;--theme-on-inverted-mode-dark: #2c2c2e;--theme-on-inverted: var(--theme-on-inverted-color-cyan);--color-on-inverted: var(--theme-on-inverted);--theme-surface-mode-light: hsl(187, 18.8%, 95.5%);--theme-surface-mode-dark: hsl(187, 23.5%, 61.75%);--theme-surface: var(--theme-surface-color-cyan);--color-surface: var(--theme-surface);--theme-surface-hover-mode-light: hsl(187, 18.8%, 90.725%);--theme-surface-hover-mode-dark: hsl(187, 23.5%, 63.6625%);--theme-surface-hover: var(--theme-surface-hover-color-cyan);--color-surface-hover: var(--theme-surface-hover);--theme-surface-active-mode-light: hsl(187, 18.8%, 85.95%);--theme-surface-active-mode-dark: hsl(187, 23.5%, 65.575%);--theme-surface-active: var(--theme-surface-active-color-cyan);--color-surface-active: var(--theme-surface-active);--theme-surface-inverted-mode-light: hsl(187, 23.5%, 61.75%);--theme-surface-inverted-mode-dark: hsl(187, 18.8%, 95.5%);--theme-surface-inverted: var(--theme-surface-inverted-color-cyan);--color-surface-inverted: var(--theme-surface-inverted);--theme-surface-inverted-hover-mode-light: hsl(187, 23.5%, 63.6625%);--theme-surface-inverted-hover-mode-dark: hsl(187, 18.8%, 90.725%);--theme-surface-inverted-hover: var(--theme-surface-inverted-hover-color-cyan);--color-surface-inverted-hover: var(--theme-surface-inverted-hover);--theme-surface-inverted-active-mode-light: hsl(187, 23.5%, 65.575%);--theme-surface-inverted-active-mode-dark: hsl(187, 18.8%, 85.95%);--theme-surface-inverted-active: var(--theme-surface-inverted-active-color-cyan);--color-surface-inverted-active: var(--theme-surface-inverted-active);--theme-backdrop-mode-light: rgba(0, 0, 0, .5);--theme-backdrop-mode-dark: rgba(0, 0, 0, .7);--theme-backdrop: var(--theme-backdrop-color-cyan);--color-backdrop: var(--theme-backdrop);--theme-overlay-mode-light: rgba(0, 0, 0, .04);--theme-overlay-mode-dark: rgba(255, 255, 255, .06);--theme-overlay: var(--theme-overlay-color-cyan);--color-overlay: var(--theme-overlay);--theme-modal-mode-light: #fefefd;--theme-modal-mode-dark: #262626;--theme-modal: var(--theme-modal-color-cyan);--color-modal: var(--theme-modal);--theme-skeleton-mode-light: #e0e0e0;--theme-skeleton-mode-dark: #3a3a3a;--theme-skeleton: var(--theme-skeleton-color-cyan);--color-skeleton: var(--theme-skeleton);--theme-on-skeleton-mode-light: #f0f0f0;--theme-on-skeleton-mode-dark: #4a4a4a;--theme-on-skeleton: var(--theme-on-skeleton-color-cyan);--color-on-skeleton: var(--theme-on-skeleton);--theme-muted-mode-light: hsl(0, 0%, 32%);--theme-muted-mode-dark: hsl(0, 0%, 92%);--theme-muted: var(--theme-muted-color-cyan);--color-muted: var(--theme-muted);--theme-placeholder-mode-light: hsl(0, 0%, 52%);--theme-placeholder-mode-dark: hsl(0, 0%, 76%);--theme-placeholder: var(--theme-placeholder-color-cyan);--color-placeholder: var(--theme-placeholder);--theme-disabled-mode-light: hsl(0, 0%, 55%);--theme-disabled-mode-dark: hsl(0, 0%, 35%);--theme-disabled: var(--theme-disabled-color-cyan);--color-disabled: var(--theme-disabled);--theme-on-disabled-mode-light: hsl(0, 0%, 95%);--theme-on-disabled-mode-dark: hsl(0, 0%, 85%);--theme-on-disabled: var(--theme-on-disabled-color-cyan);--color-on-disabled: var(--theme-on-disabled);--theme-divider-mode-light: hsl(187, 9.4%, 88.75%);--theme-divider-mode-dark: hsl(187, 9.4%, 88.75%);--theme-divider: var(--theme-divider-color-cyan);--color-divider: var(--theme-divider);--theme-divider-hover-mode-light: hsl(187, 9.4%, 84.3125%);--theme-divider-hover-mode-dark: hsl(187, 9.4%, 89.3125%);--theme-divider-hover: var(--theme-divider-hover-color-cyan);--color-divider-hover: var(--theme-divider-hover);--theme-divider-active-mode-light: hsl(187, 9.4%, 79.875%);--theme-divider-active-mode-dark: hsl(187, 9.4%, 89.875%);--theme-divider-active: var(--theme-divider-active-color-cyan);--color-divider-active: var(--theme-divider-active);--theme-divider-disabled-mode-light: hsl(0, 0%, 60%);--theme-divider-disabled-mode-dark: hsl(0, 0%, 45%);--theme-divider-disabled: var(--theme-divider-disabled-color-cyan);--color-divider-disabled: var(--theme-divider-disabled);--theme-focus-ring-mode-light: hsla(187, 47%, 55%, .7);--theme-focus-ring-mode-dark: hsla(187, 47%, 55%, .9);--theme-focus-ring: var(--theme-focus-ring-color-cyan);--color-focus-ring: var(--theme-focus-ring);--theme-shadow-mode-light: rgba(0, 0, 0, .1);--theme-shadow-mode-dark: rgba(0, 0, 0, .4);--theme-shadow: var(--theme-shadow-color-cyan);--color-shadow: var(--theme-shadow);--theme-error-mode-light: hsl(0, 70%, 40%);--theme-error-mode-dark: hsl(0, 70%, 40%);--theme-error: var(--theme-error-color-cyan);--color-error: var(--theme-error);--theme-error-hover-mode-light: hsl(0, 70%, 38%);--theme-error-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-hover: var(--theme-error-hover-color-cyan);--color-error-hover: var(--theme-error-hover);--theme-error-active-mode-light: hsl(0, 70%, 36%);--theme-error-active-mode-dark: hsl(0, 70%, 36%);--theme-error-active: var(--theme-error-active-color-cyan);--color-error-active: var(--theme-error-active);--theme-error-inverted-mode-light: hsl(0, 70%, 40%);--theme-error-inverted-mode-dark: hsl(0, 70%, 40%);--theme-error-inverted: var(--theme-error-inverted-color-cyan);--color-error-inverted: var(--theme-error-inverted);--theme-error-inverted-hover-mode-light: hsl(0, 70%, 38%);--theme-error-inverted-hover-mode-dark: hsl(0, 70%, 38%);--theme-error-inverted-hover: var(--theme-error-inverted-hover-color-cyan);--color-error-inverted-hover: var(--theme-error-inverted-hover);--theme-error-inverted-active-mode-light: hsl(0, 70%, 36%);--theme-error-inverted-active-mode-dark: hsl(0, 70%, 36%);--theme-error-inverted-active: var(--theme-error-inverted-active-color-cyan);--color-error-inverted-active: var(--theme-error-inverted-active);--theme-on-error-mode-light: #fefefd;--theme-on-error-mode-dark: hsl(0, 100%, 95%);--theme-on-error: var(--theme-on-error-color-cyan);--color-on-error: var(--theme-on-error);--theme-on-error-inverted-mode-light: #fefefd;--theme-on-error-inverted-mode-dark: hsl(0, 100%, 95%);--theme-on-error-inverted: var(--theme-on-error-inverted-color-cyan);--color-on-error-inverted: var(--theme-on-error-inverted);--theme-error-secondary-mode-light: hsl(0, 100%, 95%);--theme-error-secondary-mode-dark: hsl(0, 100%, 95%);--theme-error-secondary: var(--theme-error-secondary-color-cyan);--color-error-secondary: var(--theme-error-secondary);--theme-error-secondary-hover-mode-light: hsl(0, 100%, 90.25%);--theme-error-secondary-hover-mode-dark: hsl(0, 100%, 90.25%);--theme-error-secondary-hover: var(--theme-error-secondary-hover-color-cyan);--color-error-secondary-hover: var(--theme-error-secondary-hover);--theme-error-secondary-active-mode-light: hsl(0, 100%, 85.5%);--theme-error-secondary-active-mode-dark: hsl(0, 100%, 85.5%);--theme-error-secondary-active: var(--theme-error-secondary-active-color-cyan);--color-error-secondary-active: var(--theme-error-secondary-active);--theme-on-error-secondary-mode-light: hsl(0, 70%, 30%);--theme-on-error-secondary-mode-dark: hsl(0, 70%, 30%);--theme-on-error-secondary: var(--theme-on-error-secondary-color-cyan);--color-on-error-secondary: var(--theme-on-error-secondary);--theme-error-text-mode-light: hsl(0, 70%, 30%);--theme-error-text-mode-dark: hsl(0, 70%, 90%);--theme-error-text: var(--theme-error-text-color-cyan);--color-error-text: var(--theme-error-text);--theme-success-mode-light: hsl(142, 50%, 35%);--theme-success-mode-dark: hsl(142, 50%, 35%);--theme-success: var(--theme-success-color-cyan);--color-success: var(--theme-success);--theme-success-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-hover: var(--theme-success-hover-color-cyan);--color-success-hover: var(--theme-success-hover);--theme-success-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-active: var(--theme-success-active-color-cyan);--color-success-active: var(--theme-success-active);--theme-success-inverted-mode-light: hsl(142, 50%, 35%);--theme-success-inverted-mode-dark: hsl(142, 50%, 35%);--theme-success-inverted: var(--theme-success-inverted-color-cyan);--color-success-inverted: var(--theme-success-inverted);--theme-success-inverted-hover-mode-light: hsl(142, 50%, 33.25%);--theme-success-inverted-hover-mode-dark: hsl(142, 50%, 33.25%);--theme-success-inverted-hover: var(--theme-success-inverted-hover-color-cyan);--color-success-inverted-hover: var(--theme-success-inverted-hover);--theme-success-inverted-active-mode-light: hsl(142, 50%, 31.5%);--theme-success-inverted-active-mode-dark: hsl(142, 50%, 31.5%);--theme-success-inverted-active: var(--theme-success-inverted-active-color-cyan);--color-success-inverted-active: var(--theme-success-inverted-active);--theme-on-success-mode-light: #fefefd;--theme-on-success-mode-dark: hsl(142, 70%, 95%);--theme-on-success: var(--theme-on-success-color-cyan);--color-on-success: var(--theme-on-success);--theme-on-success-inverted-mode-light: #fefefd;--theme-on-success-inverted-mode-dark: hsl(142, 70%, 95%);--theme-on-success-inverted: var(--theme-on-success-inverted-color-cyan);--color-on-success-inverted: var(--theme-on-success-inverted);--theme-success-secondary-mode-light: hsl(142, 70%, 90%);--theme-success-secondary-mode-dark: hsl(142, 70%, 90%);--theme-success-secondary: var(--theme-success-secondary-color-cyan);--color-success-secondary: var(--theme-success-secondary);--theme-success-secondary-hover-mode-light: hsl(142, 70%, 85.5%);--theme-success-secondary-hover-mode-dark: hsl(142, 70%, 85.5%);--theme-success-secondary-hover: var(--theme-success-secondary-hover-color-cyan);--color-success-secondary-hover: var(--theme-success-secondary-hover);--theme-success-secondary-active-mode-light: hsl(142, 70%, 81%);--theme-success-secondary-active-mode-dark: hsl(142, 70%, 81%);--theme-success-secondary-active: var(--theme-success-secondary-active-color-cyan);--color-success-secondary-active: var(--theme-success-secondary-active);--theme-on-success-secondary-mode-light: hsl(142, 50%, 25%);--theme-on-success-secondary-mode-dark: hsl(142, 50%, 25%);--theme-on-success-secondary: var(--theme-on-success-secondary-color-cyan);--color-on-success-secondary: var(--theme-on-success-secondary);--theme-success-text-mode-light: hsl(142, 50%, 25%);--theme-success-text-mode-dark: hsl(142, 50%, 85%);--theme-success-text: var(--theme-success-text-color-cyan);--color-success-text: var(--theme-success-text);--theme-warning-mode-light: hsl(45, 100%, 85%);--theme-warning-mode-dark: hsl(45, 100%, 68%);--theme-warning: var(--theme-warning-color-cyan);--color-warning: var(--theme-warning);--theme-on-warning-mode-light: hsl(30, 100%, 25%);--theme-on-warning-mode-dark: hsl(45, 100%, 95%);--theme-on-warning: var(--theme-on-warning-color-cyan);--color-on-warning: var(--theme-on-warning);--theme-link-mode-light: #2563eb;--theme-link-mode-dark: #60a5fa;--theme-link: var(--theme-link-color-cyan);--color-link: var(--theme-link);--theme-link-hover-mode-light: #1d4ed8;--theme-link-hover-mode-dark: #93c5fd;--theme-link-hover: var(--theme-link-hover-color-cyan);--color-link-hover: var(--theme-link-hover);--theme-link-active-mode-light: #1e40af;--theme-link-active-mode-dark: #bfdbfe;--theme-link-active: var(--theme-link-active-color-cyan);--color-link-active: var(--theme-link-active)}[data-theme=teal]{--theme-primary-mode-light: hsl(174, 63%, 40%);--theme-primary-mode-dark: hsl(174, 63%, 40%);--theme-primary: var(--theme-primary-color-teal);--color-primary: var(--theme-primary);--theme-primary-hover-mode-light: hsl(174, 63%, 36%);--theme-primary-hover-mode-dark: hsl(174, 63%, 46%);--theme-primary-hover: var(--theme-primary-hover-color-teal);--color-primary-hover: var(--theme-primary-hover);--theme-primary-active-mode-light: hsl(174, 63%, 32%);--theme-primary-active-mode-dark: hsl(174, 63%, 52%);--theme-primary-active: var(--theme-primary-active-color-teal);--color-primary-active: var(--theme-primary-active);--theme-primary-inverted-mode-light: hsl(174, 63%, 40%);--theme-primary-inverted-mode-dark: hsl(174, 63%, 40%);--theme-primary-inverted: var(--theme-primary-inverted-color-teal);--color-primary-inverted: var(--theme-primary-inverted);--theme-primary-inverted-hover-mode-light: hsl(174, 63%, 46%);--theme-primary-inverted-hover-mode-dark: hsl(174, 63%, 36%);--theme-primary-inverted-hover: var(--theme-primary-inverted-hover-color-teal);--color-primary-inverted-hover: var(--theme-primary-inverted-hover);--theme-primary-inverted-active-mode-light: hsl(174, 63%, 52%);--theme-primary-inverted-active-mode-dark: hsl(174, 63%, 32%);--theme-primary-inverted-active: var(--theme-primary-inverted-active-color-teal);--color-primary-inverted-active: var(--theme-primary-inverted-active);--theme-on-primary-mode-light: #fefefd;--theme-on-primary-mode-dark: #fefefd;--theme-on-primary: var(--theme-on-primary-color-teal);--color-on-primary: var(--theme-on-primary);--theme-on-primary-inverted-mode-light: #fefefd;--theme-on-primary-inverted-mode-dark: #fefefd;--theme-on-primary-inverted: var(--theme-on-primary-inverted-color-teal);--color-on-primary-inverted: var(--theme-on-primary-inverted