/* Auto-generated by Style Dictionary — DO NOT EDIT */ /** * Do not edit directly, this file was auto-generated. */ :root { --brandOS-ease-linear: linear; --brandOS-ease-snappy: cubic-bezier(0.2, 0, 0, 1); --brandOS-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --brandOS-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --brandOS-ease-strokeDraw: cubic-bezier(0.65, 0, 0.35, 1); --brandOS-ease-stroke-draw: cubic-bezier(0.65, 0, 0.35, 1); --brandOS-ease-enter: cubic-bezier(0, 0, 0.2, 1); --brandOS-ease-exit: cubic-bezier(0.4, 0, 1, 1); --brandOS-duration-instant: 50ms; --brandOS-duration-fast: 150ms; --brandOS-duration-normal: 300ms; --brandOS-duration-page: 400ms; --brandOS-duration-slow: 500ms; --brandOS-duration-reduced: 1ms; --brandOS-radius-sm: 0.125rem; --brandOS-radius-default: 0.25rem; --brandOS-radius-md: 0.375rem; --brandOS-radius-lg: 0.5rem; --brandOS-radius-xl: 0.75rem; --brandOS-radius-2xl: 1rem; --brandOS-radius-full: 9999px; --brandOS-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05); --brandOS-shadow-default: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1); --brandOS-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1); --brandOS-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1); --brandOS-shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1); --brandOS-space-0: 0; --brandOS-space-1: 0.25rem; --brandOS-space-2: 0.5rem; --brandOS-space-3: 0.75rem; --brandOS-space-4: 1rem; --brandOS-space-5: 1.25rem; --brandOS-space-6: 1.5rem; --brandOS-space-8: 2rem; --brandOS-space-10: 2.5rem; --brandOS-space-12: 3rem; --brandOS-space-14: 3.5rem; --brandOS-space-16: 4rem; --brandOS-space-18: 4.5rem; --brandOS-space-20: 5rem; --brandOS-space-24: 6rem; --brandOS-z-base: 0; --brandOS-z-docked: 10; --brandOS-z-sticky: 100; --brandOS-z-overlay: 500; --brandOS-z-drawer: 700; --brandOS-z-dialog: 800; --brandOS-z-dropdown: 900; --brandOS-z-toast: 950; --brandOS-z-tooltip: 1000; --brandOS-input-height-sm: 1.875rem; --brandOS-input-height-md: 2.5rem; --brandOS-input-height-lg: 3.125rem; --brandOS-toggle-size-sm: 0.875rem; --brandOS-toggle-size-md: 1.125rem; --brandOS-toggle-size-lg: 1.375rem; --brandOS-switch-width: 2.625rem; --brandOS-switch-height: 1.625rem; --brandOS-switch-thumb-size: 1.125rem; --brandOS-badge-height-sm: 1.5rem; --brandOS-badge-height-md: 2rem; --brandOS-border-width-default: 1px; --brandOS-border-width-focus: 2px; --brandOS-focus-ring-offset: 1px; --brandOS-tooltip-arrow-size: 6px; --brandOS-font-inter: 'Inter Variable', 'Inter', system-ui, sans-serif; --brandOS-font-red-hat: 'Red Hat Display', sans-serif; --brandOS-font-jetbrains: 'JetBrains Mono Variable', 'JetBrains Mono', monospace; --brandOS-text-xs: clamp(0.625rem, 0.7rem + 0.25vw, 0.75rem); --brandOS-text-sm: clamp(0.75rem, 0.8rem + 0.375vw, 0.875rem); --brandOS-text-base: clamp(0.875rem, 0.9rem + 0.5vw, 1rem); --brandOS-text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); --brandOS-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); --brandOS-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --brandOS-text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --brandOS-text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); --brandOS-text-4xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem); --brandOS-text-5xl: clamp(3rem, 2rem + 5vw, 5rem); --brandOS-text-6xl: clamp(3.5rem, 2.5rem + 5vw, 6rem); --brandOS-text-7xl: clamp(4rem, 3rem + 5vw, 7rem); --brandOS-text-8xl: clamp(4.5rem, 3rem + 6vw, 8rem); --brandOS-text-9xl: clamp(5rem, 3rem + 8vw, 9rem); --brandOS-font-weight-thin: 100; --brandOS-font-weight-light: 300; --brandOS-font-weight-regular: 400; --brandOS-font-weight-medium: 500; --brandOS-font-weight-semibold: 600; --brandOS-font-weight-bold: 700; --brandOS-font-weight-bolder: 900; --brandOS-leading-none: 1; --brandOS-leading-tight: 1.1; --brandOS-leading-snug: 1.25; --brandOS-leading-normal: 1.5; --brandOS-leading-relaxed: 1.625; --brandOS-leading-loose: 2; --brandOS-tracking-denser: -0.03em; --brandOS-tracking-dense: -0.015em; --brandOS-tracking-normal: normal; --brandOS-tracking-loose: 0.075em; --brandOS-tracking-looser: 0.15em; --brandOS-accent-matrix-100: oklch(0.92 0.12 145); --brandOS-accent-matrix-200: oklch(0.86 0.16 145); --brandOS-accent-matrix-300: oklch(0.78 0.2 145); --brandOS-accent-matrix-400: oklch(0.7 0.24 145); --brandOS-accent-matrix-500: oklch(0.82 0.28 145); --brandOS-accent-matrix-600: oklch(0.72 0.3 145); --brandOS-accent-matrix-700: oklch(0.33 0.28 145); --brandOS-accent-matrix-800: oklch(0.28 0.24 145); --brandOS-accent-matrix-900: oklch(0.23 0.2 145); --brandOS-accent-matrix-950: oklch(0.18 0.16 145); --brandOS-accent-matrix-050: oklch(0.96 0.08 145); --brandOS-accent-matrix-light: var(--brandOS-accent-matrix-500); --brandOS-accent-matrix-base: var(--brandOS-accent-matrix-600); --brandOS-accent-matrix-dark: var(--brandOS-accent-matrix-700); --brandOS-accent-matrix-hover: var(--brandOS-accent-matrix-400); --brandOS-accent-matrix-active: var(--brandOS-accent-matrix-800); --brandOS-accent-cyan-100: oklch(0.92 0.09 195); --brandOS-accent-cyan-200: oklch(0.86 0.12 195); --brandOS-accent-cyan-300: oklch(0.78 0.15 195); --brandOS-accent-cyan-400: oklch(0.7 0.17 195); --brandOS-accent-cyan-500: oklch(0.82 0.18 195); --brandOS-accent-cyan-600: oklch(0.72 0.2 195); --brandOS-accent-cyan-700: oklch(0.34 0.18 195); --brandOS-accent-cyan-800: oklch(0.28 0.16 195); --brandOS-accent-cyan-900: oklch(0.23 0.14 195); --brandOS-accent-cyan-950: oklch(0.18 0.12 195); --brandOS-accent-cyan-050: oklch(0.96 0.06 195); --brandOS-accent-cyan-light: var(--brandOS-accent-cyan-500); --brandOS-accent-cyan-base: var(--brandOS-accent-cyan-600); --brandOS-accent-cyan-dark: var(--brandOS-accent-cyan-700); --brandOS-accent-cyan-hover: var(--brandOS-accent-cyan-400); --brandOS-accent-cyan-active: var(--brandOS-accent-cyan-800); --brandOS-accent-magenta-100: oklch(0.92 0.1 330); --brandOS-accent-magenta-200: oklch(0.86 0.14 330); --brandOS-accent-magenta-300: oklch(0.78 0.17 330); --brandOS-accent-magenta-400: oklch(0.7 0.2 330); --brandOS-accent-magenta-500: oklch(0.82 0.22 330); --brandOS-accent-magenta-600: oklch(0.72 0.25 330); --brandOS-accent-magenta-700: oklch(0.3 0.22 330); --brandOS-accent-magenta-800: oklch(0.25 0.18 330); --brandOS-accent-magenta-900: oklch(0.2 0.15 330); --brandOS-accent-magenta-950: oklch(0.16 0.12 330); --brandOS-accent-magenta-050: oklch(0.96 0.07 330); --brandOS-accent-magenta-light: var(--brandOS-accent-magenta-500); --brandOS-accent-magenta-base: var(--brandOS-accent-magenta-600); --brandOS-accent-magenta-dark: var(--brandOS-accent-magenta-700); --brandOS-accent-magenta-hover: var(--brandOS-accent-magenta-400); --brandOS-accent-magenta-active: var(--brandOS-accent-magenta-800); --brandOS-accent-electric-100: oklch(0.92 0.09 260); --brandOS-accent-electric-200: oklch(0.86 0.13 260); --brandOS-accent-electric-300: oklch(0.78 0.16 260); --brandOS-accent-electric-400: oklch(0.7 0.18 260); --brandOS-accent-electric-500: oklch(0.82 0.2 260); --brandOS-accent-electric-600: oklch(0.72 0.22 260); --brandOS-accent-electric-700: oklch(0.33 0.2 260); --brandOS-accent-electric-800: oklch(0.28 0.17 260); --brandOS-accent-electric-900: oklch(0.23 0.14 260); --brandOS-accent-electric-950: oklch(0.18 0.11 260); --brandOS-accent-electric-050: oklch(0.96 0.06 260); --brandOS-accent-electric-light: var(--brandOS-accent-electric-500); --brandOS-accent-electric-base: var(--brandOS-accent-electric-600); --brandOS-accent-electric-dark: var(--brandOS-accent-electric-700); --brandOS-accent-electric-hover: var(--brandOS-accent-electric-400); --brandOS-accent-electric-active: var(--brandOS-accent-electric-800); --brandOS-accent-coral-100: oklch(0.92 0.09 25); --brandOS-accent-coral-200: oklch(0.86 0.12 25); --brandOS-accent-coral-300: oklch(0.78 0.15 25); --brandOS-accent-coral-400: oklch(0.7 0.17 25); --brandOS-accent-coral-500: oklch(0.82 0.16 25); --brandOS-accent-coral-600: oklch(0.72 0.18 25); --brandOS-accent-coral-700: oklch(0.32 0.16 25); --brandOS-accent-coral-800: oklch(0.28 0.16 25); --brandOS-accent-coral-900: oklch(0.23 0.14 25); --brandOS-accent-coral-950: oklch(0.18 0.12 25); --brandOS-accent-coral-050: oklch(0.96 0.06 25); --brandOS-accent-coral-light: var(--brandOS-accent-coral-500); --brandOS-accent-coral-base: var(--brandOS-accent-coral-600); --brandOS-accent-coral-dark: var(--brandOS-accent-coral-700); --brandOS-accent-coral-hover: var(--brandOS-accent-coral-400); --brandOS-accent-coral-active: var(--brandOS-accent-coral-800); --brandOS-accent-amber-100: oklch(0.92 0.1 80); --brandOS-accent-amber-200: oklch(0.86 0.13 80); --brandOS-accent-amber-300: oklch(0.78 0.15 80); --brandOS-accent-amber-400: oklch(0.7 0.16 80); --brandOS-accent-amber-500: oklch(0.82 0.14 80); --brandOS-accent-amber-600: oklch(0.72 0.16 80); --brandOS-accent-amber-700: oklch(0.35 0.14 80); --brandOS-accent-amber-800: oklch(0.3 0.14 80); --brandOS-accent-amber-900: oklch(0.25 0.12 80); --brandOS-accent-amber-950: oklch(0.2 0.1 80); --brandOS-accent-amber-050: oklch(0.96 0.07 80); --brandOS-accent-amber-light: var(--brandOS-accent-amber-500); --brandOS-accent-amber-base: var(--brandOS-accent-amber-600); --brandOS-accent-amber-dark: var(--brandOS-accent-amber-700); --brandOS-accent-amber-hover: var(--brandOS-accent-amber-400); --brandOS-accent-amber-active: var(--brandOS-accent-amber-800); --brandOS-accent-lime-100: oklch(0.92 0.09 130); --brandOS-accent-lime-200: oklch(0.86 0.12 130); --brandOS-accent-lime-300: oklch(0.78 0.15 130); --brandOS-accent-lime-400: oklch(0.7 0.17 130); --brandOS-accent-lime-500: oklch(0.82 0.18 130); --brandOS-accent-lime-600: oklch(0.72 0.2 130); --brandOS-accent-lime-700: oklch(0.35 0.18 130); --brandOS-accent-lime-800: oklch(0.3 0.15 130); --brandOS-accent-lime-900: oklch(0.25 0.12 130); --brandOS-accent-lime-950: oklch(0.2 0.1 130); --brandOS-accent-lime-050: oklch(0.96 0.06 130); --brandOS-accent-lime-light: var(--brandOS-accent-lime-500); --brandOS-accent-lime-base: var(--brandOS-accent-lime-600); --brandOS-accent-lime-dark: var(--brandOS-accent-lime-700); --brandOS-accent-lime-hover: var(--brandOS-accent-lime-400); --brandOS-accent-lime-active: var(--brandOS-accent-lime-800); --brandOS-accent-teal-100: oklch(0.92 0.08 180); --brandOS-accent-teal-200: oklch(0.86 0.1 180); --brandOS-accent-teal-300: oklch(0.78 0.12 180); --brandOS-accent-teal-400: oklch(0.7 0.13 180); --brandOS-accent-teal-500: oklch(0.82 0.1 180); --brandOS-accent-teal-600: oklch(0.72 0.12 180); --brandOS-accent-teal-700: oklch(0.34 0.1 180); --brandOS-accent-teal-800: oklch(0.3 0.1 180); --brandOS-accent-teal-900: oklch(0.25 0.08 180); --brandOS-accent-teal-950: oklch(0.2 0.06 180); --brandOS-accent-teal-050: oklch(0.96 0.06 180); --brandOS-accent-teal-light: var(--brandOS-accent-teal-500); --brandOS-accent-teal-base: var(--brandOS-accent-teal-600); --brandOS-accent-teal-dark: var(--brandOS-accent-teal-700); --brandOS-accent-teal-hover: var(--brandOS-accent-teal-400); --brandOS-accent-teal-active: var(--brandOS-accent-teal-800); --brandOS-accent-azure-100: oklch(0.92 0.06 250); --brandOS-accent-azure-200: oklch(0.86 0.08 250); --brandOS-accent-azure-300: oklch(0.78 0.1 250); --brandOS-accent-azure-400: oklch(0.7 0.12 250); --brandOS-accent-azure-500: oklch(0.82 0.13 250); --brandOS-accent-azure-600: oklch(0.72 0.15 250); --brandOS-accent-azure-700: oklch(0.35 0.13 250); --brandOS-accent-azure-800: oklch(0.3 0.11 250); --brandOS-accent-azure-900: oklch(0.25 0.09 250); --brandOS-accent-azure-950: oklch(0.2 0.07 250); --brandOS-accent-azure-050: oklch(0.96 0.04 250); --brandOS-accent-azure-light: var(--brandOS-accent-azure-500); --brandOS-accent-azure-base: var(--brandOS-accent-azure-600); --brandOS-accent-azure-dark: var(--brandOS-accent-azure-700); --brandOS-accent-azure-hover: var(--brandOS-accent-azure-400); --brandOS-accent-azure-active: var(--brandOS-accent-azure-800); --brandOS-accent-violet-100: oklch(0.92 0.09 290); --brandOS-accent-violet-200: oklch(0.86 0.12 290); --brandOS-accent-violet-300: oklch(0.78 0.15 290); --brandOS-accent-violet-400: oklch(0.7 0.17 290); --brandOS-accent-violet-500: oklch(0.82 0.18 290); --brandOS-accent-violet-600: oklch(0.72 0.2 290); --brandOS-accent-violet-700: oklch(0.34 0.18 290); --brandOS-accent-violet-800: oklch(0.28 0.15 290); --brandOS-accent-violet-900: oklch(0.23 0.12 290); --brandOS-accent-violet-950: oklch(0.18 0.1 290); --brandOS-accent-violet-050: oklch(0.96 0.06 290); --brandOS-accent-violet-light: var(--brandOS-accent-violet-500); --brandOS-accent-violet-base: var(--brandOS-accent-violet-600); --brandOS-accent-violet-dark: var(--brandOS-accent-violet-700); --brandOS-accent-violet-hover: var(--brandOS-accent-violet-400); --brandOS-accent-violet-active: var(--brandOS-accent-violet-800); --brandOS-accent-rose-100: oklch(0.92 0.08 350); --brandOS-accent-rose-200: oklch(0.86 0.1 350); --brandOS-accent-rose-300: oklch(0.78 0.13 350); --brandOS-accent-rose-400: oklch(0.7 0.15 350); --brandOS-accent-rose-500: oklch(0.82 0.16 350); --brandOS-accent-rose-600: oklch(0.72 0.18 350); --brandOS-accent-rose-700: oklch(0.33 0.16 350); --brandOS-accent-rose-800: oklch(0.28 0.13 350); --brandOS-accent-rose-900: oklch(0.23 0.11 350); --brandOS-accent-rose-950: oklch(0.18 0.09 350); --brandOS-accent-rose-050: oklch(0.96 0.06 350); --brandOS-accent-rose-light: var(--brandOS-accent-rose-500); --brandOS-accent-rose-base: var(--brandOS-accent-rose-600); --brandOS-accent-rose-dark: var(--brandOS-accent-rose-700); --brandOS-accent-rose-hover: var(--brandOS-accent-rose-400); --brandOS-accent-rose-active: var(--brandOS-accent-rose-800); --brandOS-accent-slate-100: oklch(0.92 0.008 250); --brandOS-accent-slate-200: oklch(0.86 0.01 250); --brandOS-accent-slate-300: oklch(0.78 0.014 250); --brandOS-accent-slate-400: oklch(0.7 0.017 250); --brandOS-accent-slate-500: oklch(0.82 0.02 250); --brandOS-accent-slate-600: oklch(0.72 0.02 250); --brandOS-accent-slate-700: oklch(0.35 0.02 250); --brandOS-accent-slate-800: oklch(0.3 0.017 250); --brandOS-accent-slate-900: oklch(0.25 0.014 250); --brandOS-accent-slate-950: oklch(0.2 0.01 250); --brandOS-accent-slate-050: oklch(0.96 0.005 250); --brandOS-accent-slate-light: var(--brandOS-accent-slate-500); --brandOS-accent-slate-base: var(--brandOS-accent-slate-600); --brandOS-accent-slate-dark: var(--brandOS-accent-slate-700); --brandOS-accent-slate-hover: var(--brandOS-accent-slate-400); --brandOS-accent-slate-active: var(--brandOS-accent-slate-800); } /* * Global token aliases that reference brand-specific values. * These can't be generated by Style Dictionary because they use * var() references to tokens set per-brand in variables.css. */ :root { /* Typography — resolved per-brand via --brandOS-font-*-display */ --brandOS-font-body: var(--brandOS-font-body-display); --brandOS-font-heading: var(--brandOS-font-heading-display); --brandOS-font-mono: var(--brandOS-font-jetbrains); /* Switch — references spacing tokens */ --brandOS-switch-thumb-offset: var(--brandOS-space-1); --brandOS-switch-translate-x: var(--brandOS-space-4); /* Badge — references other tokens */ --brandOS-badge-radius: var(--brandOS-radius-md); --brandOS-badge-font-size-sm: var(--brandOS-text-xs); --brandOS-badge-font-size-md: var(--brandOS-text-sm); --brandOS-badge-padding-x-sm: var(--brandOS-space-2); --brandOS-badge-padding-x-md: var(--brandOS-space-3); /* Focus Ring */ --brandOS-focus-ring-style: solid; /* Overlay — references semantic token */ --brandOS-overlay-bg: var(--brandOS-background-overlay); } /* Reduced-motion — collapses every duration token to --brandOS-duration-reduced. * Components that read duration tokens via var() automatically shrink to 1ms * without per-component @media queries. Easing tokens stay untouched so any * transition that does run still uses the right curve. */ @media (prefers-reduced-motion: reduce) { :root { --brandOS-duration-instant: var(--brandOS-duration-reduced); --brandOS-duration-fast: var(--brandOS-duration-reduced); --brandOS-duration-normal: var(--brandOS-duration-reduced); --brandOS-duration-page: var(--brandOS-duration-reduced); --brandOS-duration-slow: var(--brandOS-duration-reduced); } } [data-brand='snyder'] { --colors-raw-babyblue-050-v-oklch: 0.9688 0.0128 247.67; --colors-raw-babyblue-100-v-oklch: 0.9376 0.0258 247.15; --colors-raw-babyblue-150-v-oklch: 0.9064 0.039 246.56; --colors-raw-babyblue-200-v-oklch: 0.8752 0.0526 245.89; --colors-raw-babyblue-250-v-oklch: 0.8441 0.0666 245.15; --colors-raw-babyblue-300-v-oklch: 0.8129 0.0809 244.3; --colors-raw-babyblue-350-v-oklch: 0.7819 0.0957 243.35; --colors-raw-babyblue-400-v-oklch: 0.7508 0.1111 242.26; --colors-raw-babyblue-450-v-oklch: 0.7197 0.1271 241.02; --colors-raw-babyblue-500-v-oklch: 0.6887 0.144 239.61; --colors-raw-babyblue-550-v-oklch: 0.6336 0.1292 239.84; --colors-raw-babyblue-600-v-oklch: 0.5785 0.1144 240.1; --colors-raw-babyblue-650-v-oklch: 0.5234 0.0997 240.42; --colors-raw-babyblue-700-v-oklch: 0.4683 0.085 240.81; --colors-raw-babyblue-750-v-oklch: 0.4132 0.0704 241.3; --colors-raw-babyblue-800-v-oklch: 0.3582 0.0558 241.93; --colors-raw-babyblue-850-v-oklch: 0.3031 0.0414 242.75; --colors-raw-babyblue-900-v-oklch: 0.248 0.0271 243.89; --colors-raw-babyblue-950-v-oklch: 0.1918 0.0142 243.04; --colors-raw-gray-050-v-oklch: 1 0 0; --colors-raw-gray-100-v-oklch: 0.956 0 0; --colors-raw-gray-150-v-oklch: 0.912 0 0; --colors-raw-gray-200-v-oklch: 0.868 0 0; --colors-raw-gray-250-v-oklch: 0.824 0 0; --colors-raw-gray-300-v-oklch: 0.78 0 0; --colors-raw-gray-350-v-oklch: 0.736 0 0; --colors-raw-gray-400-v-oklch: 0.692 0 0; --colors-raw-gray-450-v-oklch: 0.648 0 0; --colors-raw-gray-500-v-oklch: 0.604 0 0; --colors-raw-gray-550-v-oklch: 0.56 0 0; --colors-raw-gray-600-v-oklch: 0.5178 0 0; --colors-raw-gray-650-v-oklch: 0.4756 0 0; --colors-raw-gray-700-v-oklch: 0.4334 0 0; --colors-raw-gray-750-v-oklch: 0.3912 0 0; --colors-raw-gray-800-v-oklch: 0.3489 0 0; --colors-raw-gray-850-v-oklch: 0.3068 0 0; --colors-raw-gray-900-v-oklch: 0.2646 0 0; --colors-raw-gray-950-v-oklch: 0.2223 0 0; --colors-raw-gray-1000-v-oklch: 0 0 0; --colors-raw-neutral-fg-light-v-oklch: 0 0 0; --colors-raw-neutral-bg-light-v-oklch: 1 0 0; --colors-raw-neutral-fg-dark-v-oklch: 1 0 0; --colors-raw-neutral-bg-dark-v-oklch: 0 0 0; --colors-raw-base-bg1-light-v-oklch: 1 0 0; --colors-raw-base-bg2-light-v-oklch: 0.956 0 0; --colors-raw-base-bg3-light-v-oklch: 0.868 0 0; --colors-raw-base-bg1-dark-v-oklch: 0.2223 0 0; --colors-raw-base-bg2-dark-v-oklch: 0.2646 0 0; --colors-raw-base-bg3-dark-v-oklch: 0 0 0; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-gray-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-gray-400-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-gray-200-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-gray-800-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-gray-300-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-gray-700-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-babyblue-500-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-babyblue-500-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-babyblue-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-babyblue-050-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-babyblue-750-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-babyblue-650-v-oklch)); --semantic-brand-accent-light: var(--brandOS-accent-azure-600); --semantic-brand-accent-dark: var(--brandOS-accent-azure-600); --semantic-brand-accent-content-light: oklch(var(--colors-raw-babyblue-050-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-babyblue-050-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: var(--brandOS-accent-azure-600); --semantic-status-info-dark: var(--brandOS-accent-azure-500); --semantic-status-info-content-light: var(--brandOS-accent-azure-050); --semantic-status-info-content-dark: var(--brandOS-accent-azure-950); --semantic-status-success-light: var(--brandOS-accent-lime-600); --semantic-status-success-dark: var(--brandOS-accent-lime-500); --semantic-status-success-content-light: var(--brandOS-accent-lime-050); --semantic-status-success-content-dark: var(--brandOS-accent-lime-950); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: var(--brandOS-accent-coral-600); --semantic-status-error-dark: var(--brandOS-accent-coral-500); --semantic-status-error-content-light: var(--brandOS-accent-coral-050); --semantic-status-error-content-dark: var(--brandOS-accent-coral-950); } [data-brand='snyder'] { --colors-raw-babyblue-050-hex: #eef6fd; --colors-raw-babyblue-100-hex: #ddecfb; --colors-raw-babyblue-150-hex: #cce3f9; --colors-raw-babyblue-200-hex: #badaf7; --colors-raw-babyblue-250-hex: #a8d1f5; --colors-raw-babyblue-300-hex: #95c8f3; --colors-raw-babyblue-350-hex: #81bff1; --colors-raw-babyblue-400-hex: #6ab6ef; --colors-raw-babyblue-450-hex: #50aeec; --colors-raw-babyblue-500-hex: #2aa5ea; --colors-raw-babyblue-550-hex: #2b93d0; --colors-raw-babyblue-600-hex: #2a82b6; --colors-raw-babyblue-650-hex: #29709d; --colors-raw-babyblue-700-hex: #276085; --colors-raw-babyblue-750-hex: #23506e; --colors-raw-babyblue-800-hex: #204057; --colors-raw-babyblue-850-hex: #1b3142; --colors-raw-babyblue-900-hex: #16232d; --colors-raw-babyblue-950-hex: #0f151a; --colors-raw-gray-050-hex: #ffffff; --colors-raw-gray-100-hex: #f0f0f0; --colors-raw-gray-150-hex: #e2e2e2; --colors-raw-gray-200-hex: #d3d3d3; --colors-raw-gray-250-hex: #c5c5c5; --colors-raw-gray-300-hex: #b7b7b7; --colors-raw-gray-350-hex: #a9a9a9; --colors-raw-gray-400-hex: #9c9c9c; --colors-raw-gray-450-hex: #8e8e8e; --colors-raw-gray-500-hex: #818181; --colors-raw-gray-550-hex: #747474; --colors-raw-gray-600-hex: #686868; --colors-raw-gray-650-hex: #5c5c5c; --colors-raw-gray-700-hex: #515151; --colors-raw-gray-750-hex: #454545; --colors-raw-gray-800-hex: #3a3a3a; --colors-raw-gray-850-hex: #2f2f2f; --colors-raw-gray-900-hex: #252525; --colors-raw-gray-950-hex: #1b1b1b; --colors-raw-gray-1000-hex: #000000; } /* DaisyUI overlay for Snyder. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. Semantic layer is * the single source of truth; no raw refs leak into the DaisyUI surface. */ [data-brand='snyder'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='snyder'][data-theme='light'] { color-scheme: light; } [data-brand='snyder'][data-theme='dark'] { color-scheme: dark; } /* * Snyder Brand – MUI Color Mappings * * Maps MUI palette CSS variables to Snyder brand tokens. * Follows the same pattern as snyder/daisyui.css. */ /* ─── Light Mode ─── */ [data-brand='snyder'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-primary-050); /* Secondary */ --mui-palette-secondary-main: var(--brandOS-primary-750); --mui-palette-secondary-light: var(--brandOS-primary-500); --mui-palette-secondary-dark: var(--brandOS-primary-900); --mui-palette-secondary-contrastText: var(--brandOS-primary-050); /* Error */ --mui-palette-error-main: var(--brandOS-accent-coral-600); --mui-palette-error-light: var(--brandOS-accent-coral-400); --mui-palette-error-dark: var(--brandOS-accent-coral-800); --mui-palette-error-contrastText: var(--brandOS-accent-coral-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); /* Info (Azure) */ --mui-palette-info-main: var(--brandOS-accent-azure-600); --mui-palette-info-light: var(--brandOS-accent-azure-400); --mui-palette-info-dark: var(--brandOS-accent-azure-800); --mui-palette-info-contrastText: var(--brandOS-accent-azure-050); /* Success (Lime) */ --mui-palette-success-main: var(--brandOS-accent-lime-600); --mui-palette-success-light: var(--brandOS-accent-lime-400); --mui-palette-success-dark: var(--brandOS-accent-lime-800); --mui-palette-success-contrastText: var(--brandOS-accent-lime-050); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* ─── Dark Mode ─── */ [data-brand='snyder'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-primary-950); /* Secondary */ --mui-palette-secondary-main: var(--brandOS-primary-500); --mui-palette-secondary-light: var(--brandOS-primary-400); --mui-palette-secondary-dark: var(--brandOS-primary-700); --mui-palette-secondary-contrastText: var(--brandOS-primary-050); /* Error */ --mui-palette-error-main: var(--brandOS-accent-coral-500); --mui-palette-error-light: var(--brandOS-accent-coral-300); --mui-palette-error-dark: var(--brandOS-accent-coral-700); --mui-palette-error-contrastText: var(--brandOS-accent-coral-950); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); /* Info (Azure) */ --mui-palette-info-main: var(--brandOS-accent-azure-500); --mui-palette-info-light: var(--brandOS-accent-azure-300); --mui-palette-info-dark: var(--brandOS-accent-azure-700); --mui-palette-info-contrastText: var(--brandOS-accent-azure-950); /* Success (Lime) */ --mui-palette-success-main: var(--brandOS-accent-lime-500); --mui-palette-success-light: var(--brandOS-accent-lime-300); --mui-palette-success-dark: var(--brandOS-accent-lime-700); --mui-palette-success-contrastText: var(--brandOS-accent-lime-950); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Snyder semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). The browser selects * the correct value based on the active color-scheme, which daisyui.css sets * per [data-theme='light|dark'] block. */ [data-brand='snyder'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces — for content placed over colored tile/hero fills. * Snyder brand keeps these neutral (pure white) so tile h2/p read cleanly * against any accent background. Opacity steps mirror the reference site's * muted/subtle/shine stops. */ --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.7); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); /* Tile hover darken — a hair of black mixed into any colored tile on hover. */ --semantic-tile-dim: oklch(0 0 0 / 0.08); } [data-brand='snyder'][data-theme='light'] { color-scheme: light; } [data-brand='snyder'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='snyder'] { /*brand*/ --brandOS-brand: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /*text*/ --brandOS-text-primary: light-dark(var(--brandOS-gray-900), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-600), var(--brandOS-gray-300)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-400)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-400)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-300)); /*background*/ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-950)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-950) l c h / 0.5), oklch(from var(--brandOS-gray-950) l c h / 0.7)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-dark-v-oklch)), oklch(var(--colors-raw-neutral-fg-light-v-oklch))); /*border*/ --brandOS-border-subtle: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-800)); --brandOS-border-default: light-dark(var(--brandOS-gray-300), var(--brandOS-gray-700)); --brandOS-border-strong: light-dark(var(--brandOS-gray-400), var(--brandOS-gray-600)); --brandOS-border-focus: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /*interactive*/ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-300)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); /*status*/ --brandOS-status-success: light-dark(var(--brandOS-accent-lime-600), var(--brandOS-accent-lime-500)); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(var(--brandOS-accent-coral-600), var(--brandOS-accent-coral-500)); --brandOS-status-info: light-dark(var(--brandOS-accent-azure-600), var(--brandOS-accent-azure-500)); } [data-brand='snyder'] { /* Color Palette - Primary */ --brandOS-primary-050: oklch(var(--colors-raw-babyblue-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-babyblue-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-babyblue-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-babyblue-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-babyblue-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-babyblue-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-babyblue-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-babyblue-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-babyblue-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-babyblue-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-babyblue-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-babyblue-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-babyblue-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-babyblue-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-babyblue-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-babyblue-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-babyblue-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-babyblue-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-babyblue-950-v-oklch)); /* Color Palette - Gray */ --brandOS-gray-050: oklch(var(--colors-raw-gray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-gray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-gray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-gray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-gray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-gray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-gray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-gray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-gray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-gray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-gray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-gray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-gray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-gray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-gray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-gray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-gray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-gray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-gray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-gray-1000-v-oklch)); /* Typography */ --brandOS-font-heading-display: var(--brandOS-font-red-hat); --brandOS-font-body-display: var(--brandOS-font-inter); } [data-brand='hackerman'] { --brandOS-accent-matrix-100: oklch(0.94 0.17 140); --brandOS-accent-matrix-200: oklch(0.88 0.22 140); --brandOS-accent-matrix-300: oklch(0.82 0.26 140); --brandOS-accent-matrix-400: oklch(0.76 0.3 140); --brandOS-accent-matrix-500: oklch(0.85 0.34 140); --brandOS-accent-matrix-600: oklch(0.76 0.36 140); --brandOS-accent-matrix-700: oklch(0.4 0.3 140); --brandOS-accent-matrix-800: oklch(0.32 0.25 140); --brandOS-accent-matrix-900: oklch(0.24 0.2 140); --brandOS-accent-matrix-950: oklch(0.18 0.16 140); --brandOS-accent-matrix-050: oklch(0.97 0.11 140); --brandOS-accent-matrix-light: oklch(0.85 0.34 140); --brandOS-accent-matrix-base: oklch(0.76 0.36 140); --brandOS-accent-matrix-dark: oklch(0.4 0.3 140); --brandOS-accent-matrix-hover: oklch(0.76 0.3 140); --brandOS-accent-matrix-active: oklch(0.32 0.25 140); --brandOS-accent-cyan-100: oklch(0.94 0.13 195); --brandOS-accent-cyan-200: oklch(0.88 0.17 195); --brandOS-accent-cyan-300: oklch(0.82 0.2 195); --brandOS-accent-cyan-400: oklch(0.76 0.22 195); --brandOS-accent-cyan-500: oklch(0.85 0.23 195); --brandOS-accent-cyan-600: oklch(0.76 0.25 195); --brandOS-accent-cyan-700: oklch(0.4 0.22 195); --brandOS-accent-cyan-800: oklch(0.32 0.19 195); --brandOS-accent-cyan-900: oklch(0.24 0.16 195); --brandOS-accent-cyan-950: oklch(0.18 0.13 195); --brandOS-accent-cyan-050: oklch(0.97 0.08 195); --brandOS-accent-cyan-light: oklch(0.85 0.23 195); --brandOS-accent-cyan-base: oklch(0.76 0.25 195); --brandOS-accent-cyan-dark: oklch(0.4 0.22 195); --brandOS-accent-cyan-hover: oklch(0.76 0.22 195); --brandOS-accent-cyan-active: oklch(0.32 0.19 195); --brandOS-accent-magenta-100: oklch(0.93 0.15 330); --brandOS-accent-magenta-200: oklch(0.87 0.19 330); --brandOS-accent-magenta-300: oklch(0.8 0.23 330); --brandOS-accent-magenta-400: oklch(0.74 0.27 330); --brandOS-accent-magenta-500: oklch(0.83 0.29 330); --brandOS-accent-magenta-600: oklch(0.74 0.31 330); --brandOS-accent-magenta-700: oklch(0.38 0.26 330); --brandOS-accent-magenta-800: oklch(0.3 0.22 330); --brandOS-accent-magenta-900: oklch(0.23 0.18 330); --brandOS-accent-magenta-950: oklch(0.17 0.14 330); --brandOS-accent-magenta-050: oklch(0.96 0.1 330); --brandOS-accent-magenta-light: oklch(0.83 0.29 330); --brandOS-accent-magenta-base: oklch(0.74 0.31 330); --brandOS-accent-magenta-dark: oklch(0.38 0.26 330); --brandOS-accent-magenta-hover: oklch(0.74 0.27 330); --brandOS-accent-magenta-active: oklch(0.3 0.22 330); --brandOS-accent-electric-100: oklch(0.94 0.13 260); --brandOS-accent-electric-200: oklch(0.88 0.18 260); --brandOS-accent-electric-300: oklch(0.81 0.22 260); --brandOS-accent-electric-400: oklch(0.74 0.25 260); --brandOS-accent-electric-500: oklch(0.84 0.26 260); --brandOS-accent-electric-600: oklch(0.75 0.28 260); --brandOS-accent-electric-700: oklch(0.4 0.24 260); --brandOS-accent-electric-800: oklch(0.32 0.2 260); --brandOS-accent-electric-900: oklch(0.24 0.16 260); --brandOS-accent-electric-950: oklch(0.18 0.13 260); --brandOS-accent-electric-050: oklch(0.97 0.08 260); --brandOS-accent-electric-light: oklch(0.84 0.26 260); --brandOS-accent-electric-base: oklch(0.75 0.28 260); --brandOS-accent-electric-dark: oklch(0.4 0.24 260); --brandOS-accent-electric-hover: oklch(0.74 0.25 260); --brandOS-accent-electric-active: oklch(0.32 0.2 260); --brandOS-accent-coral-100: oklch(0.92 0.13 25); --brandOS-accent-coral-200: oklch(0.86 0.17 25); --brandOS-accent-coral-300: oklch(0.78 0.2 25); --brandOS-accent-coral-400: oklch(0.72 0.22 25); --brandOS-accent-coral-500: oklch(0.82 0.22 25); --brandOS-accent-coral-600: oklch(0.73 0.24 25); --brandOS-accent-coral-700: oklch(0.38 0.22 25); --brandOS-accent-coral-800: oklch(0.31 0.19 25); --brandOS-accent-coral-900: oklch(0.24 0.16 25); --brandOS-accent-coral-950: oklch(0.18 0.13 25); --brandOS-accent-coral-050: oklch(0.96 0.08 25); --brandOS-accent-coral-light: oklch(0.82 0.22 25); --brandOS-accent-coral-base: oklch(0.73 0.24 25); --brandOS-accent-coral-dark: oklch(0.38 0.22 25); --brandOS-accent-coral-hover: oklch(0.72 0.22 25); --brandOS-accent-coral-active: oklch(0.31 0.19 25); --brandOS-accent-amber-100: oklch(0.93 0.14 85); --brandOS-accent-amber-200: oklch(0.87 0.17 85); --brandOS-accent-amber-300: oklch(0.8 0.19 85); --brandOS-accent-amber-400: oklch(0.74 0.2 85); --brandOS-accent-amber-500: oklch(0.86 0.19 85); --brandOS-accent-amber-600: oklch(0.77 0.2 85); --brandOS-accent-amber-700: oklch(0.42 0.18 85); --brandOS-accent-amber-800: oklch(0.34 0.16 85); --brandOS-accent-amber-900: oklch(0.26 0.14 85); --brandOS-accent-amber-950: oklch(0.2 0.12 85); --brandOS-accent-amber-050: oklch(0.96 0.1 85); --brandOS-accent-amber-light: oklch(0.86 0.19 85); --brandOS-accent-amber-base: oklch(0.77 0.2 85); --brandOS-accent-amber-dark: oklch(0.42 0.18 85); --brandOS-accent-amber-hover: oklch(0.74 0.2 85); --brandOS-accent-amber-active: oklch(0.34 0.16 85); --brandOS-accent-lime-100: oklch(0.94 0.14 130); --brandOS-accent-lime-200: oklch(0.88 0.18 130); --brandOS-accent-lime-300: oklch(0.82 0.22 130); --brandOS-accent-lime-400: oklch(0.76 0.25 130); --brandOS-accent-lime-500: oklch(0.86 0.24 130); --brandOS-accent-lime-600: oklch(0.77 0.26 130); --brandOS-accent-lime-700: oklch(0.42 0.24 130); --brandOS-accent-lime-800: oklch(0.34 0.2 130); --brandOS-accent-lime-900: oklch(0.26 0.16 130); --brandOS-accent-lime-950: oklch(0.2 0.13 130); --brandOS-accent-lime-050: oklch(0.97 0.09 130); --brandOS-accent-lime-light: oklch(0.86 0.24 130); --brandOS-accent-lime-base: oklch(0.77 0.26 130); --brandOS-accent-lime-dark: oklch(0.42 0.24 130); --brandOS-accent-lime-hover: oklch(0.76 0.25 130); --brandOS-accent-lime-active: oklch(0.34 0.2 130); --brandOS-accent-teal-100: oklch(0.94 0.12 180); --brandOS-accent-teal-200: oklch(0.88 0.15 180); --brandOS-accent-teal-300: oklch(0.82 0.17 180); --brandOS-accent-teal-400: oklch(0.76 0.18 180); --brandOS-accent-teal-500: oklch(0.86 0.16 180); --brandOS-accent-teal-600: oklch(0.77 0.18 180); --brandOS-accent-teal-700: oklch(0.4 0.16 180); --brandOS-accent-teal-800: oklch(0.33 0.14 180); --brandOS-accent-teal-900: oklch(0.26 0.12 180); --brandOS-accent-teal-950: oklch(0.2 0.1 180); --brandOS-accent-teal-050: oklch(0.97 0.08 180); --brandOS-accent-teal-light: oklch(0.86 0.16 180); --brandOS-accent-teal-base: oklch(0.77 0.18 180); --brandOS-accent-teal-dark: oklch(0.4 0.16 180); --brandOS-accent-teal-hover: oklch(0.76 0.18 180); --brandOS-accent-teal-active: oklch(0.33 0.14 180); --brandOS-accent-azure-100: oklch(0.94 0.1 250); --brandOS-accent-azure-200: oklch(0.88 0.14 250); --brandOS-accent-azure-300: oklch(0.81 0.17 250); --brandOS-accent-azure-400: oklch(0.74 0.19 250); --brandOS-accent-azure-500: oklch(0.84 0.19 250); --brandOS-accent-azure-600: oklch(0.75 0.21 250); --brandOS-accent-azure-700: oklch(0.4 0.19 250); --brandOS-accent-azure-800: oklch(0.32 0.16 250); --brandOS-accent-azure-900: oklch(0.25 0.13 250); --brandOS-accent-azure-950: oklch(0.19 0.1 250); --brandOS-accent-azure-050: oklch(0.97 0.06 250); --brandOS-accent-azure-light: oklch(0.84 0.19 250); --brandOS-accent-azure-base: oklch(0.75 0.21 250); --brandOS-accent-azure-dark: oklch(0.4 0.19 250); --brandOS-accent-azure-hover: oklch(0.74 0.19 250); --brandOS-accent-azure-active: oklch(0.32 0.16 250); --brandOS-accent-violet-100: oklch(0.93 0.14 290); --brandOS-accent-violet-200: oklch(0.87 0.18 290); --brandOS-accent-violet-300: oklch(0.8 0.22 290); --brandOS-accent-violet-400: oklch(0.73 0.25 290); --brandOS-accent-violet-500: oklch(0.83 0.26 290); --brandOS-accent-violet-600: oklch(0.74 0.28 290); --brandOS-accent-violet-700: oklch(0.38 0.24 290); --brandOS-accent-violet-800: oklch(0.3 0.2 290); --brandOS-accent-violet-900: oklch(0.23 0.16 290); --brandOS-accent-violet-950: oklch(0.18 0.13 290); --brandOS-accent-violet-050: oklch(0.96 0.09 290); --brandOS-accent-violet-light: oklch(0.83 0.26 290); --brandOS-accent-violet-base: oklch(0.74 0.28 290); --brandOS-accent-violet-dark: oklch(0.38 0.24 290); --brandOS-accent-violet-hover: oklch(0.73 0.25 290); --brandOS-accent-violet-active: oklch(0.3 0.2 290); --brandOS-accent-rose-100: oklch(0.93 0.13 350); --brandOS-accent-rose-200: oklch(0.87 0.17 350); --brandOS-accent-rose-300: oklch(0.8 0.2 350); --brandOS-accent-rose-400: oklch(0.73 0.22 350); --brandOS-accent-rose-500: oklch(0.83 0.22 350); --brandOS-accent-rose-600: oklch(0.74 0.24 350); --brandOS-accent-rose-700: oklch(0.37 0.22 350); --brandOS-accent-rose-800: oklch(0.3 0.19 350); --brandOS-accent-rose-900: oklch(0.23 0.16 350); --brandOS-accent-rose-950: oklch(0.18 0.13 350); --brandOS-accent-rose-050: oklch(0.96 0.09 350); --brandOS-accent-rose-light: oklch(0.83 0.22 350); --brandOS-accent-rose-base: oklch(0.74 0.24 350); --brandOS-accent-rose-dark: oklch(0.37 0.22 350); --brandOS-accent-rose-hover: oklch(0.73 0.22 350); --brandOS-accent-rose-active: oklch(0.3 0.19 350); --brandOS-accent-slate-100: oklch(0.92 0.025 145); --brandOS-accent-slate-200: oklch(0.86 0.03 145); --brandOS-accent-slate-300: oklch(0.78 0.035 145); --brandOS-accent-slate-400: oklch(0.7 0.04 145); --brandOS-accent-slate-500: oklch(0.82 0.04 145); --brandOS-accent-slate-600: oklch(0.72 0.042 145); --brandOS-accent-slate-700: oklch(0.35 0.035 145); --brandOS-accent-slate-800: oklch(0.3 0.03 145); --brandOS-accent-slate-900: oklch(0.25 0.025 145); --brandOS-accent-slate-950: oklch(0.2 0.02 145); --brandOS-accent-slate-050: oklch(0.96 0.02 145); --brandOS-accent-slate-light: oklch(0.82 0.04 145); --brandOS-accent-slate-base: oklch(0.72 0.042 145); --brandOS-accent-slate-dark: oklch(0.35 0.035 145); --brandOS-accent-slate-hover: oklch(0.7 0.04 145); --brandOS-accent-slate-active: oklch(0.3 0.03 145); --colors-raw-hackergreen-050-v-oklch: 0.9861 0.0316 137.6; --colors-raw-hackergreen-100-v-oklch: 0.9723 0.063 138.03; --colors-raw-hackergreen-150-v-oklch: 0.9586 0.0942 138.48; --colors-raw-hackergreen-200-v-oklch: 0.945 0.125 138.96; --colors-raw-hackergreen-250-v-oklch: 0.9316 0.1555 139.46; --colors-raw-hackergreen-300-v-oklch: 0.9183 0.1852 139.99; --colors-raw-hackergreen-350-v-oklch: 0.9052 0.2143 140.55; --colors-raw-hackergreen-400-v-oklch: 0.8921 0.2423 141.15; --colors-raw-hackergreen-450-v-oklch: 0.8792 0.2692 141.8; --colors-raw-hackergreen-500-v-oklch: 0.8664 0.2948 142.5; --colors-raw-hackergreen-550-v-oklch: 0.7935 0.2659 142.39; --colors-raw-hackergreen-600-v-oklch: 0.7205 0.2371 142.26; --colors-raw-hackergreen-650-v-oklch: 0.6476 0.2081 142.1; --colors-raw-hackergreen-700-v-oklch: 0.5747 0.1791 141.91; --colors-raw-hackergreen-750-v-oklch: 0.5018 0.15 141.66; --colors-raw-hackergreen-800-v-oklch: 0.4289 0.1208 141.33; --colors-raw-hackergreen-850-v-oklch: 0.356 0.0913 140.88; --colors-raw-hackergreen-900-v-oklch: 0.2832 0.0615 140.23; --colors-raw-hackergreen-950-v-oklch: 0.2103 0.0343 135.82; --colors-raw-graygreen-050-v-oklch: 1 0 0; --colors-raw-graygreen-100-v-oklch: 0.96 0.01 145; --colors-raw-graygreen-150-v-oklch: 0.92 0.02 145; --colors-raw-graygreen-200-v-oklch: 0.88 0.02 145; --colors-raw-graygreen-250-v-oklch: 0.82 0.02 145; --colors-raw-graygreen-300-v-oklch: 0.76 0.02 145; --colors-raw-graygreen-350-v-oklch: 0.68 0.02 145; --colors-raw-graygreen-400-v-oklch: 0.6 0.02 145; --colors-raw-graygreen-450-v-oklch: 0.48 0.02 145; --colors-raw-graygreen-500-v-oklch: 0.36 0.03 145; --colors-raw-graygreen-550-v-oklch: 0.3 0.03 145; --colors-raw-graygreen-600-v-oklch: 0.24 0.03 145; --colors-raw-graygreen-650-v-oklch: 0.2 0.03 145; --colors-raw-graygreen-700-v-oklch: 0.16 0.04 145; --colors-raw-graygreen-750-v-oklch: 0.14 0.04 145; --colors-raw-graygreen-800-v-oklch: 0.12 0.04 145; --colors-raw-graygreen-850-v-oklch: 0.1 0.04 145; --colors-raw-graygreen-900-v-oklch: 0.08 0.05 145; --colors-raw-graygreen-950-v-oklch: 0.06 0.05 145; --colors-raw-graygreen-1000-v-oklch: 0 0 0; --colors-raw-neutral-fg-light-v-oklch: 0 0 0; --colors-raw-neutral-bg-light-v-oklch: 1 0 0; --colors-raw-neutral-fg-dark-v-oklch: 1 0 0; --colors-raw-neutral-bg-dark-v-oklch: 0 0 0; --colors-raw-base-bg1-light-v-oklch: 0.9861 0.0316 137.6; --colors-raw-base-bg2-light-v-oklch: 0.9723 0.063 138.03; --colors-raw-base-bg3-light-v-oklch: 0.945 0.125 138.96; --colors-raw-base-bg1-dark-v-oklch: 0.2103 0.0343 135.82; --colors-raw-base-bg2-dark-v-oklch: 0.2832 0.0615 140.23; --colors-raw-base-bg3-dark-v-oklch: 0.2103 0.0343 135.82; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-graygreen-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-graygreen-400-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-hackergreen-300-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-hackergreen-800-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-hackergreen-400-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-hackergreen-700-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-hackergreen-600-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-hackergreen-500-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-hackergreen-950-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-hackergreen-950-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-hackergreen-750-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-hackergreen-750-v-oklch)); --semantic-brand-accent-light: var(--brandOS-accent-lime-700); --semantic-brand-accent-dark: var(--brandOS-accent-lime-700); --semantic-brand-accent-content-light: oklch(var(--colors-raw-hackergreen-050-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-hackergreen-050-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: var(--brandOS-accent-electric-600); --semantic-status-info-dark: var(--brandOS-accent-electric-500); --semantic-status-info-content-light: var(--brandOS-accent-electric-050); --semantic-status-info-content-dark: var(--brandOS-accent-electric-950); --semantic-status-success-light: var(--brandOS-accent-matrix-600); --semantic-status-success-dark: var(--brandOS-accent-matrix-500); --semantic-status-success-content-light: var(--brandOS-accent-matrix-050); --semantic-status-success-content-dark: var(--brandOS-accent-matrix-950); --semantic-status-warning-light: var(--brandOS-accent-cyan-600); --semantic-status-warning-dark: var(--brandOS-accent-cyan-500); --semantic-status-warning-content-light: var(--brandOS-accent-cyan-050); --semantic-status-warning-content-dark: var(--brandOS-accent-cyan-950); --semantic-status-error-light: var(--brandOS-accent-magenta-600); --semantic-status-error-dark: var(--brandOS-accent-magenta-500); --semantic-status-error-content-light: var(--brandOS-accent-magenta-050); --semantic-status-error-content-dark: var(--brandOS-accent-magenta-950); } [data-brand='hackerman'] { --colors-raw-hackergreen-050-hex: #f1ffeb; --colors-raw-hackergreen-100-hex: #e2ffd8; --colors-raw-hackergreen-150-hex: #d2ffc4; --colors-raw-hackergreen-200-hex: #c2ffb0; --colors-raw-hackergreen-250-hex: #b0ff9b; --colors-raw-hackergreen-300-hex: #9dff87; --colors-raw-hackergreen-350-hex: #88ff71; --colors-raw-hackergreen-400-hex: #6fff59; --colors-raw-hackergreen-450-hex: #4eff3c; --colors-raw-hackergreen-500-hex: #00ff00; --colors-raw-hackergreen-550-hex: #17e20f; --colors-raw-hackergreen-600-hex: #1fc716; --colors-raw-hackergreen-650-hex: #23ab19; --colors-raw-hackergreen-700-hex: #24911a; --colors-raw-hackergreen-750-hex: #23771a; --colors-raw-hackergreen-800-hex: #215f18; --colors-raw-hackergreen-850-hex: #1d4716; --colors-raw-hackergreen-900-hex: #173112; --colors-raw-hackergreen-950-hex: #111c0c; --colors-raw-graygreen-050-hex: #ffffff; --colors-raw-graygreen-100-hex: #eef4ee; --colors-raw-graygreen-150-hex: #dde8dd; --colors-raw-graygreen-200-hex: #d0dbd0; --colors-raw-graygreen-250-hex: #bcc8bc; --colors-raw-graygreen-300-hex: #aab5a9; --colors-raw-graygreen-350-hex: #919c91; --colors-raw-graygreen-400-hex: #798479; --colors-raw-graygreen-450-hex: #576157; --colors-raw-graygreen-500-hex: #334133; --colors-raw-graygreen-550-hex: #243225; --colors-raw-graygreen-600-hex: #162316; --colors-raw-graygreen-650-hex: #0d1a0d; --colors-raw-graygreen-700-hex: #031203; --colors-raw-graygreen-750-hex: #010d02; --colors-raw-graygreen-800-hex: #000900; --colors-raw-graygreen-850-hex: #000500; --colors-raw-graygreen-900-hex: #000300; --colors-raw-graygreen-950-hex: #000200; --colors-raw-graygreen-1000-hex: #000000; } /* DaisyUI overlay for Hackerman. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. Semantic layer is * the single source of truth; no raw refs leak into the DaisyUI surface. */ [data-brand='hackerman'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='hackerman'][data-theme='light'] { color-scheme: light; } [data-brand='hackerman'][data-theme='dark'] { color-scheme: dark; } /* * Hackerman Brand – MUI Color Mappings * * Maps MUI palette CSS variables to Hackerman brand tokens. * Uses neon/cyberpunk accent colors: matrix (green), electric (purple), * magenta, cyan — following hackerman/daisyui.css pattern. */ /* ─── Light Mode ─── */ [data-brand='hackerman'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-primary-950); /* Secondary */ --mui-palette-secondary-main: var(--brandOS-primary-750); --mui-palette-secondary-light: var(--brandOS-primary-500); --mui-palette-secondary-dark: var(--brandOS-primary-900); --mui-palette-secondary-contrastText: var(--brandOS-primary-050); /* Error (Magenta) */ --mui-palette-error-main: var(--brandOS-accent-magenta-600); --mui-palette-error-light: var(--brandOS-accent-magenta-400); --mui-palette-error-dark: var(--brandOS-accent-magenta-800); --mui-palette-error-contrastText: var(--brandOS-accent-magenta-050); /* Warning (Cyan) */ --mui-palette-warning-main: var(--brandOS-accent-cyan-600); --mui-palette-warning-light: var(--brandOS-accent-cyan-400); --mui-palette-warning-dark: var(--brandOS-accent-cyan-800); --mui-palette-warning-contrastText: var(--brandOS-accent-cyan-050); /* Info (Electric) */ --mui-palette-info-main: var(--brandOS-accent-electric-600); --mui-palette-info-light: var(--brandOS-accent-electric-400); --mui-palette-info-dark: var(--brandOS-accent-electric-800); --mui-palette-info-contrastText: var(--brandOS-accent-electric-050); /* Success (Matrix) */ --mui-palette-success-main: var(--brandOS-accent-matrix-600); --mui-palette-success-light: var(--brandOS-accent-matrix-400); --mui-palette-success-dark: var(--brandOS-accent-matrix-800); --mui-palette-success-contrastText: var(--brandOS-accent-matrix-050); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* ─── Dark Mode ─── */ [data-brand='hackerman'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-primary-950); /* Secondary */ --mui-palette-secondary-main: var(--brandOS-primary-500); --mui-palette-secondary-light: var(--brandOS-primary-400); --mui-palette-secondary-dark: var(--brandOS-primary-700); --mui-palette-secondary-contrastText: var(--brandOS-primary-050); /* Error (Magenta) */ --mui-palette-error-main: var(--brandOS-accent-magenta-500); --mui-palette-error-light: var(--brandOS-accent-magenta-300); --mui-palette-error-dark: var(--brandOS-accent-magenta-700); --mui-palette-error-contrastText: var(--brandOS-accent-magenta-950); /* Warning (Cyan) */ --mui-palette-warning-main: var(--brandOS-accent-cyan-500); --mui-palette-warning-light: var(--brandOS-accent-cyan-300); --mui-palette-warning-dark: var(--brandOS-accent-cyan-700); --mui-palette-warning-contrastText: var(--brandOS-accent-cyan-950); /* Info (Electric) */ --mui-palette-info-main: var(--brandOS-accent-electric-500); --mui-palette-info-light: var(--brandOS-accent-electric-300); --mui-palette-info-dark: var(--brandOS-accent-electric-700); --mui-palette-info-contrastText: var(--brandOS-accent-electric-950); /* Success (Matrix) */ --mui-palette-success-main: var(--brandOS-accent-matrix-500); --mui-palette-success-light: var(--brandOS-accent-matrix-300); --mui-palette-success-dark: var(--brandOS-accent-matrix-700); --mui-palette-success-contrastText: var(--brandOS-accent-matrix-950); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Hackerman semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). The browser selects * the correct value based on the active color-scheme, which daisyui.css sets * per [data-theme='light|dark'] block. */ [data-brand='hackerman'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces — Hackerman runs all tiles as dark green with neon * green foreground, so on-accent tokens resolve to the brand primary * instead of white. Keeps contrast without leaking a white literal. */ --semantic-on-accent: var(--brandOS-primary-400); --semantic-on-accent-muted: oklch(from var(--brandOS-primary-400) l c h / 0.85); --semantic-on-accent-subtle: oklch(from var(--brandOS-primary-400) l c h / 0.7); --semantic-on-accent-shine: oklch(from var(--brandOS-primary-400) l c h / 0.12); /* Tile hover darken — subtle black wash works on both themes. */ --semantic-tile-dim: oklch(0 0 0 / 0.15); } [data-brand='hackerman'][data-theme='light'] { color-scheme: light; } [data-brand='hackerman'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='hackerman'] { /* Brand */ --brandOS-brand: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-400)); /* Text */ --brandOS-text-primary: light-dark(var(--brandOS-gray-900), var(--brandOS-primary-300)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-600), var(--brandOS-primary-400)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-400)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-950)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-950), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-700), var(--brandOS-accent-electric-600)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-800), var(--brandOS-accent-electric-500)); /* Background */ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-950)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-950) l c h / 0.5), oklch(from var(--brandOS-gray-950) l c h / 0.8)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-dark-v-oklch)), oklch(var(--colors-raw-neutral-fg-light-v-oklch))); /* Border - visible green borders in both light and dark modes */ --brandOS-border-subtle: light-dark(var(--brandOS-gray-200), var(--brandOS-primary-800)); --brandOS-border-default: light-dark(var(--brandOS-primary-300), var(--brandOS-primary-700)); --brandOS-border-strong: light-dark(var(--brandOS-primary-400), var(--brandOS-primary-600)); --brandOS-border-focus: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /* Interactive */ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-300)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); /* Status */ --brandOS-status-success: light-dark(var(--brandOS-accent-matrix-600), var(--brandOS-accent-matrix-500)); --brandOS-status-warning: light-dark(var(--brandOS-accent-cyan-600), var(--brandOS-accent-cyan-500)); --brandOS-status-error: light-dark(var(--brandOS-accent-magenta-600), var(--brandOS-accent-magenta-500)); --brandOS-status-info: light-dark(var(--brandOS-accent-electric-600), var(--brandOS-accent-electric-500)); } [data-brand='hackerman'] { /* Color Palette - Primary - Neon Green */ --brandOS-primary-050: oklch(var(--colors-raw-hackergreen-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-hackergreen-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-hackergreen-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-hackergreen-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-hackergreen-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-hackergreen-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-hackergreen-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-hackergreen-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-hackergreen-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-hackergreen-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-hackergreen-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-hackergreen-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-hackergreen-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-hackergreen-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-hackergreen-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-hackergreen-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-hackergreen-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-hackergreen-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-hackergreen-950-v-oklch)); /* Color Palette - gray with subtle green tint */ --brandOS-gray-050: oklch(var(--colors-raw-graygreen-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-graygreen-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-graygreen-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-graygreen-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-graygreen-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-graygreen-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-graygreen-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-graygreen-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-graygreen-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-graygreen-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-graygreen-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-graygreen-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-graygreen-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-graygreen-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-graygreen-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-graygreen-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-graygreen-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-graygreen-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-graygreen-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-graygreen-1000-v-oklch)); /* Typography - More monospace feel */ --brandOS-font-heading-display: var(--brandOS-font-red-hat); --brandOS-font-body-display: var(--brandOS-font-jetbrains); } [data-brand='liquid'] { --colors-raw-liquidblue-050-v-oklch: 0.977 0.018 263; --colors-raw-liquidblue-100-v-oklch: 0.94 0.035 263; --colors-raw-liquidblue-150-v-oklch: 0.902 0.055 263.5; --colors-raw-liquidblue-200-v-oklch: 0.862 0.078 264; --colors-raw-liquidblue-250-v-oklch: 0.795 0.108 264.5; --colors-raw-liquidblue-300-v-oklch: 0.7242 0.1374 264.83; --colors-raw-liquidblue-350-v-oklch: 0.64 0.184 264; --colors-raw-liquidblue-400-v-oklch: 0.562 0.232 263.04; --colors-raw-liquidblue-450-v-oklch: 0.5206 0.2128 263.04; --colors-raw-liquidblue-500-v-oklch: 0.4792 0.1936 263.03; --colors-raw-liquidblue-550-v-oklch: 0.4359 0.1733 263.03; --colors-raw-liquidblue-600-v-oklch: 0.3927 0.153 263.02; --colors-raw-liquidblue-650-v-oklch: 0.355 0.137 263.02; --colors-raw-liquidblue-700-v-oklch: 0.318 0.121 263.02; --colors-raw-liquidblue-750-v-oklch: 0.281 0.103 263.02; --colors-raw-liquidblue-800-v-oklch: 0.244 0.084 263.02; --colors-raw-liquidblue-850-v-oklch: 0.207 0.064 263.02; --colors-raw-liquidblue-900-v-oklch: 0.17 0.043 263.02; --colors-raw-liquidblue-950-v-oklch: 0.12 0.026 263.02; --colors-raw-liquidcyan-050-v-oklch: 0.977 0.023 230; --colors-raw-liquidcyan-100-v-oklch: 0.946 0.045 232; --colors-raw-liquidcyan-150-v-oklch: 0.914 0.066 233; --colors-raw-liquidcyan-200-v-oklch: 0.881 0.087 234; --colors-raw-liquidcyan-250-v-oklch: 0.845 0.108 234.5; --colors-raw-liquidcyan-300-v-oklch: 0.809 0.128 235; --colors-raw-liquidcyan-350-v-oklch: 0.78 0.14 235.5; --colors-raw-liquidcyan-400-v-oklch: 0.755 0.148 235.6; --colors-raw-liquidcyan-450-v-oklch: 0.742 0.152 235.7; --colors-raw-liquidcyan-500-v-oklch: 0.7308 0.1567 235.75; --colors-raw-liquidcyan-550-v-oklch: 0.669 0.143 235.75; --colors-raw-liquidcyan-600-v-oklch: 0.608 0.132 235.75; --colors-raw-liquidcyan-650-v-oklch: 0.547 0.115 235.75; --colors-raw-liquidcyan-700-v-oklch: 0.486 0.097 235.75; --colors-raw-liquidcyan-750-v-oklch: 0.425 0.078 235.75; --colors-raw-liquidcyan-800-v-oklch: 0.364 0.06 235.75; --colors-raw-liquidcyan-850-v-oklch: 0.303 0.043 235.75; --colors-raw-liquidcyan-900-v-oklch: 0.242 0.028 235.75; --colors-raw-liquidcyan-950-v-oklch: 0.18 0.016 235.75; --colors-raw-liquidred-050-v-oklch: 0.97 0.03 20; --colors-raw-liquidred-100-v-oklch: 0.928 0.054 20; --colors-raw-liquidred-150-v-oklch: 0.882 0.078 20.2; --colors-raw-liquidred-200-v-oklch: 0.831 0.101 20.4; --colors-raw-liquidred-250-v-oklch: 0.7512 0.1267 20.5; --colors-raw-liquidred-300-v-oklch: 0.704 0.166 22; --colors-raw-liquidred-350-v-oklch: 0.6535 0.2027 24.72; --colors-raw-liquidred-400-v-oklch: 0.62 0.22 25.8; --colors-raw-liquidred-450-v-oklch: 0.5857 0.2385 26.69; --colors-raw-liquidred-500-v-oklch: 0.545 0.223 28; --colors-raw-liquidred-550-v-oklch: 0.5033 0.2065 29.23; --colors-raw-liquidred-600-v-oklch: 0.458 0.185 29.23; --colors-raw-liquidred-650-v-oklch: 0.4019 0.1649 29.23; --colors-raw-liquidred-700-v-oklch: 0.356 0.142 29.23; --colors-raw-liquidred-750-v-oklch: 0.31 0.119 29.23; --colors-raw-liquidred-800-v-oklch: 0.264 0.095 29.23; --colors-raw-liquidred-850-v-oklch: 0.218 0.07 29.23; --colors-raw-liquidred-900-v-oklch: 0.172 0.047 29.23; --colors-raw-liquidred-950-v-oklch: 0.126 0.026 29.23; --colors-raw-liquidgray-050-v-oklch: 0.9791 0 89.88; --colors-raw-liquidgray-100-v-oklch: 0.9335 0.0017 247.84; --colors-raw-liquidgray-150-v-oklch: 0.899 0.0015 247.84; --colors-raw-liquidgray-200-v-oklch: 0.8297 0 89.88; --colors-raw-liquidgray-250-v-oklch: 0.775 0.003 252.89; --colors-raw-liquidgray-300-v-oklch: 0.72 0.005 252.89; --colors-raw-liquidgray-350-v-oklch: 0.665 0.007 252.89; --colors-raw-liquidgray-400-v-oklch: 0.61 0.009 252.89; --colors-raw-liquidgray-450-v-oklch: 0.56 0.01 252.89; --colors-raw-liquidgray-500-v-oklch: 0.508 0.0113 252.89; --colors-raw-liquidgray-550-v-oklch: 0.464 0.01 252.89; --colors-raw-liquidgray-600-v-oklch: 0.42 0.009 252.89; --colors-raw-liquidgray-650-v-oklch: 0.376 0.008 252.89; --colors-raw-liquidgray-700-v-oklch: 0.332 0.007 252.89; --colors-raw-liquidgray-750-v-oklch: 0.288 0.006 252.89; --colors-raw-liquidgray-800-v-oklch: 0.244 0.005 252.89; --colors-raw-liquidgray-850-v-oklch: 0.2 0.004 252.89; --colors-raw-liquidgray-900-v-oklch: 0.156 0.003 252.89; --colors-raw-liquidgray-950-v-oklch: 0.112 0.002 252.89; --colors-raw-liquidgray-1000-v-oklch: 0 0 0; --colors-raw-neutral-fg-light-v-oklch: 0 0 0; --colors-raw-neutral-bg-light-v-oklch: 0.9791 0 89.88; --colors-raw-neutral-fg-dark-v-oklch: 0.9791 0 89.88; --colors-raw-neutral-bg-dark-v-oklch: 0 0 0; --colors-raw-base-bg1-light-v-oklch: 0.9791 0 89.88; --colors-raw-base-bg2-light-v-oklch: 0.9335 0.0017 247.84; --colors-raw-base-bg3-light-v-oklch: 0.8297 0 89.88; --colors-raw-base-bg1-dark-v-oklch: 0.112 0.002 252.89; --colors-raw-base-bg2-dark-v-oklch: 0.156 0.003 252.89; --colors-raw-base-bg3-dark-v-oklch: 0 0 0; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-liquidgray-500-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-liquidgray-250-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-liquidgray-100-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-liquidgray-800-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-liquidgray-200-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-liquidgray-700-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-liquidblue-500-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-liquidblue-400-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-liquidblue-700-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-liquidblue-500-v-oklch)); --semantic-brand-accent-light: oklch(var(--colors-raw-liquidcyan-600-v-oklch)); --semantic-brand-accent-dark: oklch(var(--colors-raw-liquidcyan-500-v-oklch)); --semantic-brand-accent-content-light: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-liquidgray-1000-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: oklch(var(--colors-raw-liquidcyan-600-v-oklch)); --semantic-status-info-dark: oklch(var(--colors-raw-liquidcyan-500-v-oklch)); --semantic-status-info-content-light: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --semantic-status-info-content-dark: oklch(var(--colors-raw-liquidgray-1000-v-oklch)); --semantic-status-success-light: var(--brandOS-accent-lime-600); --semantic-status-success-dark: var(--brandOS-accent-lime-500); --semantic-status-success-content-light: var(--brandOS-accent-lime-050); --semantic-status-success-content-dark: var(--brandOS-accent-lime-950); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: oklch(var(--colors-raw-liquidred-550-v-oklch)); --semantic-status-error-dark: oklch(var(--colors-raw-liquidred-350-v-oklch)); --semantic-status-error-content-light: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --semantic-status-error-content-dark: oklch(var(--colors-raw-liquidgray-050-v-oklch)); } [data-brand='liquid'] { --colors-raw-liquidblue-050-hex: #f1f8ff; --colors-raw-liquidblue-100-hex: #dfecff; --colors-raw-liquidblue-150-hex: #ccdfff; --colors-raw-liquidblue-200-hex: #b8d2ff; --colors-raw-liquidblue-250-hex: #99bbff; --colors-raw-liquidblue-300-hex: #7ba3fc; --colors-raw-liquidblue-350-hex: #5185fa; --colors-raw-liquidblue-400-hex: #2365fa; --colors-raw-liquidblue-450-hex: #1f5be1; --colors-raw-liquidblue-500-hex: #1c51c8; --colors-raw-liquidblue-550-hex: #1847af; --colors-raw-liquidblue-600-hex: #153d96; --colors-raw-liquidblue-650-hex: #113482; --colors-raw-liquidblue-700-hex: #0e2c6f; --colors-raw-liquidblue-750-hex: #0b245b; --colors-raw-liquidblue-800-hex: #091d47; --colors-raw-liquidblue-850-hex: #071634; --colors-raw-liquidblue-900-hex: #060f22; --colors-raw-liquidblue-950-hex: #02050f; --colors-raw-liquidcyan-050-hex: #e9fbff; --colors-raw-liquidcyan-100-hex: #d0f3ff; --colors-raw-liquidcyan-150-hex: #b7ebff; --colors-raw-liquidcyan-200-hex: #9ee2ff; --colors-raw-liquidcyan-250-hex: #81d8ff; --colors-raw-liquidcyan-300-hex: #62cdff; --colors-raw-liquidcyan-350-hex: #4ac4ff; --colors-raw-liquidcyan-400-hex: #32bdff; --colors-raw-liquidcyan-450-hex: #22b8fd; --colors-raw-liquidcyan-500-hex: #00b5fc; --colors-raw-liquidcyan-550-hex: #03a1e0; --colors-raw-liquidcyan-600-hex: #008dc6; --colors-raw-liquidcyan-650-hex: #097aaa; --colors-raw-liquidcyan-700-hex: #14678e; --colors-raw-liquidcyan-750-hex: #195473; --colors-raw-liquidcyan-800-hex: #1a4359; --colors-raw-liquidcyan-850-hex: #173241; --colors-raw-liquidcyan-900-hex: #12222b; --colors-raw-liquidcyan-950-hex: #0b1318; --colors-raw-liquidred-050-hex: #ffeeed; --colors-raw-liquidred-100-hex: #ffdad8; --colors-raw-liquidred-150-hex: #ffc4c3; --colors-raw-liquidred-200-hex: #ffadac; --colors-raw-liquidred-250-hex: #f48c8c; --colors-raw-liquidred-300-hex: #f66f70; --colors-raw-liquidred-350-hex: #f34d4d; --colors-raw-liquidred-400-hex: #ee3438; --colors-raw-liquidred-450-hex: #e8001c; --colors-raw-liquidred-500-hex: #d3000e; --colors-raw-liquidred-550-hex: #be0000; --colors-raw-liquidred-600-hex: #a60603; --colors-raw-liquidred-650-hex: #8c0000; --colors-raw-liquidred-700-hex: #750503; --colors-raw-liquidred-750-hex: #5f0804; --colors-raw-liquidred-800-hex: #490905; --colors-raw-liquidred-850-hex: #340905; --colors-raw-liquidred-900-hex: #210604; --colors-raw-liquidred-950-hex: #0f0403; --colors-raw-liquidgray-050-hex: #f8f8f8; --colors-raw-liquidgray-100-hex: #e8e9ea; --colors-raw-liquidgray-150-hex: #dddede; --colors-raw-liquidgray-200-hex: #c7c7c7; --colors-raw-liquidgray-250-hex: #b4b6b8; --colors-raw-liquidgray-300-hex: #a2a5a8; --colors-raw-liquidgray-350-hex: #919498; --colors-raw-liquidgray-400-hex: #7f8489; --colors-raw-liquidgray-450-hex: #70757a; --colors-raw-liquidgray-500-hex: #61666c; --colors-raw-liquidgray-550-hex: #555a5f; --colors-raw-liquidgray-600-hex: #4a4d52; --colors-raw-liquidgray-650-hex: #3e4246; --colors-raw-liquidgray-700-hex: #333639; --colors-raw-liquidgray-750-hex: #292b2e; --colors-raw-liquidgray-800-hex: #1f2023; --colors-raw-liquidgray-850-hex: #151618; --colors-raw-liquidgray-900-hex: #0b0c0e; --colors-raw-liquidgray-950-hex: #040505; --colors-raw-liquidgray-1000-hex: #000000; } /* DaisyUI overlay for Liquid. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. */ [data-brand='liquid'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='liquid'][data-theme='light'] { color-scheme: light; } [data-brand='liquid'][data-theme='dark'] { color-scheme: dark; } /* * Liquid Brand - MUI Color Mappings * * Maps MUI palette CSS variables to Liquid brand tokens. */ /* Light Mode */ [data-brand='liquid'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-liquidcyan-600-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-liquidcyan-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-liquidcyan-800-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-050); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-liquidred-550-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-liquidred-350-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-liquidred-700-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-liquidcyan-600-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-liquidcyan-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-liquidcyan-800-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-050); /* Success */ --mui-palette-success-main: var(--brandOS-accent-lime-600); --mui-palette-success-light: var(--brandOS-accent-lime-400); --mui-palette-success-dark: var(--brandOS-accent-lime-800); --mui-palette-success-contrastText: var(--brandOS-accent-lime-050); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Dark Mode */ [data-brand='liquid'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-liquidcyan-500-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-liquidcyan-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-liquidcyan-700-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-liquidred-350-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-liquidred-250-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-liquidred-550-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-liquidcyan-500-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-liquidcyan-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-liquidcyan-700-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-1000); /* Success */ --mui-palette-success-main: var(--brandOS-accent-lime-500); --mui-palette-success-light: var(--brandOS-accent-lime-300); --mui-palette-success-dark: var(--brandOS-accent-lime-700); --mui-palette-success-contrastText: var(--brandOS-accent-lime-950); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Liquid semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). */ [data-brand='liquid'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces */ --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.7); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); /* Tile hover darken */ --semantic-tile-dim: oklch(0 0 0 / 0.08); } [data-brand='liquid'][data-theme='light'] { color-scheme: light; } [data-brand='liquid'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='liquid'] { /* Brand */ --brandOS-brand: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /* Text */ --brandOS-text-primary: light-dark(var(--brandOS-gray-1000), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-250)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-400), var(--brandOS-gray-300)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-300)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-250)); /* Background */ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-950)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-900)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-850)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-1000) l c h / 0.5), oklch(from var(--brandOS-gray-1000) l c h / 0.76)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-dark-v-oklch)), oklch(var(--colors-raw-neutral-fg-light-v-oklch))); /* Border */ --brandOS-border-subtle: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-border-default: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); --brandOS-border-strong: light-dark(var(--brandOS-gray-300), var(--brandOS-gray-600)); --brandOS-border-focus: light-dark(var(--brandOS-primary-400), var(--brandOS-primary-300)); /* Interactive */ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-300)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); /* Status */ --brandOS-status-success: light-dark(var(--brandOS-accent-lime-600), var(--brandOS-accent-lime-500)); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(oklch(var(--colors-raw-liquidred-550-v-oklch)), oklch(var(--colors-raw-liquidred-350-v-oklch))); --brandOS-status-info: light-dark(oklch(var(--colors-raw-liquidcyan-600-v-oklch)), oklch(var(--colors-raw-liquidcyan-500-v-oklch))); } [data-brand='liquid'] { /* Color Palette - Primary */ --brandOS-primary-050: oklch(var(--colors-raw-liquidblue-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-liquidblue-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-liquidblue-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-liquidblue-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-liquidblue-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-liquidblue-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-liquidblue-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-liquidblue-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-liquidblue-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-liquidblue-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-liquidblue-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-liquidblue-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-liquidblue-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-liquidblue-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-liquidblue-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-liquidblue-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-liquidblue-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-liquidblue-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-liquidblue-950-v-oklch)); /* Color Palette - Gray */ --brandOS-gray-050: oklch(var(--colors-raw-liquidgray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-liquidgray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-liquidgray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-liquidgray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-liquidgray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-liquidgray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-liquidgray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-liquidgray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-liquidgray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-liquidgray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-liquidgray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-liquidgray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-liquidgray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-liquidgray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-liquidgray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-liquidgray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-liquidgray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-liquidgray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-liquidgray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-liquidgray-1000-v-oklch)); /* Typography */ --brandOS-font-heading-display: var(--brandOS-font-red-hat); --brandOS-font-body-display: var(--brandOS-font-inter); } [data-brand='mcit'] { --colors-raw-mcitnavy-050-v-oklch: 0.99 0.004 270; --colors-raw-mcitnavy-100-v-oklch: 0.97 0.01 270; --colors-raw-mcitnavy-150-v-oklch: 0.945 0.02 270; --colors-raw-mcitnavy-200-v-oklch: 0.82 0.065 270; --colors-raw-mcitnavy-250-v-oklch: 0.74 0.08 270; --colors-raw-mcitnavy-300-v-oklch: 0.65 0.095 270; --colors-raw-mcitnavy-350-v-oklch: 0.56 0.105 270; --colors-raw-mcitnavy-400-v-oklch: 0.46 0.11 270; --colors-raw-mcitnavy-450-v-oklch: 0.36 0.1 270; --colors-raw-mcitnavy-500-v-oklch: 0.28 0.085 270; --colors-raw-mcitnavy-550-v-oklch: 0.245 0.078 270; --colors-raw-mcitnavy-600-v-oklch: 0.215 0.07 270; --colors-raw-mcitnavy-650-v-oklch: 0.2 0.065 270; --colors-raw-mcitnavy-700-v-oklch: 0.185 0.06 270; --colors-raw-mcitnavy-750-v-oklch: 0.165 0.052 270; --colors-raw-mcitnavy-800-v-oklch: 0.145 0.044 270; --colors-raw-mcitnavy-850-v-oklch: 0.125 0.036 270; --colors-raw-mcitnavy-900-v-oklch: 0.105 0.028 270; --colors-raw-mcitnavy-950-v-oklch: 0.085 0.02 270; --colors-raw-mcitemerald-050-v-oklch: 0.97 0.022 148; --colors-raw-mcitemerald-100-v-oklch: 0.94 0.04 148; --colors-raw-mcitemerald-150-v-oklch: 0.91 0.06 148; --colors-raw-mcitemerald-200-v-oklch: 0.88 0.08 148; --colors-raw-mcitemerald-250-v-oklch: 0.85 0.1 148; --colors-raw-mcitemerald-300-v-oklch: 0.82 0.125 148; --colors-raw-mcitemerald-350-v-oklch: 0.8 0.15 148; --colors-raw-mcitemerald-400-v-oklch: 0.785 0.17 148; --colors-raw-mcitemerald-450-v-oklch: 0.77 0.185 148; --colors-raw-mcitemerald-500-v-oklch: 0.745 0.19 148; --colors-raw-mcitemerald-550-v-oklch: 0.69 0.175 148; --colors-raw-mcitemerald-600-v-oklch: 0.625 0.155 148; --colors-raw-mcitemerald-650-v-oklch: 0.56 0.135 148; --colors-raw-mcitemerald-700-v-oklch: 0.495 0.115 148; --colors-raw-mcitemerald-750-v-oklch: 0.43 0.095 148; --colors-raw-mcitemerald-800-v-oklch: 0.365 0.075 148; --colors-raw-mcitemerald-850-v-oklch: 0.3 0.055 148; --colors-raw-mcitemerald-900-v-oklch: 0.235 0.035 148; --colors-raw-mcitemerald-950-v-oklch: 0.17 0.02 148; --colors-raw-mcitred-050-v-oklch: 0.97 0.028 27; --colors-raw-mcitred-100-v-oklch: 0.93 0.052 27; --colors-raw-mcitred-150-v-oklch: 0.885 0.078 27; --colors-raw-mcitred-200-v-oklch: 0.835 0.105 27; --colors-raw-mcitred-250-v-oklch: 0.77 0.135 27; --colors-raw-mcitred-300-v-oklch: 0.725 0.17 27; --colors-raw-mcitred-350-v-oklch: 0.685 0.205 27; --colors-raw-mcitred-400-v-oklch: 0.66 0.225 27; --colors-raw-mcitred-450-v-oklch: 0.635 0.235 27; --colors-raw-mcitred-500-v-oklch: 0.595 0.225 27; --colors-raw-mcitred-550-v-oklch: 0.545 0.21 27; --colors-raw-mcitred-600-v-oklch: 0.495 0.188 27; --colors-raw-mcitred-650-v-oklch: 0.435 0.165 27; --colors-raw-mcitred-700-v-oklch: 0.38 0.142 27; --colors-raw-mcitred-750-v-oklch: 0.325 0.118 27; --colors-raw-mcitred-800-v-oklch: 0.275 0.094 27; --colors-raw-mcitred-850-v-oklch: 0.225 0.07 27; --colors-raw-mcitred-900-v-oklch: 0.175 0.046 27; --colors-raw-mcitred-950-v-oklch: 0.13 0.026 27; --colors-raw-mcitgray-050-v-oklch: 0.985 0.005 270; --colors-raw-mcitgray-100-v-oklch: 0.965 0.008 270; --colors-raw-mcitgray-150-v-oklch: 0.94 0.012 270; --colors-raw-mcitgray-200-v-oklch: 0.91 0.016 270; --colors-raw-mcitgray-250-v-oklch: 0.85 0.018 270; --colors-raw-mcitgray-300-v-oklch: 0.79 0.02 270; --colors-raw-mcitgray-350-v-oklch: 0.73 0.022 270; --colors-raw-mcitgray-400-v-oklch: 0.67 0.024 270; --colors-raw-mcitgray-450-v-oklch: 0.6 0.025 270; --colors-raw-mcitgray-500-v-oklch: 0.54 0.026 270; --colors-raw-mcitgray-550-v-oklch: 0.48 0.025 270; --colors-raw-mcitgray-600-v-oklch: 0.42 0.024 270; --colors-raw-mcitgray-650-v-oklch: 0.37 0.024 270; --colors-raw-mcitgray-700-v-oklch: 0.32 0.026 270; --colors-raw-mcitgray-750-v-oklch: 0.275 0.028 270; --colors-raw-mcitgray-800-v-oklch: 0.235 0.03 270; --colors-raw-mcitgray-850-v-oklch: 0.2 0.032 270; --colors-raw-mcitgray-900-v-oklch: 0.165 0.03 270; --colors-raw-mcitgray-950-v-oklch: 0.135 0.026 270; --colors-raw-mcitgray-1000-v-oklch: 0.1 0.02 270; --colors-raw-neutral-fg-light-v-oklch: 0.145 0.044 270; --colors-raw-neutral-bg-light-v-oklch: 0.99 0.004 270; --colors-raw-neutral-fg-dark-v-oklch: 0.99 0.004 270; --colors-raw-neutral-bg-dark-v-oklch: 0.125 0.036 270; --colors-raw-base-bg1-light-v-oklch: 0.99 0.004 270; --colors-raw-base-bg1-dark-v-oklch: 0.125 0.036 270; --colors-raw-base-bg2-light-v-oklch: 0.97 0.01 270; --colors-raw-base-bg2-dark-v-oklch: 0.125 0.036 270; --colors-raw-base-bg3-light-v-oklch: 0.945 0.02 270; --colors-raw-base-bg3-dark-v-oklch: 0.105 0.028 270; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-mcitgray-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-mcitgray-300-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-mcitgray-150-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-mcitnavy-900-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-mcitgray-250-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-mcitnavy-950-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-mcitnavy-700-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-mcitnavy-250-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-mcitnavy-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-mcitnavy-900-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-mcitnavy-500-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-mcitnavy-250-v-oklch)); --semantic-brand-accent-light: oklch(var(--colors-raw-mcitemerald-600-v-oklch)); --semantic-brand-accent-dark: oklch(var(--colors-raw-mcitemerald-500-v-oklch)); --semantic-brand-accent-content-light: oklch(var(--colors-raw-mcitgray-050-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-mcitgray-1000-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: oklch(var(--colors-raw-mcitnavy-500-v-oklch)); --semantic-status-info-dark: oklch(var(--colors-raw-mcitnavy-250-v-oklch)); --semantic-status-info-content-light: oklch(var(--colors-raw-mcitgray-050-v-oklch)); --semantic-status-info-content-dark: oklch(var(--colors-raw-mcitgray-1000-v-oklch)); --semantic-status-success-light: oklch(var(--colors-raw-mcitemerald-600-v-oklch)); --semantic-status-success-dark: oklch(var(--colors-raw-mcitemerald-500-v-oklch)); --semantic-status-success-content-light: oklch(var(--colors-raw-mcitemerald-050-v-oklch)); --semantic-status-success-content-dark: oklch(var(--colors-raw-mcitemerald-950-v-oklch)); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: oklch(var(--colors-raw-mcitred-500-v-oklch)); --semantic-status-error-dark: oklch(var(--colors-raw-mcitred-350-v-oklch)); --semantic-status-error-content-light: oklch(var(--colors-raw-mcitgray-050-v-oklch)); --semantic-status-error-content-dark: oklch(var(--colors-raw-mcitgray-050-v-oklch)); } [data-brand='mcit'] { --colors-raw-mcitnavy-050-hex: #fbfcff; --colors-raw-mcitnavy-100-hex: #f2f5fc; --colors-raw-mcitnavy-150-hex: #e7edfb; --colors-raw-mcitnavy-200-hex: #b3c3ef; --colors-raw-mcitnavy-250-hex: #97a9de; --colors-raw-mcitnavy-300-hex: #788cca; --colors-raw-mcitnavy-350-hex: #5d70b2; --colors-raw-mcitnavy-400-hex: #405395; --colors-raw-mcitnavy-450-hex: #293871; --colors-raw-mcitnavy-500-hex: #192452; --colors-raw-mcitnavy-550-hex: #131c45; --colors-raw-mcitnavy-600-hex: #0d1539; --colors-raw-mcitnavy-650-hex: #0b1233; --colors-raw-mcitnavy-700-hex: #090f2d; --colors-raw-mcitnavy-750-hex: #060c24; --colors-raw-mcitnavy-800-hex: #04081c; --colors-raw-mcitnavy-850-hex: #030514; --colors-raw-mcitnavy-900-hex: #02030d; --colors-raw-mcitnavy-950-hex: #010206; --colors-raw-mcitemerald-050-hex: #ecfaed; --colors-raw-mcitemerald-100-hex: #daf3dc; --colors-raw-mcitemerald-150-hex: #c7edcb; --colors-raw-mcitemerald-200-hex: #b4e7ba; --colors-raw-mcitemerald-250-hex: #a1e0a9; --colors-raw-mcitemerald-300-hex: #89da96; --colors-raw-mcitemerald-350-hex: #73d885; --colors-raw-mcitemerald-400-hex: #60d677; --colors-raw-mcitemerald-450-hex: #4dd36c; --colors-raw-mcitemerald-500-hex: #3dcb62; --colors-raw-mcitemerald-550-hex: #37b758; --colors-raw-mcitemerald-600-hex: #33a04e; --colors-raw-mcitemerald-650-hex: #2e8944; --colors-raw-mcitemerald-700-hex: #2a733a; --colors-raw-mcitemerald-750-hex: #245e30; --colors-raw-mcitemerald-800-hex: #1f4927; --colors-raw-mcitemerald-850-hex: #19351e; --colors-raw-mcitemerald-900-hex: #122315; --colors-raw-mcitemerald-950-hex: #09120a; --colors-raw-mcitred-050-hex: #ffefeb; --colors-raw-mcitred-100-hex: #ffdbd5; --colors-raw-mcitred-150-hex: #ffc6be; --colors-raw-mcitred-200-hex: #ffaea4; --colors-raw-mcitred-250-hex: #ff9085; --colors-raw-mcitred-300-hex: #ff756a; --colors-raw-mcitred-350-hex: #ff584f; --colors-raw-mcitred-400-hex: #fe423d; --colors-raw-mcitred-450-hex: #f92e2f; --colors-raw-mcitred-500-hex: #e62428; --colors-raw-mcitred-550-hex: #ce1a1f; --colors-raw-mcitred-600-hex: #b4191c; --colors-raw-mcitred-650-hex: #971316; --colors-raw-mcitred-700-hex: #7d1011; --colors-raw-mcitred-750-hex: #630e0e; --colors-raw-mcitred-800-hex: #4c0d0b; --colors-raw-mcitred-850-hex: #360a08; --colors-raw-mcitred-900-hex: #210706; --colors-raw-mcitred-950-hex: #100403; --colors-raw-mcitgray-050-hex: #f9fafe; --colors-raw-mcitgray-100-hex: #f1f3f9; --colors-raw-mcitgray-150-hex: #e8ebf4; --colors-raw-mcitgray-200-hex: #dde1ec; --colors-raw-mcitgray-250-hex: #c9cdda; --colors-raw-mcitgray-300-hex: #b5bac8; --colors-raw-mcitgray-350-hex: #a2a7b6; --colors-raw-mcitgray-400-hex: #8f95a5; --colors-raw-mcitgray-450-hex: #7a8090; --colors-raw-mcitgray-500-hex: #696e7e; --colors-raw-mcitgray-550-hex: #585d6c; --colors-raw-mcitgray-600-hex: #484d5b; --colors-raw-mcitgray-650-hex: #3b3f4d; --colors-raw-mcitgray-700-hex: #2e3240; --colors-raw-mcitgray-750-hex: #222736; --colors-raw-mcitgray-800-hex: #181d2c; --colors-raw-mcitgray-850-hex: #101525; --colors-raw-mcitgray-900-hex: #090d1b; --colors-raw-mcitgray-950-hex: #050813; --colors-raw-mcitgray-1000-hex: #020309; } /* DaisyUI overlay for mcit. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. */ [data-brand='mcit'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='mcit'][data-theme='light'] { color-scheme: light; } [data-brand='mcit'][data-theme='dark'] { color-scheme: dark; } /* * MCIT Brand - MUI Color Mappings */ /* Light Mode */ [data-brand='mcit'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-700); --mui-palette-primary-light: var(--brandOS-primary-400); --mui-palette-primary-dark: var(--brandOS-primary-900); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-mcitemerald-600-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-mcitemerald-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-mcitemerald-800-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-050); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-mcitred-500-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-mcitred-350-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-mcitred-700-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); /* Info */ --mui-palette-info-main: var(--brandOS-primary-500); --mui-palette-info-light: var(--brandOS-primary-300); --mui-palette-info-dark: var(--brandOS-primary-800); --mui-palette-info-contrastText: var(--brandOS-gray-050); /* Success */ --mui-palette-success-main: oklch(var(--colors-raw-mcitemerald-600-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-mcitemerald-400-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-mcitemerald-800-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-mcitemerald-050-v-oklch)); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Dark Mode */ [data-brand='mcit'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-mcitemerald-500-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-mcitemerald-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-mcitemerald-700-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-mcitred-350-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-mcitred-250-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-mcitred-550-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); /* Info */ --mui-palette-info-main: var(--brandOS-primary-400); --mui-palette-info-light: var(--brandOS-primary-300); --mui-palette-info-dark: var(--brandOS-primary-700); --mui-palette-info-contrastText: var(--brandOS-gray-1000); /* Success */ --mui-palette-success-main: oklch(var(--colors-raw-mcitemerald-500-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-mcitemerald-300-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-mcitemerald-700-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-mcitemerald-950-v-oklch)); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* MCIT semantic color aliases. * Collapses the -light / -dark pairs into a single --semantic-* var via light-dark(). */ /* mcit semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). */ [data-brand='mcit'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces */ --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.7); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); /* Tile hover darken */ --semantic-tile-dim: oklch(0 0 0 / 0.08); } [data-brand='mcit'][data-theme='light'] { color-scheme: light; } [data-brand='mcit'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='mcit'] { /* Brand */ --brandOS-brand: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-400)); /* Text */ --brandOS-text-primary: light-dark(var(--brandOS-gray-900), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-600), var(--brandOS-gray-250)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-300)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-300)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-800), var(--brandOS-primary-250)); /* Background */ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-150), var(--brandOS-gray-850)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-950)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-850)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-1000) l c h / 0.5), oklch(from var(--brandOS-gray-1000) l c h / 0.76)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-light-v-oklch)), oklch(var(--colors-raw-neutral-fg-dark-v-oklch))); /* Border */ --brandOS-border-subtle: light-dark(var(--brandOS-gray-150), oklch(var(--colors-raw-mcitnavy-900-v-oklch))); --brandOS-border-default: light-dark(var(--brandOS-gray-250), oklch(var(--colors-raw-mcitnavy-950-v-oklch))); --brandOS-border-strong: light-dark(var(--brandOS-gray-350), oklch(var(--colors-raw-mcitnavy-950-v-oklch))); --brandOS-border-focus: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-300)); /* Interactive */ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-250)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-800), var(--brandOS-primary-200)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-150), var(--brandOS-primary-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-primary-700)); /* Status */ --brandOS-status-success: light-dark(oklch(var(--colors-raw-mcitemerald-600-v-oklch)), oklch(var(--colors-raw-mcitemerald-500-v-oklch))); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(oklch(var(--colors-raw-mcitred-500-v-oklch)), oklch(var(--colors-raw-mcitred-350-v-oklch))); --brandOS-status-info: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); } [data-brand='mcit'] { /* Color Palette - Primary */ --brandOS-primary-050: oklch(var(--colors-raw-mcitnavy-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-mcitnavy-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-mcitnavy-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-mcitnavy-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-mcitnavy-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-mcitnavy-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-mcitnavy-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-mcitnavy-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-mcitnavy-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-mcitnavy-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-mcitnavy-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-mcitnavy-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-mcitnavy-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-mcitnavy-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-mcitnavy-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-mcitnavy-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-mcitnavy-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-mcitnavy-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-mcitnavy-950-v-oklch)); /* Color Palette - Gray */ --brandOS-gray-050: oklch(var(--colors-raw-mcitgray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-mcitgray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-mcitgray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-mcitgray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-mcitgray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-mcitgray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-mcitgray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-mcitgray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-mcitgray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-mcitgray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-mcitgray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-mcitgray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-mcitgray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-mcitgray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-mcitgray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-mcitgray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-mcitgray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-mcitgray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-mcitgray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-mcitgray-1000-v-oklch)); /* Typography */ --brandOS-font-quicksand: 'Quicksand', 'Inter Variable', system-ui, sans-serif; --brandOS-font-opensans: 'Open Sans', 'Inter Variable', 'Inter', system-ui, sans-serif; --brandOS-font-roboto: 'Roboto', system-ui, sans-serif; --brandOS-font-roboto-slab: 'Roboto Slab', Georgia, serif; --brandOS-font-heading-display: var(--brandOS-font-quicksand); --brandOS-font-body-display: var(--brandOS-font-opensans); } [data-brand='microinno'] { --colors-raw-microinnogreen-050-v-oklch: 0.97 0.025 130; --colors-raw-microinnogreen-100-v-oklch: 0.94 0.045 130; --colors-raw-microinnogreen-150-v-oklch: 0.91 0.07 130; --colors-raw-microinnogreen-200-v-oklch: 0.88 0.09 130; --colors-raw-microinnogreen-250-v-oklch: 0.85 0.115 130; --colors-raw-microinnogreen-300-v-oklch: 0.83 0.14 130; --colors-raw-microinnogreen-350-v-oklch: 0.805 0.16 130; --colors-raw-microinnogreen-400-v-oklch: 0.785 0.18 130; --colors-raw-microinnogreen-450-v-oklch: 0.765 0.19 130; --colors-raw-microinnogreen-500-v-oklch: 0.745 0.2 130; --colors-raw-microinnogreen-550-v-oklch: 0.685 0.18 130; --colors-raw-microinnogreen-600-v-oklch: 0.62 0.16 130; --colors-raw-microinnogreen-650-v-oklch: 0.555 0.14 130; --colors-raw-microinnogreen-700-v-oklch: 0.49 0.12 130; --colors-raw-microinnogreen-750-v-oklch: 0.425 0.1 130; --colors-raw-microinnogreen-800-v-oklch: 0.36 0.08 130; --colors-raw-microinnogreen-850-v-oklch: 0.295 0.06 130; --colors-raw-microinnogreen-900-v-oklch: 0.23 0.04 130; --colors-raw-microinnogreen-950-v-oklch: 0.165 0.022 130; --colors-raw-microinnoblue-050-v-oklch: 0.97 0.018 245; --colors-raw-microinnoblue-100-v-oklch: 0.93 0.035 245; --colors-raw-microinnoblue-150-v-oklch: 0.89 0.05 245; --colors-raw-microinnoblue-200-v-oklch: 0.84 0.065 245; --colors-raw-microinnoblue-250-v-oklch: 0.78 0.085 245; --colors-raw-microinnoblue-300-v-oklch: 0.72 0.105 245; --colors-raw-microinnoblue-350-v-oklch: 0.685 0.125 245; --colors-raw-microinnoblue-400-v-oklch: 0.665 0.14 245; --colors-raw-microinnoblue-450-v-oklch: 0.655 0.152 245; --colors-raw-microinnoblue-500-v-oklch: 0.65 0.158 245; --colors-raw-microinnoblue-550-v-oklch: 0.585 0.145 245; --colors-raw-microinnoblue-600-v-oklch: 0.52 0.13 245; --colors-raw-microinnoblue-650-v-oklch: 0.46 0.115 245; --colors-raw-microinnoblue-700-v-oklch: 0.4 0.1 245; --colors-raw-microinnoblue-750-v-oklch: 0.34 0.085 245; --colors-raw-microinnoblue-800-v-oklch: 0.28 0.07 245; --colors-raw-microinnoblue-850-v-oklch: 0.22 0.052 245; --colors-raw-microinnoblue-900-v-oklch: 0.17 0.035 245; --colors-raw-microinnoblue-950-v-oklch: 0.13 0.022 245; --colors-raw-microinnored-050-v-oklch: 0.97 0.028 27; --colors-raw-microinnored-100-v-oklch: 0.93 0.052 27; --colors-raw-microinnored-150-v-oklch: 0.885 0.078 27; --colors-raw-microinnored-200-v-oklch: 0.835 0.105 27; --colors-raw-microinnored-250-v-oklch: 0.77 0.135 27; --colors-raw-microinnored-300-v-oklch: 0.725 0.17 27; --colors-raw-microinnored-350-v-oklch: 0.685 0.205 27; --colors-raw-microinnored-400-v-oklch: 0.66 0.225 27; --colors-raw-microinnored-450-v-oklch: 0.635 0.235 27; --colors-raw-microinnored-500-v-oklch: 0.595 0.225 27; --colors-raw-microinnored-550-v-oklch: 0.545 0.21 27; --colors-raw-microinnored-600-v-oklch: 0.495 0.188 27; --colors-raw-microinnored-650-v-oklch: 0.435 0.165 27; --colors-raw-microinnored-700-v-oklch: 0.38 0.142 27; --colors-raw-microinnored-750-v-oklch: 0.325 0.118 27; --colors-raw-microinnored-800-v-oklch: 0.275 0.094 27; --colors-raw-microinnored-850-v-oklch: 0.225 0.07 27; --colors-raw-microinnored-900-v-oklch: 0.175 0.046 27; --colors-raw-microinnored-950-v-oklch: 0.13 0.026 27; --colors-raw-microinnogray-050-v-oklch: 1 0 0; --colors-raw-microinnogray-100-v-oklch: 0.95 0 0; --colors-raw-microinnogray-150-v-oklch: 0.92 0 0; --colors-raw-microinnogray-200-v-oklch: 0.88 0 0; --colors-raw-microinnogray-250-v-oklch: 0.83 0 0; --colors-raw-microinnogray-300-v-oklch: 0.78 0 0; --colors-raw-microinnogray-350-v-oklch: 0.74 0 0; --colors-raw-microinnogray-400-v-oklch: 0.66 0 0; --colors-raw-microinnogray-450-v-oklch: 0.56 0 0; --colors-raw-microinnogray-500-v-oklch: 0.46 0 0; --colors-raw-microinnogray-550-v-oklch: 0.4 0 0; --colors-raw-microinnogray-600-v-oklch: 0.36 0.008 130; --colors-raw-microinnogray-650-v-oklch: 0.31 0.012 130; --colors-raw-microinnogray-700-v-oklch: 0.275 0.014 130; --colors-raw-microinnogray-750-v-oklch: 0.245 0.016 130; --colors-raw-microinnogray-800-v-oklch: 0.215 0.018 130; --colors-raw-microinnogray-850-v-oklch: 0.19 0.02 130; --colors-raw-microinnogray-900-v-oklch: 0.155 0.018 130; --colors-raw-microinnogray-950-v-oklch: 0.115 0.014 130; --colors-raw-microinnogray-1000-v-oklch: 0.06 0.008 130; --colors-raw-neutral-fg-light-v-oklch: 0.183 0 0; --colors-raw-neutral-bg-light-v-oklch: 1 0 0; --colors-raw-neutral-fg-dark-v-oklch: 1 0 0; --colors-raw-neutral-bg-dark-v-oklch: 0.155 0.018 130; --colors-raw-base-bg1-light-v-oklch: 1 0 0; --colors-raw-base-bg1-dark-v-oklch: 0.155 0.018 130; --colors-raw-base-bg2-light-v-oklch: 0.95 0 0; --colors-raw-base-bg2-dark-v-oklch: 0.215 0.018 130; --colors-raw-base-bg3-light-v-oklch: 0.92 0 0; --colors-raw-base-bg3-dark-v-oklch: 0.115 0.014 130; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-microinnogray-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-microinnogray-350-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-microinnogray-200-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-microinnogray-450-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-microinnogray-300-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-microinnogray-350-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-microinnogreen-600-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-microinnogreen-500-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-microinnogray-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-microinnogray-1000-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-microinnogreen-700-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-microinnogreen-400-v-oklch)); --semantic-brand-accent-light: oklch(var(--colors-raw-microinnoblue-600-v-oklch)); --semantic-brand-accent-dark: oklch(var(--colors-raw-microinnoblue-500-v-oklch)); --semantic-brand-accent-content-light: oklch(var(--colors-raw-microinnogray-050-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-microinnogray-1000-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: oklch(var(--colors-raw-microinnoblue-600-v-oklch)); --semantic-status-info-dark: oklch(var(--colors-raw-microinnoblue-500-v-oklch)); --semantic-status-info-content-light: oklch(var(--colors-raw-microinnogray-050-v-oklch)); --semantic-status-info-content-dark: oklch(var(--colors-raw-microinnogray-1000-v-oklch)); --semantic-status-success-light: oklch(var(--colors-raw-microinnogreen-600-v-oklch)); --semantic-status-success-dark: oklch(var(--colors-raw-microinnogreen-500-v-oklch)); --semantic-status-success-content-light: oklch(var(--colors-raw-microinnogreen-050-v-oklch)); --semantic-status-success-content-dark: oklch(var(--colors-raw-microinnogreen-950-v-oklch)); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: oklch(var(--colors-raw-microinnored-500-v-oklch)); --semantic-status-error-dark: oklch(var(--colors-raw-microinnored-350-v-oklch)); --semantic-status-error-content-light: oklch(var(--colors-raw-microinnogray-050-v-oklch)); --semantic-status-error-content-dark: oklch(var(--colors-raw-microinnogray-050-v-oklch)); } [data-brand='microinno'] { --colors-raw-microinnogreen-050-hex: #f0f9e7; --colors-raw-microinnogreen-100-hex: #e1f2d2; --colors-raw-microinnogreen-150-hex: #d2ebba; --colors-raw-microinnogreen-200-hex: #c4e4a5; --colors-raw-microinnogreen-250-hex: #b5dd8c; --colors-raw-microinnogreen-300-hex: #a9d974; --colors-raw-microinnogreen-350-hex: #9dd35d; --colors-raw-microinnogreen-400-hex: #92cf42; --colors-raw-microinnogreen-450-hex: #89c92d; --colors-raw-microinnogreen-500-hex: #81c303; --colors-raw-microinnogreen-550-hex: #73ae11; --colors-raw-microinnogreen-600-hex: #659815; --colors-raw-microinnogreen-650-hex: #578216; --colors-raw-microinnogreen-700-hex: #496d16; --colors-raw-microinnogreen-750-hex: #3c5915; --colors-raw-microinnogreen-800-hex: #2f4513; --colors-raw-microinnogreen-850-hex: #22320f; --colors-raw-microinnogreen-900-hex: #17210c; --colors-raw-microinnogreen-950-hex: #0b1006; --colors-raw-microinnoblue-050-hex: #ecf7ff; --colors-raw-microinnoblue-100-hex: #d5ebfe; --colors-raw-microinnoblue-150-hex: #c0dffa; --colors-raw-microinnoblue-200-hex: #a8d0f3; --colors-raw-microinnoblue-250-hex: #89beeb; --colors-raw-microinnoblue-300-hex: #69abe2; --colors-raw-microinnoblue-350-hex: #4fa1e2; --colors-raw-microinnoblue-400-hex: #399be3; --colors-raw-microinnoblue-450-hex: #2598e6; --colors-raw-microinnoblue-500-hex: #1696e8; --colors-raw-microinnoblue-550-hex: #0882cb; --colors-raw-microinnoblue-600-hex: #036eae; --colors-raw-microinnoblue-650-hex: #025c93; --colors-raw-microinnoblue-700-hex: #014b79; --colors-raw-microinnoblue-750-hex: #013b60; --colors-raw-microinnoblue-800-hex: #002b49; --colors-raw-microinnoblue-850-hex: #021c31; --colors-raw-microinnoblue-900-hex: #03111e; --colors-raw-microinnoblue-950-hex: #02080f; --colors-raw-microinnored-050-hex: #ffefeb; --colors-raw-microinnored-100-hex: #ffdbd5; --colors-raw-microinnored-150-hex: #ffc6be; --colors-raw-microinnored-200-hex: #ffaea4; --colors-raw-microinnored-250-hex: #ff9085; --colors-raw-microinnored-300-hex: #ff756a; --colors-raw-microinnored-350-hex: #ff584f; --colors-raw-microinnored-400-hex: #fe423d; --colors-raw-microinnored-450-hex: #f92e2f; --colors-raw-microinnored-500-hex: #e62428; --colors-raw-microinnored-550-hex: #ce1a1f; --colors-raw-microinnored-600-hex: #b4191c; --colors-raw-microinnored-650-hex: #971316; --colors-raw-microinnored-700-hex: #7d1011; --colors-raw-microinnored-750-hex: #630e0e; --colors-raw-microinnored-800-hex: #4c0d0b; --colors-raw-microinnored-850-hex: #360a08; --colors-raw-microinnored-900-hex: #210706; --colors-raw-microinnored-950-hex: #100403; --colors-raw-microinnogray-050-hex: #ffffff; --colors-raw-microinnogray-100-hex: #eeeeee; --colors-raw-microinnogray-150-hex: #e4e4e4; --colors-raw-microinnogray-200-hex: #d7d7d7; --colors-raw-microinnogray-250-hex: #c7c7c7; --colors-raw-microinnogray-300-hex: #b7b7b7; --colors-raw-microinnogray-350-hex: #ababab; --colors-raw-microinnogray-400-hex: #929292; --colors-raw-microinnogray-450-hex: #747474; --colors-raw-microinnogray-500-hex: #585858; --colors-raw-microinnogray-550-hex: #484848; --colors-raw-microinnogray-600-hex: #3c3e3a; --colors-raw-microinnogray-650-hex: #2e322b; --colors-raw-microinnogray-700-hex: #252922; --colors-raw-microinnogray-750-hex: #1e221a; --colors-raw-microinnogray-800-hex: #171b12; --colors-raw-microinnogray-850-hex: #11160c; --colors-raw-microinnogray-900-hex: #0a0e06; --colors-raw-microinnogray-950-hex: #040602; --colors-raw-microinnogray-1000-hex: #010100; } /* DaisyUI overlay for microinno. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. */ [data-brand='microinno'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='microinno'][data-theme='light'] { color-scheme: light; } [data-brand='microinno'][data-theme='dark'] { color-scheme: dark; } /* * Micro-Innovation Brand - MUI Color Mappings */ /* Light Mode */ [data-brand='microinno'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-600); --mui-palette-primary-light: var(--brandOS-primary-400); --mui-palette-primary-dark: var(--brandOS-primary-800); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-microinnoblue-600-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-microinnoblue-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-microinnoblue-800-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-050); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-microinnored-500-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-microinnored-350-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-microinnored-700-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-microinnoblue-600-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-microinnoblue-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-microinnoblue-800-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-050); /* Success */ --mui-palette-success-main: oklch(var(--colors-raw-microinnogreen-600-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-microinnogreen-400-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-microinnogreen-800-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-microinnogreen-050-v-oklch)); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Dark Mode */ [data-brand='microinno'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-gray-1000); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-microinnoblue-500-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-microinnoblue-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-microinnoblue-700-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-microinnored-350-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-microinnored-250-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-microinnored-550-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-microinnoblue-500-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-microinnoblue-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-microinnoblue-700-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-1000); /* Success */ --mui-palette-success-main: oklch(var(--colors-raw-microinnogreen-500-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-microinnogreen-300-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-microinnogreen-700-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-microinnogreen-950-v-oklch)); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Micro-Innovation semantic color aliases. * Collapses the -light / -dark pairs into a single --semantic-* var via light-dark(). */ /* microinno semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). */ [data-brand='microinno'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces */ --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.7); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); /* Tile hover darken */ --semantic-tile-dim: oklch(0 0 0 / 0.08); } [data-brand='microinno'][data-theme='light'] { color-scheme: light; } [data-brand='microinno'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='microinno'] { /* Brand */ --brandOS-brand: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-500)); /* Text */ --brandOS-text-primary: light-dark(var(--brandOS-gray-900), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-600), var(--brandOS-gray-300)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-400)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-link: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-400)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-300)); /* Background */ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-850)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-750)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-950)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-750)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-1000) l c h / 0.5), oklch(from var(--brandOS-gray-1000) l c h / 0.76)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-light-v-oklch)), oklch(var(--colors-raw-neutral-fg-dark-v-oklch))); /* Border */ --brandOS-border-subtle: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-500)); --brandOS-border-default: light-dark(var(--brandOS-gray-300), var(--brandOS-gray-400)); --brandOS-border-strong: light-dark(var(--brandOS-gray-400), var(--brandOS-gray-300)); --brandOS-border-focus: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /* Interactive */ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-500)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-700), var(--brandOS-primary-400)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-150), var(--brandOS-gray-750)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); /* Status */ --brandOS-status-success: light-dark(oklch(var(--colors-raw-microinnogreen-600-v-oklch)), oklch(var(--colors-raw-microinnogreen-500-v-oklch))); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(oklch(var(--colors-raw-microinnored-500-v-oklch)), oklch(var(--colors-raw-microinnored-350-v-oklch))); --brandOS-status-info: light-dark(oklch(var(--colors-raw-microinnoblue-600-v-oklch)), oklch(var(--colors-raw-microinnoblue-500-v-oklch))); } [data-brand='microinno'] { /* Color Palette - Primary */ --brandOS-primary-050: oklch(var(--colors-raw-microinnogreen-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-microinnogreen-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-microinnogreen-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-microinnogreen-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-microinnogreen-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-microinnogreen-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-microinnogreen-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-microinnogreen-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-microinnogreen-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-microinnogreen-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-microinnogreen-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-microinnogreen-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-microinnogreen-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-microinnogreen-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-microinnogreen-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-microinnogreen-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-microinnogreen-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-microinnogreen-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-microinnogreen-950-v-oklch)); /* Color Palette - Gray */ --brandOS-gray-050: oklch(var(--colors-raw-microinnogray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-microinnogray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-microinnogray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-microinnogray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-microinnogray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-microinnogray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-microinnogray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-microinnogray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-microinnogray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-microinnogray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-microinnogray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-microinnogray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-microinnogray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-microinnogray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-microinnogray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-microinnogray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-microinnogray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-microinnogray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-microinnogray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-microinnogray-1000-v-oklch)); /* Typography */ --brandOS-font-play: 'Play', 'Red Hat Display', system-ui, sans-serif; --brandOS-font-inter: 'Inter Variable', 'Inter', system-ui, sans-serif; --brandOS-font-heading-display: var(--brandOS-font-play); --brandOS-font-body-display: var(--brandOS-font-inter); } [data-brand='controlbus'] { --colors-raw-controlblue-050-v-oklch: 0.97 0.02 260; --colors-raw-controlblue-100-v-oklch: 0.94 0.04 260; --colors-raw-controlblue-150-v-oklch: 0.9 0.06 260; --colors-raw-controlblue-200-v-oklch: 0.86 0.08 260; --colors-raw-controlblue-250-v-oklch: 0.82 0.1 260; --colors-raw-controlblue-300-v-oklch: 0.78 0.12 260; --colors-raw-controlblue-350-v-oklch: 0.74 0.14 260; --colors-raw-controlblue-400-v-oklch: 0.68 0.17 260; --colors-raw-controlblue-450-v-oklch: 0.645 0.195 260; --colors-raw-controlblue-500-v-oklch: 0.61 0.22 260; --colors-raw-controlblue-550-v-oklch: 0.555 0.205 260; --colors-raw-controlblue-600-v-oklch: 0.5 0.19 260; --colors-raw-controlblue-650-v-oklch: 0.45 0.17 260; --colors-raw-controlblue-700-v-oklch: 0.4 0.15 260; --colors-raw-controlblue-750-v-oklch: 0.35 0.125 260; --colors-raw-controlblue-800-v-oklch: 0.3 0.1 260; --colors-raw-controlblue-850-v-oklch: 0.25 0.075 260; --colors-raw-controlblue-900-v-oklch: 0.2 0.05 260; --colors-raw-controlblue-950-v-oklch: 0.15 0.03 260; --colors-raw-controlsky-050-v-oklch: 0.97 0.02 230; --colors-raw-controlsky-100-v-oklch: 0.94 0.04 230; --colors-raw-controlsky-150-v-oklch: 0.91 0.055 230; --colors-raw-controlsky-200-v-oklch: 0.88 0.07 230; --colors-raw-controlsky-250-v-oklch: 0.85 0.09 230; --colors-raw-controlsky-300-v-oklch: 0.82 0.11 230; --colors-raw-controlsky-350-v-oklch: 0.795 0.13 230; --colors-raw-controlsky-400-v-oklch: 0.77 0.145 230; --colors-raw-controlsky-450-v-oklch: 0.745 0.155 230; --colors-raw-controlsky-500-v-oklch: 0.72 0.16 230; --colors-raw-controlsky-550-v-oklch: 0.665 0.15 230; --colors-raw-controlsky-600-v-oklch: 0.61 0.14 230; --colors-raw-controlsky-650-v-oklch: 0.55 0.125 230; --colors-raw-controlsky-700-v-oklch: 0.49 0.11 230; --colors-raw-controlsky-750-v-oklch: 0.43 0.09 230; --colors-raw-controlsky-800-v-oklch: 0.37 0.07 230; --colors-raw-controlsky-850-v-oklch: 0.31 0.05 230; --colors-raw-controlsky-900-v-oklch: 0.25 0.035 230; --colors-raw-controlsky-950-v-oklch: 0.18 0.018 230; --colors-raw-controlred-050-v-oklch: 0.97 0.03 25; --colors-raw-controlred-100-v-oklch: 0.928 0.054 25; --colors-raw-controlred-150-v-oklch: 0.882 0.078 25; --colors-raw-controlred-200-v-oklch: 0.831 0.101 25; --colors-raw-controlred-250-v-oklch: 0.751 0.127 25; --colors-raw-controlred-300-v-oklch: 0.704 0.166 25; --colors-raw-controlred-350-v-oklch: 0.654 0.203 25; --colors-raw-controlred-400-v-oklch: 0.62 0.22 25; --colors-raw-controlred-450-v-oklch: 0.586 0.239 25; --colors-raw-controlred-500-v-oklch: 0.545 0.223 25; --colors-raw-controlred-550-v-oklch: 0.503 0.207 25; --colors-raw-controlred-600-v-oklch: 0.458 0.185 25; --colors-raw-controlred-650-v-oklch: 0.402 0.165 25; --colors-raw-controlred-700-v-oklch: 0.356 0.142 25; --colors-raw-controlred-750-v-oklch: 0.31 0.119 25; --colors-raw-controlred-800-v-oklch: 0.264 0.095 25; --colors-raw-controlred-850-v-oklch: 0.218 0.07 25; --colors-raw-controlred-900-v-oklch: 0.172 0.047 25; --colors-raw-controlred-950-v-oklch: 0.126 0.026 25; --colors-raw-controlgray-050-v-oklch: 0.985 0.005 260; --colors-raw-controlgray-100-v-oklch: 0.96 0.012 260; --colors-raw-controlgray-150-v-oklch: 0.94 0.016 260; --colors-raw-controlgray-200-v-oklch: 0.92 0.02 260; --colors-raw-controlgray-250-v-oklch: 0.86 0.018 260; --colors-raw-controlgray-300-v-oklch: 0.8 0.016 260; --colors-raw-controlgray-350-v-oklch: 0.74 0.014 260; --colors-raw-controlgray-400-v-oklch: 0.68 0.012 260; --colors-raw-controlgray-450-v-oklch: 0.61 0.01 260; --colors-raw-controlgray-500-v-oklch: 0.54 0.008 260; --colors-raw-controlgray-550-v-oklch: 0.48 0.012 260; --colors-raw-controlgray-600-v-oklch: 0.42 0.016 260; --colors-raw-controlgray-650-v-oklch: 0.39 0.018 260; --colors-raw-controlgray-700-v-oklch: 0.37 0.022 260; --colors-raw-controlgray-750-v-oklch: 0.32 0.024 260; --colors-raw-controlgray-800-v-oklch: 0.28 0.026 260; --colors-raw-controlgray-850-v-oklch: 0.245 0.028 260; --colors-raw-controlgray-900-v-oklch: 0.21 0.03 260; --colors-raw-controlgray-950-v-oklch: 0.17 0.028 260; --colors-raw-controlgray-1000-v-oklch: 0.12 0.022 260; --colors-raw-neutral-fg-light-v-oklch: 0.18 0 0; --colors-raw-neutral-bg-light-v-oklch: 0.985 0.005 260; --colors-raw-neutral-fg-dark-v-oklch: 0.96 0.012 230; --colors-raw-neutral-bg-dark-v-oklch: 0.21 0.03 260; --colors-raw-base-bg1-light-v-oklch: 0.985 0.005 260; --colors-raw-base-bg1-dark-v-oklch: 0.21 0.03 260; --colors-raw-base-bg2-light-v-oklch: 0.94 0.016 260; --colors-raw-base-bg2-dark-v-oklch: 0.255 0.032 260; --colors-raw-base-bg3-light-v-oklch: 0.92 0.02 260; --colors-raw-base-bg3-dark-v-oklch: 0.17 0.028 260; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-controlgray-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-controlgray-300-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-controlgray-150-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-controlgray-800-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-controlgray-200-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-controlgray-700-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-controlblue-500-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-controlblue-400-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-controlgray-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-controlgray-050-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-controlblue-700-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-controlblue-500-v-oklch)); --semantic-brand-accent-light: oklch(var(--colors-raw-controlsky-600-v-oklch)); --semantic-brand-accent-dark: oklch(var(--colors-raw-controlsky-400-v-oklch)); --semantic-brand-accent-content-light: oklch(var(--colors-raw-controlgray-1000-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-controlgray-1000-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: oklch(var(--colors-raw-controlblue-500-v-oklch)); --semantic-status-info-dark: oklch(var(--colors-raw-controlblue-400-v-oklch)); --semantic-status-info-content-light: oklch(var(--colors-raw-controlgray-050-v-oklch)); --semantic-status-info-content-dark: oklch(var(--colors-raw-controlgray-1000-v-oklch)); --semantic-status-success-light: oklch(var(--colors-raw-controlsky-600-v-oklch)); --semantic-status-success-dark: oklch(var(--colors-raw-controlsky-400-v-oklch)); --semantic-status-success-content-light: oklch(var(--colors-raw-controlsky-050-v-oklch)); --semantic-status-success-content-dark: oklch(var(--colors-raw-controlsky-950-v-oklch)); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: oklch(var(--colors-raw-controlred-550-v-oklch)); --semantic-status-error-dark: oklch(var(--colors-raw-controlred-350-v-oklch)); --semantic-status-error-content-light: oklch(var(--colors-raw-controlgray-050-v-oklch)); --semantic-status-error-content-dark: oklch(var(--colors-raw-controlgray-050-v-oklch)); } [data-brand='controlbus'] { --colors-raw-controlblue-050-hex: #edf6ff; --colors-raw-controlblue-100-hex: #dcecff; --colors-raw-controlblue-150-hex: #c7dfff; --colors-raw-controlblue-200-hex: #b3d3ff; --colors-raw-controlblue-250-hex: #9ec5ff; --colors-raw-controlblue-300-hex: #8ab8ff; --colors-raw-controlblue-350-hex: #75abff; --colors-raw-controlblue-400-hex: #5696ff; --colors-raw-controlblue-450-hex: #3f88ff; --colors-raw-controlblue-500-hex: #237aff; --colors-raw-controlblue-550-hex: #1a6ae8; --colors-raw-controlblue-600-hex: #115bcd; --colors-raw-controlblue-650-hex: #0e4eb1; --colors-raw-controlblue-700-hex: #0b4196; --colors-raw-controlblue-750-hex: #0b367a; --colors-raw-controlblue-800-hex: #0b2b5f; --colors-raw-controlblue-850-hex: #0a2045; --colors-raw-controlblue-900-hex: #08152c; --colors-raw-controlblue-950-hex: #050b18; --colors-raw-controlsky-050-hex: #e8f8ff; --colors-raw-controlsky-100-hex: #d1f1ff; --colors-raw-controlsky-150-hex: #bde9ff; --colors-raw-controlsky-200-hex: #a8e1fd; --colors-raw-controlsky-250-hex: #8ed9fe; --colors-raw-controlsky-300-hex: #72d1fe; --colors-raw-controlsky-350-hex: #51cbff; --colors-raw-controlsky-400-hex: #29c4fe; --colors-raw-controlsky-450-hex: #00bdfb; --colors-raw-controlsky-500-hex: #00b5f5; --colors-raw-controlsky-550-hex: #00a2dd; --colors-raw-controlsky-600-hex: #0091c6; --colors-raw-controlsky-650-hex: #007dac; --colors-raw-controlsky-700-hex: #006a92; --colors-raw-controlsky-750-hex: #005877; --colors-raw-controlsky-800-hex: #08465d; --colors-raw-controlsky-850-hex: #103545; --colors-raw-controlsky-900-hex: #0e252f; --colors-raw-controlsky-950-hex: #091318; --colors-raw-controlred-050-hex: #ffeeeb; --colors-raw-controlred-100-hex: #ffdad5; --colors-raw-controlred-150-hex: #ffc5be; --colors-raw-controlred-200-hex: #ffaea6; --colors-raw-controlred-250-hex: #f48d85; --colors-raw-controlred-300-hex: #f67069; --colors-raw-controlred-350-hex: #f34d4c; --colors-raw-controlred-400-hex: #ee343b; --colors-raw-controlred-450-hex: #e80026; --colors-raw-controlred-500-hex: #d30021; --colors-raw-controlred-550-hex: #be001b; --colors-raw-controlred-600-hex: #a60119; --colors-raw-controlred-650-hex: #8c0012; --colors-raw-controlred-700-hex: #75030f; --colors-raw-controlred-750-hex: #5f060d; --colors-raw-controlred-800-hex: #49080a; --colors-raw-controlred-850-hex: #340808; --colors-raw-controlred-900-hex: #210606; --colors-raw-controlred-950-hex: #0f0403; --colors-raw-controlgray-050-hex: #f8fafe; --colors-raw-controlgray-100-hex: #edf2fa; --colors-raw-controlgray-150-hex: #e5ecf6; --colors-raw-controlgray-200-hex: #dde5f2; --colors-raw-controlgray-250-hex: #cad1dd; --colors-raw-controlgray-300-hex: #b8bec8; --colors-raw-controlgray-350-hex: #a6abb4; --colors-raw-controlgray-400-hex: #9499a0; --colors-raw-controlgray-450-hex: #808389; --colors-raw-controlgray-500-hex: #6c6f73; --colors-raw-controlgray-550-hex: #5a5e65; --colors-raw-controlgray-600-hex: #484d56; --colors-raw-controlgray-650-hex: #3f454f; --colors-raw-controlgray-700-hex: #39404c; --colors-raw-controlgray-750-hex: #2c333f; --colors-raw-controlgray-800-hex: #212936; --colors-raw-controlgray-850-hex: #19212e; --colors-raw-controlgray-900-hex: #101826; --colors-raw-controlgray-950-hex: #080f1c; --colors-raw-controlgray-1000-hex: #03060e; --colors-raw-neutral-fg-light-hex: #121212; --colors-raw-neutral-bg-light-hex: #f8fafe; --colors-raw-neutral-fg-dark-hex: #eaf3f8; --colors-raw-neutral-bg-dark-hex: #101826; --colors-raw-base-bg1-light-hex: #f8fafe; --colors-raw-base-bg1-dark-hex: #101826; --colors-raw-base-bg2-light-hex: #e5ecf6; --colors-raw-base-bg2-dark-hex: #1a2332; --colors-raw-base-bg3-light-hex: #dde5f2; --colors-raw-base-bg3-dark-hex: #080f1c; } /* DaisyUI overlay for controlbus. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. */ [data-brand='controlbus'] { --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='controlbus'][data-theme='light'] { color-scheme: light; } [data-brand='controlbus'][data-theme='dark'] { color-scheme: dark; } /* * ControlBus Brand - MUI Color Mappings */ [data-brand='controlbus'][data-theme='light'] { --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-gray-050); --mui-palette-secondary-main: oklch(var(--colors-raw-controlsky-600-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-controlsky-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-controlsky-800-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); --mui-palette-error-main: oklch(var(--colors-raw-controlred-550-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-controlred-350-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-controlred-700-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); --mui-palette-info-main: var(--brandOS-primary-500); --mui-palette-info-light: var(--brandOS-primary-300); --mui-palette-info-dark: var(--brandOS-primary-800); --mui-palette-info-contrastText: var(--brandOS-gray-050); --mui-palette-success-main: oklch(var(--colors-raw-controlsky-600-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-controlsky-400-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-controlsky-800-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-controlsky-050-v-oklch)); --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); --mui-palette-divider: var(--brandOS-border-default); --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } [data-brand='controlbus'][data-theme='dark'] { --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-gray-050); --mui-palette-secondary-main: oklch(var(--colors-raw-controlsky-500-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-controlsky-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-controlsky-700-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); --mui-palette-error-main: oklch(var(--colors-raw-controlred-350-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-controlred-250-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-controlred-550-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); --mui-palette-info-main: var(--brandOS-primary-400); --mui-palette-info-light: var(--brandOS-primary-300); --mui-palette-info-dark: var(--brandOS-primary-700); --mui-palette-info-contrastText: var(--brandOS-gray-1000); --mui-palette-success-main: oklch(var(--colors-raw-controlsky-500-v-oklch)); --mui-palette-success-light: oklch(var(--colors-raw-controlsky-300-v-oklch)); --mui-palette-success-dark: oklch(var(--colors-raw-controlsky-700-v-oklch)); --mui-palette-success-contrastText: oklch(var(--colors-raw-controlsky-950-v-oklch)); --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); --mui-palette-divider: var(--brandOS-border-default); --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* controlbus semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). */ [data-brand='controlbus'] { --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.62); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); --semantic-tile-dim: oklch(0 0 0 / 0.08); } :root[data-brand='controlbus'] { --brandOS-brand: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-text-primary: light-dark(var(--brandOS-gray-900), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-600), var(--brandOS-gray-250)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-300)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-300)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-250)); --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-150), var(--brandOS-gray-850)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-950)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-850)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-1000) l c h / 0.5), oklch(from var(--brandOS-gray-1000) l c h / 0.76)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-light-v-oklch)), oklch(var(--colors-raw-neutral-fg-dark-v-oklch))); --brandOS-border-subtle: light-dark(var(--brandOS-gray-150), var(--brandOS-gray-800)); --brandOS-border-default: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); --brandOS-border-strong: light-dark(var(--brandOS-gray-300), var(--brandOS-gray-600)); --brandOS-border-focus: light-dark(var(--brandOS-primary-400), var(--brandOS-primary-300)); --brandOS-interactive-primary: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-300)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-150), var(--brandOS-gray-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); --brandOS-status-success: light-dark(oklch(var(--colors-raw-controlsky-600-v-oklch)), oklch(var(--colors-raw-controlsky-500-v-oklch))); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(oklch(var(--colors-raw-controlred-550-v-oklch)), oklch(var(--colors-raw-controlred-350-v-oklch))); --brandOS-status-info: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); } [data-brand='controlbus'] { --brandOS-primary-050: oklch(var(--colors-raw-controlblue-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-controlblue-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-controlblue-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-controlblue-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-controlblue-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-controlblue-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-controlblue-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-controlblue-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-controlblue-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-controlblue-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-controlblue-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-controlblue-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-controlblue-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-controlblue-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-controlblue-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-controlblue-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-controlblue-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-controlblue-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-controlblue-950-v-oklch)); --brandOS-gray-050: oklch(var(--colors-raw-controlgray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-controlgray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-controlgray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-controlgray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-controlgray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-controlgray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-controlgray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-controlgray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-controlgray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-controlgray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-controlgray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-controlgray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-controlgray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-controlgray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-controlgray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-controlgray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-controlgray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-controlgray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-controlgray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-controlgray-1000-v-oklch)); --brandOS-font-heading-display: var(--brandOS-font-red-hat); --brandOS-font-body-display: var(--brandOS-font-inter); } [data-brand='alexander'] { --colors-raw-alexanderteal-050-v-oklch: 0.97 0.015 165; --colors-raw-alexanderteal-100-v-oklch: 0.93 0.03 165; --colors-raw-alexanderteal-150-v-oklch: 0.89 0.045 165; --colors-raw-alexanderteal-200-v-oklch: 0.85 0.06 165; --colors-raw-alexanderteal-250-v-oklch: 0.78 0.075 165; --colors-raw-alexanderteal-300-v-oklch: 0.71 0.09 165; --colors-raw-alexanderteal-350-v-oklch: 0.64 0.1 165; --colors-raw-alexanderteal-400-v-oklch: 0.57 0.11 165; --colors-raw-alexanderteal-450-v-oklch: 0.495 0.105 165; --colors-raw-alexanderteal-500-v-oklch: 0.42 0.1 165; --colors-raw-alexanderteal-550-v-oklch: 0.385 0.092 165; --colors-raw-alexanderteal-600-v-oklch: 0.35 0.085 165; --colors-raw-alexanderteal-650-v-oklch: 0.315 0.077 165; --colors-raw-alexanderteal-700-v-oklch: 0.28 0.07 165; --colors-raw-alexanderteal-750-v-oklch: 0.245 0.06 165; --colors-raw-alexanderteal-800-v-oklch: 0.21 0.05 165; --colors-raw-alexanderteal-850-v-oklch: 0.18 0.04 165; --colors-raw-alexanderteal-900-v-oklch: 0.145 0.028 165; --colors-raw-alexanderteal-950-v-oklch: 0.11 0.018 165; --colors-raw-alexanderlime-050-v-oklch: 0.97 0.025 130; --colors-raw-alexanderlime-100-v-oklch: 0.94 0.045 130; --colors-raw-alexanderlime-150-v-oklch: 0.91 0.065 130; --colors-raw-alexanderlime-200-v-oklch: 0.87 0.085 130; --colors-raw-alexanderlime-250-v-oklch: 0.84 0.105 130; --colors-raw-alexanderlime-300-v-oklch: 0.81 0.13 130; --colors-raw-alexanderlime-350-v-oklch: 0.795 0.15 130; --colors-raw-alexanderlime-400-v-oklch: 0.785 0.165 130; --colors-raw-alexanderlime-450-v-oklch: 0.78 0.175 130; --colors-raw-alexanderlime-500-v-oklch: 0.78 0.18 130; --colors-raw-alexanderlime-550-v-oklch: 0.72 0.165 130; --colors-raw-alexanderlime-600-v-oklch: 0.66 0.15 130; --colors-raw-alexanderlime-650-v-oklch: 0.595 0.13 130; --colors-raw-alexanderlime-700-v-oklch: 0.53 0.115 130; --colors-raw-alexanderlime-750-v-oklch: 0.46 0.095 130; --colors-raw-alexanderlime-800-v-oklch: 0.39 0.075 130; --colors-raw-alexanderlime-850-v-oklch: 0.32 0.055 130; --colors-raw-alexanderlime-900-v-oklch: 0.25 0.035 130; --colors-raw-alexanderlime-950-v-oklch: 0.18 0.018 130; --colors-raw-alexanderred-050-v-oklch: 0.97 0.03 25; --colors-raw-alexanderred-100-v-oklch: 0.928 0.054 25; --colors-raw-alexanderred-150-v-oklch: 0.882 0.078 25; --colors-raw-alexanderred-200-v-oklch: 0.831 0.101 25; --colors-raw-alexanderred-250-v-oklch: 0.751 0.127 25; --colors-raw-alexanderred-300-v-oklch: 0.704 0.166 25; --colors-raw-alexanderred-350-v-oklch: 0.654 0.203 25; --colors-raw-alexanderred-400-v-oklch: 0.62 0.22 25; --colors-raw-alexanderred-450-v-oklch: 0.586 0.239 25; --colors-raw-alexanderred-500-v-oklch: 0.545 0.223 25; --colors-raw-alexanderred-550-v-oklch: 0.503 0.207 25; --colors-raw-alexanderred-600-v-oklch: 0.458 0.185 25; --colors-raw-alexanderred-650-v-oklch: 0.402 0.165 25; --colors-raw-alexanderred-700-v-oklch: 0.356 0.142 25; --colors-raw-alexanderred-750-v-oklch: 0.31 0.119 25; --colors-raw-alexanderred-800-v-oklch: 0.264 0.095 25; --colors-raw-alexanderred-850-v-oklch: 0.218 0.07 25; --colors-raw-alexanderred-900-v-oklch: 0.172 0.047 25; --colors-raw-alexanderred-950-v-oklch: 0.126 0.026 25; --colors-raw-alexandergray-050-v-oklch: 0.985 0.005 90; --colors-raw-alexandergray-100-v-oklch: 0.96 0.015 88; --colors-raw-alexandergray-150-v-oklch: 0.94 0.02 88; --colors-raw-alexandergray-200-v-oklch: 0.92 0.025 90; --colors-raw-alexandergray-250-v-oklch: 0.86 0.022 88; --colors-raw-alexandergray-300-v-oklch: 0.8 0.018 88; --colors-raw-alexandergray-350-v-oklch: 0.74 0.014 88; --colors-raw-alexandergray-400-v-oklch: 0.68 0.011 88; --colors-raw-alexandergray-450-v-oklch: 0.61 0.008 88; --colors-raw-alexandergray-500-v-oklch: 0.54 0.006 88; --colors-raw-alexandergray-550-v-oklch: 0.48 0.005 88; --colors-raw-alexandergray-600-v-oklch: 0.42 0.004 88; --colors-raw-alexandergray-650-v-oklch: 0.39 0.003 88; --colors-raw-alexandergray-700-v-oklch: 0.37 0.018 165; --colors-raw-alexandergray-750-v-oklch: 0.32 0.02 165; --colors-raw-alexandergray-800-v-oklch: 0.28 0.022 165; --colors-raw-alexandergray-850-v-oklch: 0.245 0.022 165; --colors-raw-alexandergray-900-v-oklch: 0.21 0.022 165; --colors-raw-alexandergray-950-v-oklch: 0.17 0.018 165; --colors-raw-alexandergray-1000-v-oklch: 0.12 0.014 165; --colors-raw-neutral-fg-light-v-oklch: 0.18 0 0; --colors-raw-neutral-bg-light-v-oklch: 0.985 0.005 90; --colors-raw-neutral-fg-dark-v-oklch: 0.96 0.012 130; --colors-raw-neutral-bg-dark-v-oklch: 0.21 0.022 165; --colors-raw-base-bg1-light-v-oklch: 0.985 0.005 90; --colors-raw-base-bg1-dark-v-oklch: 0.21 0.022 165; --colors-raw-base-bg2-light-v-oklch: 0.94 0.02 88; --colors-raw-base-bg2-dark-v-oklch: 0.255 0.024 165; --colors-raw-base-bg3-light-v-oklch: 0.92 0.025 90; --colors-raw-base-bg3-dark-v-oklch: 0.17 0.018 165; --semantic-surface-1-light: oklch(var(--colors-raw-base-bg1-light-v-oklch)); --semantic-surface-1-dark: oklch(var(--colors-raw-base-bg1-dark-v-oklch)); --semantic-surface-2-light: oklch(var(--colors-raw-base-bg2-light-v-oklch)); --semantic-surface-2-dark: oklch(var(--colors-raw-base-bg2-dark-v-oklch)); --semantic-surface-3-light: oklch(var(--colors-raw-base-bg3-light-v-oklch)); --semantic-surface-3-dark: oklch(var(--colors-raw-base-bg3-dark-v-oklch)); --semantic-content-primary-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-content-primary-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-content-muted-light: oklch(var(--colors-raw-alexandergray-600-v-oklch)); --semantic-content-muted-dark: oklch(var(--colors-raw-alexandergray-300-v-oklch)); --semantic-content-inverse-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-content-inverse-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-border-subtle-light: oklch(var(--colors-raw-alexandergray-150-v-oklch)); --semantic-border-subtle-dark: oklch(var(--colors-raw-alexandergray-800-v-oklch)); --semantic-border-default-light: oklch(var(--colors-raw-alexandergray-200-v-oklch)); --semantic-border-default-dark: oklch(var(--colors-raw-alexandergray-700-v-oklch)); --semantic-brand-primary-light: oklch(var(--colors-raw-alexanderteal-500-v-oklch)); --semantic-brand-primary-dark: oklch(var(--colors-raw-alexanderteal-400-v-oklch)); --semantic-brand-primary-content-light: oklch(var(--colors-raw-alexandergray-050-v-oklch)); --semantic-brand-primary-content-dark: oklch(var(--colors-raw-alexandergray-050-v-oklch)); --semantic-brand-secondary-light: oklch(var(--colors-raw-alexanderteal-700-v-oklch)); --semantic-brand-secondary-dark: oklch(var(--colors-raw-alexanderteal-500-v-oklch)); --semantic-brand-accent-light: oklch(var(--colors-raw-alexanderlime-600-v-oklch)); --semantic-brand-accent-dark: oklch(var(--colors-raw-alexanderlime-500-v-oklch)); --semantic-brand-accent-content-light: oklch(var(--colors-raw-alexandergray-1000-v-oklch)); --semantic-brand-accent-content-dark: oklch(var(--colors-raw-alexandergray-1000-v-oklch)); --semantic-neutral-base-light: oklch(var(--colors-raw-neutral-bg-light-v-oklch)); --semantic-neutral-base-dark: oklch(var(--colors-raw-neutral-bg-dark-v-oklch)); --semantic-neutral-content-light: oklch(var(--colors-raw-neutral-fg-light-v-oklch)); --semantic-neutral-content-dark: oklch(var(--colors-raw-neutral-fg-dark-v-oklch)); --semantic-status-info-light: oklch(var(--colors-raw-alexanderteal-500-v-oklch)); --semantic-status-info-dark: oklch(var(--colors-raw-alexanderteal-400-v-oklch)); --semantic-status-info-content-light: oklch(var(--colors-raw-alexandergray-050-v-oklch)); --semantic-status-info-content-dark: oklch(var(--colors-raw-alexandergray-1000-v-oklch)); --semantic-status-success-light: oklch(var(--colors-raw-alexanderlime-600-v-oklch)); --semantic-status-success-dark: oklch(var(--colors-raw-alexanderlime-500-v-oklch)); --semantic-status-success-content-light: oklch(var(--colors-raw-alexanderlime-050-v-oklch)); --semantic-status-success-content-dark: oklch(var(--colors-raw-alexanderlime-950-v-oklch)); --semantic-status-warning-light: var(--brandOS-accent-amber-600); --semantic-status-warning-dark: var(--brandOS-accent-amber-500); --semantic-status-warning-content-light: var(--brandOS-accent-amber-050); --semantic-status-warning-content-dark: var(--brandOS-accent-amber-950); --semantic-status-error-light: oklch(var(--colors-raw-alexanderred-550-v-oklch)); --semantic-status-error-dark: oklch(var(--colors-raw-alexanderred-350-v-oklch)); --semantic-status-error-content-light: oklch(var(--colors-raw-alexandergray-050-v-oklch)); --semantic-status-error-content-dark: oklch(var(--colors-raw-alexandergray-050-v-oklch)); } [data-brand='alexander'] { --colors-raw-alexanderteal-050-hex: #ecf9f3; --colors-raw-alexanderteal-100-hex: #d6efe3; --colors-raw-alexanderteal-150-hex: #c0e5d3; --colors-raw-alexanderteal-200-hex: #aadbc4; --colors-raw-alexanderteal-250-hex: #89c7ab; --colors-raw-alexanderteal-300-hex: #68b494; --colors-raw-alexanderteal-350-hex: #489f7d; --colors-raw-alexanderteal-400-hex: #208b67; --colors-raw-alexanderteal-450-hex: #007453; --colors-raw-alexanderteal-500-hex: #005d3f; --colors-raw-alexanderteal-550-hex: #005237; --colors-raw-alexanderteal-600-hex: #00482f; --colors-raw-alexanderteal-650-hex: #003d28; --colors-raw-alexanderteal-700-hex: #003320; --colors-raw-alexanderteal-750-hex: #002919; --colors-raw-alexanderteal-800-hex: #001f12; --colors-raw-alexanderteal-850-hex: #00170d; --colors-raw-alexanderteal-900-hex: #010e07; --colors-raw-alexanderteal-950-hex: #010603; --colors-raw-alexanderlime-050-hex: #f0f9e7; --colors-raw-alexanderlime-100-hex: #e1f2d2; --colors-raw-alexanderlime-150-hex: #d3ebbd; --colors-raw-alexanderlime-200-hex: #c2e0a5; --colors-raw-alexanderlime-250-hex: #b4d98f; --colors-raw-alexanderlime-300-hex: #a5d275; --colors-raw-alexanderlime-350-hex: #9ccf62; --colors-raw-alexanderlime-400-hex: #95cd51; --colors-raw-alexanderlime-450-hex: #91cd46; --colors-raw-alexanderlime-500-hex: #90cd40; --colors-raw-alexanderlime-550-hex: #81b83a; --colors-raw-alexanderlime-600-hex: #73a434; --colors-raw-alexanderlime-650-hex: #648e31; --colors-raw-alexanderlime-700-hex: #557829; --colors-raw-alexanderlime-750-hex: #466224; --colors-raw-alexanderlime-800-hex: #374d1f; --colors-raw-alexanderlime-850-hex: #293819; --colors-raw-alexanderlime-900-hex: #1c2513; --colors-raw-alexanderlime-950-hex: #0f130b; --colors-raw-alexanderred-050-hex: #ffeeeb; --colors-raw-alexanderred-100-hex: #ffdad5; --colors-raw-alexanderred-150-hex: #ffc5be; --colors-raw-alexanderred-200-hex: #ffaea6; --colors-raw-alexanderred-250-hex: #f48d85; --colors-raw-alexanderred-300-hex: #f67069; --colors-raw-alexanderred-350-hex: #f34d4c; --colors-raw-alexanderred-400-hex: #ee343b; --colors-raw-alexanderred-450-hex: #e80026; --colors-raw-alexanderred-500-hex: #d30021; --colors-raw-alexanderred-550-hex: #be001b; --colors-raw-alexanderred-600-hex: #a60119; --colors-raw-alexanderred-650-hex: #8c0012; --colors-raw-alexanderred-700-hex: #75030f; --colors-raw-alexanderred-750-hex: #5f060d; --colors-raw-alexanderred-800-hex: #49080a; --colors-raw-alexanderred-850-hex: #340808; --colors-raw-alexanderred-900-hex: #210606; --colors-raw-alexanderred-950-hex: #0f0403; --colors-raw-alexandergray-050-hex: #fbfaf6; --colors-raw-alexandergray-100-hex: #f6f1e7; --colors-raw-alexandergray-150-hex: #f1ebdc; --colors-raw-alexandergray-200-hex: #ebe4d2; --colors-raw-alexandergray-250-hex: #d7d0c1; --colors-raw-alexandergray-300-hex: #c2bdb1; --colors-raw-alexandergray-350-hex: #aeaaa1; --colors-raw-alexandergray-400-hex: #9b9891; --colors-raw-alexandergray-450-hex: #85837e; --colors-raw-alexandergray-500-hex: #706e6b; --colors-raw-alexandergray-550-hex: #5f5d5a; --colors-raw-alexandergray-600-hex: #4e4d4b; --colors-raw-alexandergray-650-hex: #464543; --colors-raw-alexandergray-700-hex: #37433d; --colors-raw-alexandergray-750-hex: #293630; --colors-raw-alexandergray-800-hex: #1f2c26; --colors-raw-alexandergray-850-hex: #16241e; --colors-raw-alexandergray-900-hex: #0e1c16; --colors-raw-alexandergray-950-hex: #08120d; --colors-raw-alexandergray-1000-hex: #020705; --colors-raw-neutral-fg-light-hex: #121212; --colors-raw-neutral-bg-light-hex: #fbfaf6; --colors-raw-neutral-fg-dark-hex: #eff4eb; --colors-raw-neutral-bg-dark-hex: #0e1c16; --colors-raw-base-bg1-light-hex: #fbfaf6; --colors-raw-base-bg1-dark-hex: #0e1c16; --colors-raw-base-bg2-light-hex: #f1ebdc; --colors-raw-base-bg2-dark-hex: #182720; --colors-raw-base-bg3-light-hex: #ebe4d2; --colors-raw-base-bg3-dark-hex: #08120d; } /* DaisyUI overlay for Alexander. * Maps DaisyUI's --color-* vars onto --semantic-* tokens. */ [data-brand='alexander'] { /* Brand */ --color-primary: var(--semantic-brand-primary); --color-primary-content: var(--semantic-brand-primary-content); --color-secondary: var(--semantic-brand-secondary); --color-secondary-content: var(--semantic-brand-primary-content); --color-accent: var(--semantic-brand-accent); --color-accent-content: var(--semantic-brand-accent-content); /* Base surfaces / content */ --root-bg: var(--semantic-surface-1); --color-base-100: var(--semantic-surface-1); --color-base-200: var(--semantic-surface-2); --color-base-300: var(--semantic-surface-3); --color-base-content: var(--semantic-content-primary); /* Neutral */ --color-neutral: var(--semantic-neutral-base); --color-neutral-content: var(--semantic-neutral-content); /* Status */ --color-info: var(--semantic-status-info); --color-info-content: var(--semantic-status-info-content); --color-success: var(--semantic-status-success); --color-success-content: var(--semantic-status-success-content); --color-warning: var(--semantic-status-warning); --color-warning-content: var(--semantic-status-warning-content); --color-error: var(--semantic-status-error); --color-error-content: var(--semantic-status-error-content); } [data-brand='alexander'][data-theme='light'] { color-scheme: light; } [data-brand='alexander'][data-theme='dark'] { color-scheme: dark; } /* * Alexander Brand - MUI Color Mappings * * Maps MUI palette CSS variables to Alexander brand tokens. */ /* Light Mode */ [data-brand='alexander'][data-theme='light'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-500); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-700); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-alexanderlime-600-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-alexanderlime-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-alexanderlime-800-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-050); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-alexanderred-550-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-alexanderred-350-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-alexanderred-700-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-600); --mui-palette-warning-light: var(--brandOS-accent-amber-400); --mui-palette-warning-dark: var(--brandOS-accent-amber-800); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-050); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-alexanderlime-600-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-alexanderlime-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-alexanderlime-800-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-050); /* Success */ --mui-palette-success-main: var(--brandOS-accent-lime-600); --mui-palette-success-light: var(--brandOS-accent-lime-400); --mui-palette-success-dark: var(--brandOS-accent-lime-800); --mui-palette-success-contrastText: var(--brandOS-accent-lime-050); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Dark Mode */ [data-brand='alexander'][data-theme='dark'] { /* Primary */ --mui-palette-primary-main: var(--brandOS-primary-400); --mui-palette-primary-light: var(--brandOS-primary-300); --mui-palette-primary-dark: var(--brandOS-primary-600); --mui-palette-primary-contrastText: var(--brandOS-gray-050); /* Secondary */ --mui-palette-secondary-main: oklch(var(--colors-raw-alexanderlime-500-v-oklch)); --mui-palette-secondary-light: oklch(var(--colors-raw-alexanderlime-300-v-oklch)); --mui-palette-secondary-dark: oklch(var(--colors-raw-alexanderlime-700-v-oklch)); --mui-palette-secondary-contrastText: var(--brandOS-gray-1000); /* Error */ --mui-palette-error-main: oklch(var(--colors-raw-alexanderred-350-v-oklch)); --mui-palette-error-light: oklch(var(--colors-raw-alexanderred-250-v-oklch)); --mui-palette-error-dark: oklch(var(--colors-raw-alexanderred-550-v-oklch)); --mui-palette-error-contrastText: var(--brandOS-gray-050); /* Warning */ --mui-palette-warning-main: var(--brandOS-accent-amber-500); --mui-palette-warning-light: var(--brandOS-accent-amber-300); --mui-palette-warning-dark: var(--brandOS-accent-amber-700); --mui-palette-warning-contrastText: var(--brandOS-accent-amber-950); /* Info */ --mui-palette-info-main: oklch(var(--colors-raw-alexanderlime-500-v-oklch)); --mui-palette-info-light: oklch(var(--colors-raw-alexanderlime-300-v-oklch)); --mui-palette-info-dark: oklch(var(--colors-raw-alexanderlime-700-v-oklch)); --mui-palette-info-contrastText: var(--brandOS-gray-1000); /* Success */ --mui-palette-success-main: var(--brandOS-accent-lime-500); --mui-palette-success-light: var(--brandOS-accent-lime-300); --mui-palette-success-dark: var(--brandOS-accent-lime-700); --mui-palette-success-contrastText: var(--brandOS-accent-lime-950); /* Background */ --mui-palette-background-default: var(--brandOS-background-primary); --mui-palette-background-paper: var(--brandOS-background-elevated); /* Text */ --mui-palette-text-primary: var(--brandOS-text-primary); --mui-palette-text-secondary: var(--brandOS-text-secondary); --mui-palette-text-disabled: var(--brandOS-text-tertiary); /* Divider */ --mui-palette-divider: var(--brandOS-border-default); /* Action */ --mui-palette-action-active: var(--brandOS-text-secondary); --mui-palette-action-hover: var(--brandOS-interactive-secondary); --mui-palette-action-selected: var(--brandOS-interactive-secondary-hover); --mui-palette-action-focus: var(--brandOS-border-focus); } /* Alexander semantic color aliases. * Collapses the -light / -dark pairs emitted by semantic.json into a single * --semantic-* variable per slot using CSS light-dark(). */ [data-brand='alexander'] { /* Surface */ --semantic-surface-1: light-dark(var(--semantic-surface-1-light), var(--semantic-surface-1-dark)); --semantic-surface-2: light-dark(var(--semantic-surface-2-light), var(--semantic-surface-2-dark)); --semantic-surface-3: light-dark(var(--semantic-surface-3-light), var(--semantic-surface-3-dark)); /* Content */ --semantic-content-primary: light-dark(var(--semantic-content-primary-light), var(--semantic-content-primary-dark)); --semantic-content-muted: light-dark(var(--semantic-content-muted-light), var(--semantic-content-muted-dark)); --semantic-content-inverse: light-dark(var(--semantic-content-inverse-light), var(--semantic-content-inverse-dark)); /* Border */ --semantic-border-subtle: light-dark(var(--semantic-border-subtle-light), var(--semantic-border-subtle-dark)); --semantic-border-default: light-dark(var(--semantic-border-default-light), var(--semantic-border-default-dark)); /* Brand */ --semantic-brand-primary: light-dark(var(--semantic-brand-primary-light), var(--semantic-brand-primary-dark)); --semantic-brand-primary-content: light-dark(var(--semantic-brand-primary-content-light), var(--semantic-brand-primary-content-dark)); --semantic-brand-secondary: light-dark(var(--semantic-brand-secondary-light), var(--semantic-brand-secondary-dark)); --semantic-brand-accent: light-dark(var(--semantic-brand-accent-light), var(--semantic-brand-accent-dark)); --semantic-brand-accent-content: light-dark(var(--semantic-brand-accent-content-light), var(--semantic-brand-accent-content-dark)); /* Neutral */ --semantic-neutral-base: light-dark(var(--semantic-neutral-base-light), var(--semantic-neutral-base-dark)); --semantic-neutral-content: light-dark(var(--semantic-neutral-content-light), var(--semantic-neutral-content-dark)); /* Status */ --semantic-status-info: light-dark(var(--semantic-status-info-light), var(--semantic-status-info-dark)); --semantic-status-info-content: light-dark(var(--semantic-status-info-content-light), var(--semantic-status-info-content-dark)); --semantic-status-success: light-dark(var(--semantic-status-success-light), var(--semantic-status-success-dark)); --semantic-status-success-content: light-dark(var(--semantic-status-success-content-light), var(--semantic-status-success-content-dark)); --semantic-status-warning: light-dark(var(--semantic-status-warning-light), var(--semantic-status-warning-dark)); --semantic-status-warning-content: light-dark(var(--semantic-status-warning-content-light), var(--semantic-status-warning-content-dark)); --semantic-status-error: light-dark(var(--semantic-status-error-light), var(--semantic-status-error-dark)); --semantic-status-error-content: light-dark(var(--semantic-status-error-content-light), var(--semantic-status-error-content-dark)); /* On-accent surfaces */ --semantic-on-accent: oklch(1 0 0); --semantic-on-accent-muted: oklch(1 0 0 / 0.85); --semantic-on-accent-subtle: oklch(1 0 0 / 0.7); --semantic-on-accent-shine: oklch(1 0 0 / 0.18); /* Tile hover darken */ --semantic-tile-dim: oklch(0 0 0 / 0.08); } [data-brand='alexander'][data-theme='light'] { color-scheme: light; } [data-brand='alexander'][data-theme='dark'] { color-scheme: dark; } :root[data-brand='alexander'] { /* Brand */ --brandOS-brand: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); /* Text */ --brandOS-text-primary: light-dark(var(--brandOS-gray-1000), var(--brandOS-gray-050)); --brandOS-text-secondary: light-dark(var(--brandOS-gray-500), var(--brandOS-gray-250)); --brandOS-text-tertiary: light-dark(var(--brandOS-gray-400), var(--brandOS-gray-300)); --brandOS-text-inverted: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-1000)); --brandOS-text-on-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-050)); --brandOS-text-link: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-300)); --brandOS-text-link-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-250)); /* Background */ --brandOS-background-primary: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-950)); --brandOS-background-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-900)); --brandOS-background-tertiary: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-850)); --brandOS-background-elevated: light-dark(var(--brandOS-gray-050), var(--brandOS-gray-900)); --brandOS-background-overlay: light-dark(oklch(from var(--brandOS-gray-1000) l c h / 0.5), oklch(from var(--brandOS-gray-1000) l c h / 0.76)); --brandOS-root-bg: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-100: light-dark(oklch(var(--colors-raw-base-bg1-light-v-oklch)), oklch(var(--colors-raw-base-bg1-dark-v-oklch))); --brandOS-base-200: light-dark(oklch(var(--colors-raw-base-bg2-light-v-oklch)), oklch(var(--colors-raw-base-bg2-dark-v-oklch))); --brandOS-base-300: light-dark(oklch(var(--colors-raw-base-bg3-light-v-oklch)), oklch(var(--colors-raw-base-bg3-dark-v-oklch))); --brandOS-base-content: light-dark(oklch(var(--colors-raw-neutral-fg-dark-v-oklch)), oklch(var(--colors-raw-neutral-fg-light-v-oklch))); /* Border */ --brandOS-border-subtle: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-border-default: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); --brandOS-border-strong: light-dark(var(--brandOS-gray-300), var(--brandOS-gray-600)); --brandOS-border-focus: light-dark(var(--brandOS-primary-400), var(--brandOS-primary-300)); /* Interactive */ --brandOS-interactive-primary: light-dark(var(--brandOS-primary-500), var(--brandOS-primary-400)); --brandOS-interactive-primary-hover: light-dark(var(--brandOS-primary-600), var(--brandOS-primary-300)); --brandOS-interactive-secondary: light-dark(var(--brandOS-gray-100), var(--brandOS-gray-800)); --brandOS-interactive-secondary-hover: light-dark(var(--brandOS-gray-200), var(--brandOS-gray-700)); /* Status */ --brandOS-status-success: light-dark(var(--brandOS-accent-lime-600), var(--brandOS-accent-lime-500)); --brandOS-status-warning: light-dark(var(--brandOS-accent-amber-600), var(--brandOS-accent-amber-500)); --brandOS-status-error: light-dark(oklch(var(--colors-raw-alexanderred-550-v-oklch)), oklch(var(--colors-raw-alexanderred-350-v-oklch))); --brandOS-status-info: light-dark(oklch(var(--colors-raw-alexanderlime-600-v-oklch)), oklch(var(--colors-raw-alexanderlime-500-v-oklch))); } [data-brand='alexander'] { /* Color Palette - Primary */ --brandOS-primary-050: oklch(var(--colors-raw-alexanderteal-050-v-oklch)); --brandOS-primary-100: oklch(var(--colors-raw-alexanderteal-100-v-oklch)); --brandOS-primary-150: oklch(var(--colors-raw-alexanderteal-150-v-oklch)); --brandOS-primary-200: oklch(var(--colors-raw-alexanderteal-200-v-oklch)); --brandOS-primary-250: oklch(var(--colors-raw-alexanderteal-250-v-oklch)); --brandOS-primary-300: oklch(var(--colors-raw-alexanderteal-300-v-oklch)); --brandOS-primary-350: oklch(var(--colors-raw-alexanderteal-350-v-oklch)); --brandOS-primary-400: oklch(var(--colors-raw-alexanderteal-400-v-oklch)); --brandOS-primary-450: oklch(var(--colors-raw-alexanderteal-450-v-oklch)); --brandOS-primary-500: oklch(var(--colors-raw-alexanderteal-500-v-oklch)); --brandOS-primary-550: oklch(var(--colors-raw-alexanderteal-550-v-oklch)); --brandOS-primary-600: oklch(var(--colors-raw-alexanderteal-600-v-oklch)); --brandOS-primary-650: oklch(var(--colors-raw-alexanderteal-650-v-oklch)); --brandOS-primary-700: oklch(var(--colors-raw-alexanderteal-700-v-oklch)); --brandOS-primary-750: oklch(var(--colors-raw-alexanderteal-750-v-oklch)); --brandOS-primary-800: oklch(var(--colors-raw-alexanderteal-800-v-oklch)); --brandOS-primary-850: oklch(var(--colors-raw-alexanderteal-850-v-oklch)); --brandOS-primary-900: oklch(var(--colors-raw-alexanderteal-900-v-oklch)); --brandOS-primary-950: oklch(var(--colors-raw-alexanderteal-950-v-oklch)); /* Color Palette - Gray */ --brandOS-gray-050: oklch(var(--colors-raw-alexandergray-050-v-oklch)); --brandOS-gray-100: oklch(var(--colors-raw-alexandergray-100-v-oklch)); --brandOS-gray-150: oklch(var(--colors-raw-alexandergray-150-v-oklch)); --brandOS-gray-200: oklch(var(--colors-raw-alexandergray-200-v-oklch)); --brandOS-gray-250: oklch(var(--colors-raw-alexandergray-250-v-oklch)); --brandOS-gray-300: oklch(var(--colors-raw-alexandergray-300-v-oklch)); --brandOS-gray-350: oklch(var(--colors-raw-alexandergray-350-v-oklch)); --brandOS-gray-400: oklch(var(--colors-raw-alexandergray-400-v-oklch)); --brandOS-gray-450: oklch(var(--colors-raw-alexandergray-450-v-oklch)); --brandOS-gray-500: oklch(var(--colors-raw-alexandergray-500-v-oklch)); --brandOS-gray-550: oklch(var(--colors-raw-alexandergray-550-v-oklch)); --brandOS-gray-600: oklch(var(--colors-raw-alexandergray-600-v-oklch)); --brandOS-gray-650: oklch(var(--colors-raw-alexandergray-650-v-oklch)); --brandOS-gray-700: oklch(var(--colors-raw-alexandergray-700-v-oklch)); --brandOS-gray-750: oklch(var(--colors-raw-alexandergray-750-v-oklch)); --brandOS-gray-800: oklch(var(--colors-raw-alexandergray-800-v-oklch)); --brandOS-gray-850: oklch(var(--colors-raw-alexandergray-850-v-oklch)); --brandOS-gray-900: oklch(var(--colors-raw-alexandergray-900-v-oklch)); --brandOS-gray-950: oklch(var(--colors-raw-alexandergray-950-v-oklch)); --brandOS-gray-1000: oklch(var(--colors-raw-alexandergray-1000-v-oklch)); /* Typography — Alexander Labs pairing (Electrolize headings / Poppins body) */ --brandOS-font-electrolize: 'Electrolize', 'Red Hat Display', system-ui, sans-serif; --brandOS-font-poppins: 'Poppins', 'Inter Variable', 'Inter', system-ui, sans-serif; --brandOS-font-heading-display: var(--brandOS-font-electrolize); --brandOS-font-body-display: var(--brandOS-font-poppins); }