/* * eb-theme.css — the ElectricBlazor theme stylesheet. * * ElectricBlazor theming is a two-tier token system: * * Tier 1 (skin-owned, defined HERE and only here): the --eb-* design tokens below — color, * focus, shape, elevation, type, space, motion, and layer tokens. A "skin" is nothing more * than one complete set of tier-1 values, selected with the data-eb-theme attribute * (typically on , but any subtree element works for scoped theming). * * Tier 2 (component-owned, defined in each component's scoped CSS): components never read * tier-1 tokens directly in their rules. Each component exposes its own * --eb--* tokens whose var() fallbacks chain to tier 1, e.g. * * border-radius: var(--eb-card-radius, var(--eb-radius-md, 10px)); * * so a skin restyles every component at once through tier 1, while any single component * (or single instance) can still be overridden precisely through its tier-2 tokens. * * The contract that keeps this clean: skins define EVERY tier-1 token and contain NO component * class selectors; components consume ONLY their own tier-2 tokens. @keyframes/@font-face are * allowed in skins (see vapor), component styling is not. * * Skins (deliberately a progression from austere to wild): * paper — near-monochrome ink on paper; square corners, no shadows. * contrast — accessibility-first; pure black on white, heavy borders, no shadows. * sepia — warm print; parchment surfaces, brown ink, rust accent, small radii. * focus — quiet long-session mode; desaturated neutrals, one muted teal accent. * slate — quiet modern SaaS; soft cool grays, gentle blue. * electric — the brand default (also on :root); light, crisp, electric blue. * brand — bold single-brand violet; crisp surfaces, confident radii and shadows. * neon — dark cyber; blue-black surfaces, cyan glow, magenta focus. * vapor — full vaporwave; gradient surfaces, drifting accent hue, big radii. * auto — resolves to electric or neon from prefers-color-scheme. */ /* ============================================================================================ * Default skin — electric. :root carries the full token set so every token resolves even before * (or without) any data-eb-theme attribute. Keep this block identical to [data-eb-theme="electric"] * and to the light half of [data-eb-theme="auto"]. * ============================================================================================ */ :root, [data-eb-theme="electric"] { /* Color */ --eb-surface: #f6f8fb; --eb-surface-raised: #ffffff; --eb-surface-sunken: #e9eef6; --eb-border: #d5dce8; --eb-border-strong: #a9b6cb; --eb-text: #17202e; --eb-text-muted: #55647d; --eb-text-inverse: #ffffff; --eb-accent: #2f6fed; --eb-accent-soft: #e3ecfd; --eb-accent-contrast: #ffffff; --eb-danger: #d92d20; --eb-danger-soft: #fde8e6; --eb-success: #0e8345; --eb-success-soft: #e4f5ec; --eb-warning: #b45309; --eb-warning-soft: #fdeeda; --eb-info: #0e7490; --eb-info-soft: #e0f2f7; --eb-backdrop: rgba(23, 32, 46, 0.5); /* Focus */ --eb-focus-ring: 2px solid #2f6fed; /* Shape */ --eb-radius-sm: 6px; --eb-radius-md: 10px; --eb-radius-lg: 16px; /* Elevation */ --eb-shadow-1: 0 1px 2px rgba(23, 32, 46, 0.08); --eb-shadow-2: 0 2px 6px rgba(23, 32, 46, 0.1), 0 1px 2px rgba(23, 32, 46, 0.06); --eb-shadow-3: 0 8px 24px rgba(23, 32, 46, 0.14), 0 2px 6px rgba(23, 32, 46, 0.08); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * paper — very plain. Ink on paper: white surfaces, gray hairlines, near-square corners, no * shadows at all. The accent is a plain dark ink blue; the focus ring is the ink itself. * ============================================================================================ */ [data-eb-theme="paper"] { /* Color */ --eb-surface: #ffffff; --eb-surface-raised: #ffffff; --eb-surface-sunken: #f2f1ef; --eb-border: #c9c7c2; --eb-border-strong: #8f8c85; --eb-text: #1c1b19; --eb-text-muted: #57544e; --eb-text-inverse: #ffffff; --eb-accent: #1f3a5f; --eb-accent-soft: #eceff3; --eb-accent-contrast: #ffffff; --eb-danger: #8f1d18; --eb-danger-soft: #f4e7e6; --eb-success: #2d5c34; --eb-success-soft: #e9efe9; --eb-warning: #7a5200; --eb-warning-soft: #f4eddd; --eb-info: #1f4e6b; --eb-info-soft: #e8eef2; --eb-backdrop: rgba(28, 27, 25, 0.45); /* Focus */ --eb-focus-ring: 2px solid #1c1b19; /* Shape */ --eb-radius-sm: 0; --eb-radius-md: 2px; --eb-radius-lg: 2px; /* Elevation */ --eb-shadow-1: none; --eb-shadow-2: none; --eb-shadow-3: none; /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, Consolas, "Courier New", monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * contrast — accessibility first. Pure black on pure white: every boundary is a full-strength * black hairline (border and border-strong are deliberately the same black), corners are square, * and there are no decorative shadows at all, so nothing is conveyed by tint or depth alone. * Text on surface is 21:1 and every semantic pair clears WCAG AA for small text. The focus ring * is a thick black outline that reads unmistakably against every surface in this skin. * ============================================================================================ */ [data-eb-theme="contrast"] { /* Color */ --eb-surface: #ffffff; --eb-surface-raised: #ffffff; --eb-surface-sunken: #ebebeb; --eb-border: #000000; --eb-border-strong: #000000; --eb-text: #000000; --eb-text-muted: #262626; --eb-text-inverse: #ffffff; --eb-accent: #0000cc; --eb-accent-soft: #d6d6ff; --eb-accent-contrast: #ffffff; --eb-danger: #b30000; --eb-danger-soft: #ffdede; --eb-success: #005c1f; --eb-success-soft: #d6f0de; --eb-warning: #6b4200; --eb-warning-soft: #f7e8cc; --eb-info: #00457a; --eb-info-soft: #d9ebf7; --eb-backdrop: rgba(0, 0, 0, 0.7); /* Focus */ --eb-focus-ring: 3px solid #000000; /* Shape */ --eb-radius-sm: 0; --eb-radius-md: 0; --eb-radius-lg: 0; /* Elevation — none; depth must never be the only cue */ --eb-shadow-1: none; --eb-shadow-2: none; --eb-shadow-3: none; /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * sepia — warm print. Parchment surfaces, warm brown ink, a muted rust accent, a serif face, and * small radii with only the faintest brown-tinted shadows: the look of something set on paper * rather than rendered on glass. Where paper is neutral and clinical, sepia is warm and aged. * ============================================================================================ */ [data-eb-theme="sepia"] { /* Color */ --eb-surface: #f4ecd8; --eb-surface-raised: #fbf5e6; --eb-surface-sunken: #e8dcc0; --eb-border: #d3c3a0; --eb-border-strong: #a8956f; --eb-text: #3b2c1a; --eb-text-muted: #6b563a; --eb-text-inverse: #fbf5e6; --eb-accent: #9c4221; --eb-accent-soft: #f0dfd0; --eb-accent-contrast: #fdf6ec; --eb-danger: #93261b; --eb-danger-soft: #f3ddd4; --eb-success: #4f6b28; --eb-success-soft: #e9e6cd; --eb-warning: #8a5a10; --eb-warning-soft: #f3e4c4; --eb-info: #3c5a75; --eb-info-soft: #e2e6ea; --eb-backdrop: rgba(59, 44, 26, 0.5); /* Focus */ --eb-focus-ring: 2px solid #9c4221; /* Shape */ --eb-radius-sm: 2px; --eb-radius-md: 4px; --eb-radius-lg: 6px; /* Elevation — barely there, and warm */ --eb-shadow-1: 0 1px 1px rgba(59, 44, 26, 0.08); --eb-shadow-2: 0 1px 3px rgba(59, 44, 26, 0.12); --eb-shadow-3: 0 3px 8px rgba(59, 44, 26, 0.16); /* Type */ --eb-font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; --eb-font-mono: ui-monospace, "Courier New", Courier, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * focus — deliberately quiet, for long working sessions. Near-neutral surfaces with only a trace * of green, a single restrained teal accent that also carries the focus ring, generous but not * showy radii, and shadows soft enough to read as a lift rather than an effect. Every semantic * color is desaturated to the same low key so nothing in the UI competes for attention. * ============================================================================================ */ [data-eb-theme="focus"] { /* Color */ --eb-surface: #eceeed; --eb-surface-raised: #f7f8f8; --eb-surface-sunken: #e0e3e2; --eb-border: #ccd1d0; --eb-border-strong: #9aa2a1; --eb-text: #23292b; --eb-text-muted: #5a6467; --eb-text-inverse: #f7f8f8; --eb-accent: #3f6b60; --eb-accent-soft: #e3ece9; --eb-accent-contrast: #ffffff; --eb-danger: #9c3b34; --eb-danger-soft: #eddcda; --eb-success: #3f6b46; --eb-success-soft: #dde7de; --eb-warning: #7d5a22; --eb-warning-soft: #ece2cf; --eb-info: #3f5d78; --eb-info-soft: #dde3ea; --eb-backdrop: rgba(35, 41, 43, 0.45); /* Focus */ --eb-focus-ring: 2px solid #3f6b60; /* Shape */ --eb-radius-sm: 8px; --eb-radius-md: 12px; --eb-radius-lg: 18px; /* Elevation — very soft, barely lifted */ --eb-shadow-1: 0 1px 2px rgba(35, 41, 43, 0.05); --eb-shadow-2: 0 2px 8px rgba(35, 41, 43, 0.06); --eb-shadow-3: 0 6px 20px rgba(35, 41, 43, 0.08); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * slate — quiet modern SaaS. Soft cool grays, a gentle desaturated blue accent, medium-round * corners, and subtle layered shadows. Nothing shouts. * ============================================================================================ */ [data-eb-theme="slate"] { /* Color */ --eb-surface: #f1f5f9; --eb-surface-raised: #ffffff; --eb-surface-sunken: #e2e8f0; --eb-border: #cbd5e1; --eb-border-strong: #94a3b8; --eb-text: #1e293b; --eb-text-muted: #475569; --eb-text-inverse: #f8fafc; --eb-accent: #4a6fa5; --eb-accent-soft: #e2eaf4; --eb-accent-contrast: #ffffff; --eb-danger: #b42318; --eb-danger-soft: #f9e3e2; --eb-success: #15803d; --eb-success-soft: #e3f1e8; --eb-warning: #a16207; --eb-warning-soft: #f6eeda; --eb-info: #0369a1; --eb-info-soft: #e0eff8; --eb-backdrop: rgba(15, 23, 42, 0.5); /* Focus */ --eb-focus-ring: 2px solid #4a6fa5; /* Shape */ --eb-radius-sm: 6px; --eb-radius-md: 8px; --eb-radius-lg: 12px; /* Elevation */ --eb-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --eb-shadow-2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.06); --eb-shadow-3: 0 4px 10px rgba(15, 23, 42, 0.06), 0 14px 28px rgba(15, 23, 42, 0.09); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * brand — one bold, saturated brand color doing all the work. A strong violet drives the accent, * the accent-soft tint, the focus ring, the surface tinting, and the shadow color; surfaces stay * crisp and near-white so the brand color is the only thing carrying identity. Radii and shadows * are confident rather than subtle. Swap the six violet values below to rebrand the whole suite. * ============================================================================================ */ [data-eb-theme="brand"] { /* Color */ --eb-surface: #faf8ff; --eb-surface-raised: #ffffff; --eb-surface-sunken: #f0ebfd; --eb-border: #e0d8f8; --eb-border-strong: #b9a6ee; --eb-text: #1b1235; --eb-text-muted: #574a78; --eb-text-inverse: #ffffff; --eb-accent: #6d28d9; --eb-accent-soft: #ede5fd; --eb-accent-contrast: #ffffff; --eb-danger: #c8261b; --eb-danger-soft: #fde8e6; --eb-success: #0b6e3a; --eb-success-soft: #e4f5ec; --eb-warning: #9a4708; --eb-warning-soft: #fdeeda; --eb-info: #0b6379; --eb-info-soft: #e0f2f7; --eb-backdrop: rgba(27, 18, 53, 0.55); /* Focus */ --eb-focus-ring: 3px solid #6d28d9; /* Shape */ --eb-radius-sm: 8px; --eb-radius-md: 14px; --eb-radius-lg: 22px; /* Elevation — pronounced and brand-tinted */ --eb-shadow-1: 0 1px 3px rgba(109, 40, 217, 0.14); --eb-shadow-2: 0 4px 12px rgba(109, 40, 217, 0.18), 0 1px 3px rgba(27, 18, 53, 0.08); --eb-shadow-3: 0 14px 36px rgba(109, 40, 217, 0.26), 0 4px 10px rgba(27, 18, 53, 0.12); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * neon — dark cyber. Very dark blue-black surfaces, high-contrast ice-blue text, a cyan accent * whose glow rides in the shadow tokens, and a vivid magenta focus ring. Keep this block * identical to the dark half of [data-eb-theme="auto"]. * ============================================================================================ */ [data-eb-theme="neon"] { /* Color */ --eb-surface: #070b14; --eb-surface-raised: #0d1424; --eb-surface-sunken: #04060c; --eb-border: #1d2b47; --eb-border-strong: #334970; --eb-text: #d9e6ff; --eb-text-muted: #8fa3c9; --eb-text-inverse: #070b14; --eb-accent: #29e0ff; --eb-accent-soft: #0b2c3a; --eb-accent-contrast: #041019; --eb-danger: #ff6272; --eb-danger-soft: #3a0f1c; --eb-success: #3ddc97; --eb-success-soft: #0a2f21; --eb-warning: #ffc44d; --eb-warning-soft: #33240a; --eb-info: #b18cff; --eb-info-soft: #241543; --eb-backdrop: rgba(2, 6, 16, 0.72); /* Focus */ --eb-focus-ring: 2px solid #ff4df0; /* Shape */ --eb-radius-sm: 4px; --eb-radius-md: 8px; --eb-radius-lg: 14px; /* Elevation — depth plus cyan/magenta glow */ --eb-shadow-1: 0 0 0 1px rgba(41, 224, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.6); --eb-shadow-2: 0 0 14px rgba(41, 224, 255, 0.14), 0 4px 16px rgba(0, 0, 0, 0.7); --eb-shadow-3: 0 0 26px rgba(41, 224, 255, 0.2), 0 0 8px rgba(255, 77, 240, 0.12), 0 12px 32px rgba(0, 0, 0, 0.8); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } /* ============================================================================================ * vapor — full vaporwave. Sunset-violet gradient surfaces, big soft radii, dramatic pink/cyan * shadows, a mono face with personality, and an accent whose hue slowly drifts between magenta * and violet. The hue lives in a registered custom property so the animation interpolates * smoothly; browsers without @property support still resolve the var() fallback (a static * magenta) and merely lose the smooth drift. Both accent tones track the same hue, and the * drift range (272°–318°) is chosen so --eb-accent-contrast keeps AA contrast throughout. * ============================================================================================ */ @property --eb-accent-hue { syntax: ""; inherits: true; initial-value: 318deg; } @keyframes eb-vapor-accent-drift { 0%, 100% { --eb-accent-hue: 318deg; } 50% { --eb-accent-hue: 272deg; } } [data-eb-theme="vapor"] { /* Color — gradients in the surface tokens; style with background (not background-color) */ --eb-surface: linear-gradient(165deg, #1b1044 0%, #34155c 55%, #5d1a6b 100%); --eb-surface-raised: linear-gradient(150deg, #2a1656 0%, #45207a 100%); --eb-surface-sunken: linear-gradient(180deg, #120b30 0%, #1c1045 100%); --eb-border: rgba(255, 138, 236, 0.35); --eb-border-strong: rgba(255, 138, 236, 0.65); --eb-text: #ffeaf8; --eb-text-muted: #d5b8ea; --eb-text-inverse: #2a1656; --eb-accent: hsl(var(--eb-accent-hue, 318deg) 90% 70%); --eb-accent-soft: hsl(var(--eb-accent-hue, 318deg) 55% 27%); --eb-accent-contrast: #2b0e35; --eb-danger: #ff8598; --eb-danger-soft: #58122e; --eb-success: #6ff0c0; --eb-success-soft: #124237; --eb-warning: #ffd166; --eb-warning-soft: #4e3512; --eb-info: #7fd6ff; --eb-info-soft: #143550; --eb-backdrop: rgba(18, 11, 48, 0.65); /* Focus */ --eb-focus-ring: 3px solid #00f0ff; /* Shape */ --eb-radius-sm: 10px; --eb-radius-md: 18px; --eb-radius-lg: 28px; /* Elevation — dramatic soft pink/cyan halos */ --eb-shadow-1: 0 4px 16px rgba(255, 105, 214, 0.25); --eb-shadow-2: 0 8px 32px rgba(157, 78, 221, 0.35), 0 2px 8px rgba(0, 240, 255, 0.14); --eb-shadow-3: 0 18px 56px rgba(255, 105, 214, 0.4), 0 4px 24px rgba(0, 240, 255, 0.22); /* Type */ --eb-font-family: "Cascadia Code", ui-monospace, "Lucida Console", Menlo, monospace; --eb-font-mono: "Cascadia Code", ui-monospace, "Lucida Console", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; animation: eb-vapor-accent-drift 16s ease-in-out infinite; } /* ============================================================================================ * auto — follows the OS: electric in light mode, neon in dark mode. CSS custom properties can't * alias another selector's block, so these are copies; keep them in sync with the electric and * neon blocks above. * ============================================================================================ */ @media (prefers-color-scheme: light) { [data-eb-theme="auto"] { /* Color */ --eb-surface: #f6f8fb; --eb-surface-raised: #ffffff; --eb-surface-sunken: #e9eef6; --eb-border: #d5dce8; --eb-border-strong: #a9b6cb; --eb-text: #17202e; --eb-text-muted: #55647d; --eb-text-inverse: #ffffff; --eb-accent: #2f6fed; --eb-accent-soft: #e3ecfd; --eb-accent-contrast: #ffffff; --eb-danger: #d92d20; --eb-danger-soft: #fde8e6; --eb-success: #0e8345; --eb-success-soft: #e4f5ec; --eb-warning: #b45309; --eb-warning-soft: #fdeeda; --eb-info: #0e7490; --eb-info-soft: #e0f2f7; --eb-backdrop: rgba(23, 32, 46, 0.5); /* Focus */ --eb-focus-ring: 2px solid #2f6fed; /* Shape */ --eb-radius-sm: 6px; --eb-radius-md: 10px; --eb-radius-lg: 16px; /* Elevation */ --eb-shadow-1: 0 1px 2px rgba(23, 32, 46, 0.08); --eb-shadow-2: 0 2px 6px rgba(23, 32, 46, 0.1), 0 1px 2px rgba(23, 32, 46, 0.06); --eb-shadow-3: 0 8px 24px rgba(23, 32, 46, 0.14), 0 2px 6px rgba(23, 32, 46, 0.08); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } } @media (prefers-color-scheme: dark) { [data-eb-theme="auto"] { /* Color */ --eb-surface: #070b14; --eb-surface-raised: #0d1424; --eb-surface-sunken: #04060c; --eb-border: #1d2b47; --eb-border-strong: #334970; --eb-text: #d9e6ff; --eb-text-muted: #8fa3c9; --eb-text-inverse: #070b14; --eb-accent: #29e0ff; --eb-accent-soft: #0b2c3a; --eb-accent-contrast: #041019; --eb-danger: #ff6272; --eb-danger-soft: #3a0f1c; --eb-success: #3ddc97; --eb-success-soft: #0a2f21; --eb-warning: #ffc44d; --eb-warning-soft: #33240a; --eb-info: #b18cff; --eb-info-soft: #241543; --eb-backdrop: rgba(2, 6, 16, 0.72); /* Focus */ --eb-focus-ring: 2px solid #ff4df0; /* Shape */ --eb-radius-sm: 4px; --eb-radius-md: 8px; --eb-radius-lg: 14px; /* Elevation */ --eb-shadow-1: 0 0 0 1px rgba(41, 224, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.6); --eb-shadow-2: 0 0 14px rgba(41, 224, 255, 0.14), 0 4px 16px rgba(0, 0, 0, 0.7); --eb-shadow-3: 0 0 26px rgba(41, 224, 255, 0.2), 0 0 8px rgba(255, 77, 240, 0.12), 0 12px 32px rgba(0, 0, 0, 0.8); /* Type */ --eb-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eb-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; /* Space */ --eb-space-1: 0.25rem; --eb-space-2: 0.5rem; --eb-space-3: 0.75rem; --eb-space-4: 1rem; --eb-space-5: 1.5rem; /* Motion */ --eb-duration-fast: 120ms; --eb-duration-base: 200ms; --eb-duration-slow: 350ms; /* Layers */ --eb-z-sticky: 100; --eb-z-overlay: 1000; --eb-z-popover: 1100; --eb-z-toast: 1200; --eb-z-tour: 1250; --eb-z-drag: 1300; --eb-z-max: 2147483000; } } /* ============================================================================================ * Reduced motion — zero every duration token (components drive all their transitions from * these) and stop vapor's accent drift. Last in the file so it wins the specificity tie with * the skin blocks above. * ============================================================================================ */ @media (prefers-reduced-motion: reduce) { :root, [data-eb-theme] { --eb-duration-fast: 0ms; --eb-duration-base: 0ms; --eb-duration-slow: 0ms; } [data-eb-theme="vapor"] { animation: none; } }