/*
* SLYD Design Tokens v0.6.0
* Shared CSS custom properties for consistent theming across all SLYD applications.
*
* Usage in consuming projects:
*
*
* Token Architecture:
* - Core Tokens: spacing, typography, radius, transitions, z-index (never change)
* - Theme Tokens: primary/secondary/accent + derived (swap by data-slyd-theme)
* - Mode Tokens: surfaces, text, borders, shadows (swap by data-mode)
*
* Theming:
* - Theme selection via data attribute:
* - Mode selection via data attribute:
* - Default theme: indigo (also matches no-attribute root)
* - Default mode: dark (also matches no-attribute root)
*
* Pre-paint script (in slydTheme.js + each App.razor head) sets both
* attributes before first paint to prevent FOUC. See TRACK2_LIGHT_MODE_SPEC.md §6.
*
* Legacy theming:
* - Class-based overrides remain supported: .theme-burnt-orange, .theme-sharp-green
*/
/* ===================
CORE TOKENS (Never Change - Structural Values)
=================== */
:root {
/* -------------------------
SPACING SCALE
------------------------- */
--slyd-spacing-xs: 4px;
--slyd-spacing-sm: 8px;
--slyd-spacing-md: 16px;
--slyd-spacing-lg: 24px;
--slyd-spacing-xl: 32px;
--slyd-spacing-2xl: 48px;
--slyd-spacing-3xl: 64px;
--slyd-spacing-4xl: 96px;
/* -------------------------
BORDER RADIUS
(V1/V1b per Track 2 spec: xs 2->4, sm 4->6 to match mockups)
------------------------- */
--slyd-radius-xs: 4px;
--slyd-radius-sm: 6px;
--slyd-radius-md: 8px;
--slyd-radius-lg: 12px;
--slyd-radius-xl: 16px;
--slyd-radius-2xl: 20px;
--slyd-radius-full: 9999px;
/* -------------------------
TYPOGRAPHY
------------------------- */
--slyd-font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--slyd-font-family-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--slyd-font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--slyd-font-size-xs: 0.75rem; /* 12px */
--slyd-font-size-sm: 0.875rem; /* 14px */
--slyd-font-size-base: 1rem; /* 16px */
--slyd-font-size-lg: 1.125rem; /* 18px */
--slyd-font-size-xl: 1.25rem; /* 20px */
--slyd-font-size-2xl: 1.5rem; /* 24px */
--slyd-font-size-3xl: 1.875rem; /* 30px */
--slyd-font-size-4xl: 2.25rem; /* 36px */
--slyd-font-weight-normal: 400;
--slyd-font-weight-medium: 500;
--slyd-font-weight-semibold: 600;
--slyd-font-weight-bold: 700;
--slyd-line-height-tight: 1.25;
--slyd-line-height-normal: 1.5;
--slyd-line-height-relaxed: 1.75;
/* -------------------------
STRUCTURAL SHADOWS (flat, theme/mode-invariant)
Mode-aware aesthetic shadows live in the mode blocks below
(--slyd-shadow-soft / -card / -hover).
------------------------- */
--slyd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
--slyd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--slyd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
--slyd-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
/* -------------------------
TRANSITIONS
------------------------- */
--slyd-transition-fast: 0.15s ease;
--slyd-transition: 0.3s ease;
--slyd-transition-slow: 0.5s ease;
/* -------------------------
Z-INDEX SCALE
------------------------- */
--slyd-z-base: 0;
--slyd-z-dropdown: 10;
--slyd-z-sticky: 20;
--slyd-z-fixed: 30;
--slyd-z-modal-backdrop: 40;
--slyd-z-modal: 50;
--slyd-z-popover: 60;
--slyd-z-tooltip: 70;
--slyd-z-toast: 80;
/* -------------------------
LAYOUT
------------------------- */
--slyd-sidebar-width: 280px;
--slyd-header-height: 64px;
--slyd-container-max-width: 1400px;
/* -------------------------
ROLE COLORS (cockpit, theme-invariant)
Per TRACK2_LIGHT_MODE_SPEC.md §1 (V3 dashboard-family role colors).
Buyer hue matches indigo --primary by design.
------------------------- */
--slyd-role-buyer: hsl(239, 84%, 67%);
--slyd-role-buyer-rgb: 129, 140, 248;
--slyd-role-operator: hsl(152, 60%, 45%);
--slyd-role-operator-rgb: 46, 184, 122;
--slyd-role-broker: hsl(38, 92%, 52%);
--slyd-role-broker-rgb: 245, 158, 16;
/* -------------------------
GOLD-SOFT (theme-invariant accent tint)
Per TRACK2_LIGHT_MODE_SPEC.md GAP-1.
------------------------- */
--slyd-accent-gold-soft: hsla(38, 92%, 50%, 0.14);
}
/* ===================
THEME TOKENS (Swappable Colors)
Theme Selection via data-slyd-theme attribute on :
- Default: indigo (no attribute or data-slyd-theme="indigo")
- Alternative: cyan (data-slyd-theme="cyan")
- Additional: black-brass, navy-steel, green-ops
Example:
=================== */
/* =========================================================
THEME: INDIGO (Default - Enterprise Purple)
Applied when no theme attribute is set or set to "indigo"
========================================================= */
:root[data-slyd-theme="indigo"],
:root:not([data-slyd-theme]) {
/* PRIMARY */
--slyd-primary: hsl(239, 84%, 67%);
--slyd-primary-dark: hsl(243, 75%, 59%);
--slyd-primary-light: hsl(235, 93%, 75%);
--slyd-primary-rgb: 129, 140, 248;
--slyd-primary-soft: hsla(239, 84%, 67%, 0.14);
--slyd-primary-glow: hsla(239, 84%, 67%, 0.32);
/* SECONDARY */
--slyd-secondary: hsl(215, 20%, 65%);
--slyd-secondary-dark: hsl(215, 19%, 55%);
--slyd-secondary-light: hsla(214, 32%, 75%,0.5);
--slyd-secondary-rgb: 148, 163, 184;
/* ACCENTS */
--slyd-accent-gold: hsl(38, 92%, 50%);
--slyd-accent-gold-dark: hsl(32, 95%, 44%);
--slyd-accent-gold-light: hsl(43, 96%, 56%);
--slyd-accent-gold-rgb: 245, 158, 11;
--slyd-accent-soft: var(--slyd-accent-gold-soft);
--slyd-accent-purple: hsl(258, 90%, 66%);
--slyd-accent-purple-dark: hsl(262, 83%, 58%);
--slyd-accent-purple-light: hsl(255, 92%, 76%);
--slyd-accent-purple-rgb: 139, 92, 246;
--slyd-accent-pink: hsl(330, 81%, 60%);
--slyd-accent-pink-rgb: 236, 72, 153;
/* SEMANTICS */
--slyd-success: hsl(167, 76%, 42%);
--slyd-success-dark: hsl(168, 80%, 35%);
--slyd-success-light: hsl(166, 72%, 55%);
--slyd-success-bg: hsla(167, 76%, 42%, 0.1);
--slyd-success-rgb: 26, 188, 156;
--slyd-warning: hsl(38, 92%, 50%);
--slyd-warning-dark: hsl(32, 95%, 44%);
--slyd-warning-light: hsl(43, 96%, 56%);
--slyd-warning-bg: hsla(38, 92%, 50%, 0.1);
--slyd-warning-rgb: 245, 158, 11;
--slyd-danger: hsl(0, 70%, 55%);
--slyd-error: hsl(0, 70%, 55%);
--slyd-danger-dark: hsl(0, 65%, 45%);
--slyd-error-dark: hsl(0, 65%, 45%);
--slyd-danger-light: hsl(0, 75%, 65%);
--slyd-error-light: hsl(0, 75%, 65%);
--slyd-danger-bg: hsla(0, 70%, 55%, 0.1);
--slyd-error-bg: hsla(0, 70%, 55%, 0.1);
--slyd-danger-rgb: 220, 85, 85;
--slyd-error-rgb: 220, 85, 85;
/* INFO — sky blue per Track 2 spec (status color, not a primary alias) */
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
/* TEXT-ORANGE-GRADIENT (theme-invariant accent) */
--slyd-text-orange-gradient: linear-gradient(to right, hsl(38, 92%, 50%), hsl(43, 96%, 56%));
/* BORDERS — primary-derived */
--slyd-border-focus: hsla(239, 84%, 67%, 0.5);
--slyd-border-primary: hsla(239, 84%, 67%, 0.2);
--slyd-border-active: hsla(239, 84%, 67%, 0.5);
--slyd-border-refelection: hsla(239, 60%, 80%, 0.4);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
/* SHADOW GLOWS — primary-derived */
--slyd-shadow-glow: 0 0 20px hsla(239, 84%, 67%, 0.3);
--slyd-shadow-glow-primary: 0 0 30px hsla(239, 84%, 67%, 0.15);
--slyd-shadow-glow-gold: 0 8px 40px hsla(38, 92%, 50%, 0.15);
--slyd-shadow-glow-gold-hover: 0 12px 50px hsla(38, 92%, 50%, 0.25);
--slyd-shadow-glow-purple: 0 0 30px hsla(258, 90%, 66%, 0.15);
}
/* Indigo primary — light-mode override */
:root[data-slyd-theme="indigo"][data-mode="light"],
:root:not([data-slyd-theme])[data-mode="light"] {
--slyd-primary: hsl(243, 75%, 59%);
--slyd-primary-dark: hsl(243, 75%, 49%);
--slyd-primary-light: hsl(243, 75%, 68%);
--slyd-primary-rgb: 79, 70, 229;
--slyd-primary-soft: hsla(243, 75%, 59%, 0.10);
--slyd-primary-glow: hsla(243, 75%, 59%, 0.18);
--slyd-border-focus: hsla(243, 75%, 59%, 0.5);
--slyd-border-primary: hsla(243, 75%, 59%, 0.2);
--slyd-border-active: hsla(243, 75%, 59%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(243, 75%, 59%, 0.2);
--slyd-shadow-glow-primary: 0 0 30px hsla(243, 75%, 59%, 0.10);
}
/* =========================================================
THEME: CYAN (Alternative - Cool Blue)
Applied when data-slyd-theme="cyan"
========================================================= */
:root[data-slyd-theme="cyan"] {
/* PRIMARY */
--slyd-primary: hsl(186, 94%, 43%);
--slyd-primary-dark: hsl(185, 94%, 37%);
--slyd-primary-light: hsl(188, 86%, 53%);
--slyd-primary-rgb: 6, 182, 212;
--slyd-primary-soft: hsla(186, 94%, 43%, 0.14);
--slyd-primary-glow: hsla(186, 94%, 43%, 0.32);
/* SECONDARY */
--slyd-secondary: hsl(160, 84%, 39%);
--slyd-secondary-dark: hsl(161, 94%, 30%);
--slyd-secondary-light: hsl(158, 64%, 52%);
--slyd-secondary-rgb: 16, 185, 129;
/* ACCENTS */
--slyd-accent-gold: hsl(38, 92%, 50%);
--slyd-accent-gold-dark: hsl(32, 95%, 44%);
--slyd-accent-gold-light: hsl(43, 96%, 56%);
--slyd-accent-gold-rgb: 245, 158, 11;
--slyd-accent-soft: var(--slyd-accent-gold-soft);
--slyd-accent-purple: hsl(258, 90%, 66%);
--slyd-accent-purple-dark: hsl(262, 83%, 58%);
--slyd-accent-purple-light: hsl(255, 92%, 76%);
--slyd-accent-purple-rgb: 139, 92, 246;
--slyd-accent-pink: hsl(330, 81%, 60%);
--slyd-accent-pink-rgb: 236, 72, 153;
/* SEMANTICS */
--slyd-success: hsl(142, 71%, 45%);
--slyd-success-dark: hsl(142, 76%, 36%);
--slyd-success-light: hsl(142, 69%, 58%);
--slyd-success-bg: hsla(142, 71%, 45%, 0.1);
--slyd-success-rgb: 34, 197, 94;
--slyd-warning: hsl(38, 92%, 50%);
--slyd-warning-dark: hsl(32, 95%, 44%);
--slyd-warning-light: hsl(43, 96%, 56%);
--slyd-warning-bg: hsla(38, 92%, 50%, 0.1);
--slyd-warning-rgb: 245, 158, 11;
--slyd-danger: hsl(0, 84%, 60%);
--slyd-error: hsl(0, 84%, 60%);
--slyd-danger-dark: hsl(0, 72%, 51%);
--slyd-error-dark: hsl(0, 72%, 51%);
--slyd-danger-light: hsl(0, 91%, 71%);
--slyd-error-light: hsl(0, 91%, 71%);
--slyd-danger-bg: hsla(0, 84%, 60%, 0.1);
--slyd-error-bg: hsla(0, 84%, 60%, 0.1);
--slyd-danger-rgb: 239, 68, 68;
--slyd-error-rgb: 239, 68, 68;
/* INFO — sky blue (theme-invariant per spec; overrides any prior aliasing to primary) */
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
/* BORDERS — primary-derived */
--slyd-border-focus: hsla(186, 94%, 43%, 0.5);
--slyd-border-primary: hsla(186, 94%, 43%, 0.2);
--slyd-border-active: hsla(186, 94%, 43%, 0.5);
--slyd-border-refelection: linear-gradient(90deg, var(--slyd-secondary-light), rgba(255, 255, 255, 0.01));
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
/* SHADOW GLOWS — primary-derived */
--slyd-shadow-glow: 0 0 20px hsla(186, 94%, 43%, 0.3);
--slyd-shadow-glow-primary: 0 0 30px hsla(186, 94%, 43%, 0.15);
--slyd-shadow-glow-gold: 0 8px 40px hsla(38, 92%, 50%, 0.15);
--slyd-shadow-glow-gold-hover: 0 12px 50px hsla(38, 92%, 50%, 0.25);
--slyd-shadow-glow-purple: 0 0 30px hsla(258, 90%, 66%, 0.15);
}
/* Cyan primary — light-mode override */
:root[data-slyd-theme="cyan"][data-mode="light"] {
--slyd-primary: hsl(186, 90%, 32%);
--slyd-primary-dark: hsl(186, 90%, 26%);
--slyd-primary-light: hsl(186, 90%, 42%);
--slyd-primary-rgb: 8, 130, 145;
--slyd-primary-soft: hsla(186, 90%, 32%, 0.10);
--slyd-primary-glow: hsla(186, 90%, 32%, 0.18);
--slyd-border-focus: hsla(186, 90%, 32%, 0.5);
--slyd-border-primary: hsla(186, 90%, 32%, 0.2);
--slyd-border-active: hsla(186, 90%, 32%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(186, 90%, 32%, 0.2);
--slyd-shadow-glow-primary: 0 0 30px hsla(186, 90%, 32%, 0.10);
}
/* =========================================================
THEME: BLACK + BRASS
Applied when data-slyd-theme="black-brass"
========================================================= */
:root[data-slyd-theme="black-brass"] {
/* Theme-specific radius tightening per Track 2 spec §2 */
--slyd-radius-md: 4px;
--slyd-radius-lg: 6px;
--slyd-primary: hsl(38, 45%, 52%);
--slyd-primary-dark: hsl(38, 45%, 44%);
--slyd-primary-light: hsl(38, 45%, 62%);
--slyd-primary-rgb: 168, 142, 97;
--slyd-primary-soft: hsla(38, 45%, 52%, 0.14);
--slyd-primary-glow: hsla(38, 45%, 52%, 0.30);
--slyd-secondary: hsl(165, 52%, 40%);
--slyd-secondary-dark: hsl(165, 55%, 32%);
--slyd-secondary-light: hsl(165, 48%, 52%);
--slyd-secondary-rgb: 49, 156, 131;
--slyd-accent-gold: hsl(43, 90%, 56%);
--slyd-accent-gold-dark: hsl(38, 90%, 50%);
--slyd-accent-gold-light: hsl(45, 95%, 62%);
--slyd-accent-gold-rgb: 248, 191, 38;
--slyd-accent-soft: hsla(43, 90%, 56%, 0.14);
--slyd-accent-purple: hsl(258, 90%, 66%);
--slyd-accent-purple-dark: hsl(262, 83%, 58%);
--slyd-accent-purple-light: hsl(255, 92%, 76%);
--slyd-accent-purple-rgb: 139, 92, 246;
--slyd-accent-pink: hsl(330, 81%, 60%);
--slyd-accent-pink-rgb: 236, 72, 153;
--slyd-success: hsl(165, 52%, 40%);
--slyd-success-dark: hsl(165, 55%, 32%);
--slyd-success-light: hsl(165, 48%, 52%);
--slyd-success-bg: hsla(165, 52%, 40%, 0.12);
--slyd-success-rgb: 49, 156, 131;
--slyd-warning: hsl(38, 92%, 50%);
--slyd-warning-dark: hsl(32, 95%, 44%);
--slyd-warning-light: hsl(43, 96%, 56%);
--slyd-warning-bg: hsla(38, 92%, 50%, 0.1);
--slyd-warning-rgb: 245, 158, 11;
--slyd-danger: hsl(0, 50%, 54%);
--slyd-error: hsl(0, 50%, 54%);
--slyd-danger-dark: hsl(0, 50%, 44%);
--slyd-error-dark: hsl(0, 50%, 44%);
--slyd-danger-light: hsl(0, 50%, 66%);
--slyd-error-light: hsl(0, 50%, 66%);
--slyd-danger-bg: hsla(0, 50%, 54%, 0.12);
--slyd-error-bg: hsla(0, 50%, 54%, 0.12);
--slyd-danger-rgb: 193, 83, 83;
--slyd-error-rgb: 193, 83, 83;
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
--slyd-border-focus: hsla(38, 45%, 52%, 0.55);
--slyd-border-primary: hsla(38, 45%, 52%, 0.22);
--slyd-border-active: hsla(38, 45%, 52%, 0.55);
--slyd-border-gold: hsla(43, 90%, 56%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-shadow-glow: 0 0 20px hsla(38, 45%, 52%, 0.26);
--slyd-shadow-glow-primary: 0 0 30px hsla(38, 45%, 52%, 0.14);
--slyd-shadow-glow-gold: 0 8px 40px hsla(43, 90%, 56%, 0.12);
--slyd-shadow-glow-gold-hover: 0 12px 50px hsla(43, 90%, 56%, 0.2);
--slyd-shadow-glow-purple: 0 0 30px hsla(258, 90%, 66%, 0.15);
}
/* Black-Brass primary — light-mode override */
:root[data-slyd-theme="black-brass"][data-mode="light"] {
--slyd-primary: hsl(38, 50%, 38%);
--slyd-primary-dark: hsl(38, 50%, 30%);
--slyd-primary-light: hsl(38, 50%, 48%);
--slyd-primary-rgb: 145, 113, 60;
--slyd-primary-soft: hsla(38, 50%, 38%, 0.10);
--slyd-primary-glow: hsla(38, 50%, 38%, 0.18);
--slyd-border-focus: hsla(38, 50%, 38%, 0.5);
--slyd-border-primary: hsla(38, 50%, 38%, 0.22);
--slyd-border-active: hsla(38, 50%, 38%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(38, 50%, 38%, 0.2);
--slyd-shadow-glow-primary: 0 0 30px hsla(38, 50%, 38%, 0.10);
}
/* =========================================================
THEME: NAVY + STEEL
Applied when data-slyd-theme="navy-steel"
========================================================= */
:root[data-slyd-theme="navy-steel"] {
--slyd-primary: hsl(222, 55%, 52%);
--slyd-primary-dark: hsl(222, 55%, 44%);
--slyd-primary-light: hsl(222, 55%, 64%);
--slyd-primary-rgb: 60, 96, 206;
--slyd-primary-soft: hsla(222, 55%, 52%, 0.14);
--slyd-primary-glow: hsla(222, 55%, 52%, 0.30);
/* Navy-steel: secondary = gold (per mockup spec §2) */
--slyd-secondary: hsl(38, 92%, 50%);
--slyd-secondary-dark: hsl(32, 95%, 44%);
--slyd-secondary-light: hsl(43, 96%, 56%);
--slyd-secondary-rgb: 245, 158, 11;
--slyd-accent-gold: hsl(38, 92%, 50%);
--slyd-accent-gold-dark: hsl(32, 95%, 44%);
--slyd-accent-gold-light: hsl(43, 96%, 56%);
--slyd-accent-gold-rgb: 245, 158, 11;
--slyd-accent-soft: var(--slyd-accent-gold-soft);
--slyd-accent-purple: hsl(258, 90%, 66%);
--slyd-accent-purple-dark: hsl(262, 83%, 58%);
--slyd-accent-purple-light: hsl(255, 92%, 76%);
--slyd-accent-purple-rgb: 139, 92, 246;
--slyd-accent-pink: hsl(330, 81%, 60%);
--slyd-accent-pink-rgb: 236, 72, 153;
--slyd-success: hsl(160, 55%, 40%);
--slyd-success-dark: hsl(160, 58%, 32%);
--slyd-success-light: hsl(160, 50%, 52%);
--slyd-success-bg: hsla(160, 55%, 40%, 0.12);
--slyd-success-rgb: 46, 158, 122;
--slyd-warning: hsl(38, 92%, 50%);
--slyd-warning-dark: hsl(32, 95%, 44%);
--slyd-warning-light: hsl(43, 96%, 56%);
--slyd-warning-bg: hsla(38, 92%, 50%, 0.1);
--slyd-warning-rgb: 245, 158, 11;
--slyd-danger: hsl(0, 52%, 55%);
--slyd-error: hsl(0, 52%, 55%);
--slyd-danger-dark: hsl(0, 52%, 45%);
--slyd-error-dark: hsl(0, 52%, 45%);
--slyd-danger-light: hsl(0, 52%, 66%);
--slyd-error-light: hsl(0, 52%, 66%);
--slyd-danger-bg: hsla(0, 52%, 55%, 0.12);
--slyd-error-bg: hsla(0, 52%, 55%, 0.12);
--slyd-danger-rgb: 198, 84, 84;
--slyd-error-rgb: 198, 84, 84;
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
--slyd-border-focus: hsla(222, 55%, 52%, 0.55);
--slyd-border-primary: hsla(222, 55%, 52%, 0.22);
--slyd-border-active: hsla(222, 55%, 52%, 0.55);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-shadow-glow: 0 0 20px hsla(222, 55%, 52%, 0.24);
--slyd-shadow-glow-primary: 0 0 30px hsla(222, 55%, 52%, 0.12);
--slyd-shadow-glow-gold: 0 8px 40px hsla(38, 92%, 50%, 0.12);
--slyd-shadow-glow-gold-hover: 0 12px 50px hsla(38, 92%, 50%, 0.2);
--slyd-shadow-glow-purple: 0 0 30px hsla(258, 90%, 66%, 0.15);
}
/* Navy-Steel primary — light-mode override */
:root[data-slyd-theme="navy-steel"][data-mode="light"] {
--slyd-primary: hsl(222, 55%, 42%);
--slyd-primary-dark: hsl(222, 55%, 34%);
--slyd-primary-light: hsl(222, 55%, 52%);
--slyd-primary-rgb: 48, 78, 167;
--slyd-primary-soft: hsla(222, 55%, 42%, 0.10);
--slyd-primary-glow: hsla(222, 55%, 42%, 0.18);
--slyd-border-focus: hsla(222, 55%, 42%, 0.5);
--slyd-border-primary: hsla(222, 55%, 42%, 0.22);
--slyd-border-active: hsla(222, 55%, 42%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(222, 55%, 42%, 0.2);
--slyd-shadow-glow-primary: 0 0 30px hsla(222, 55%, 42%, 0.10);
}
/* =========================================================
THEME: GREEN OPS
Applied when data-slyd-theme="green-ops"
========================================================= */
:root[data-slyd-theme="green-ops"] {
--slyd-primary: hsl(152, 55%, 42%);
--slyd-primary-dark: hsl(152, 58%, 34%);
--slyd-primary-light: hsl(152, 50%, 54%);
--slyd-primary-rgb: 48, 166, 124;
--slyd-primary-soft: hsla(152, 55%, 42%, 0.14);
--slyd-primary-glow: hsla(152, 55%, 42%, 0.30);
/* Green-ops: secondary = cyan (per mockup spec §2) */
--slyd-secondary: hsl(186, 94%, 43%);
--slyd-secondary-dark: hsl(185, 94%, 37%);
--slyd-secondary-light: hsl(188, 86%, 53%);
--slyd-secondary-rgb: 6, 182, 212;
--slyd-accent-gold: hsl(38, 92%, 50%);
--slyd-accent-gold-dark: hsl(32, 95%, 44%);
--slyd-accent-gold-light: hsl(43, 96%, 56%);
--slyd-accent-gold-rgb: 245, 158, 11;
--slyd-accent-soft: var(--slyd-accent-gold-soft);
--slyd-accent-purple: hsl(258, 90%, 66%);
--slyd-accent-purple-dark: hsl(262, 83%, 58%);
--slyd-accent-purple-light: hsl(255, 92%, 76%);
--slyd-accent-purple-rgb: 139, 92, 246;
--slyd-accent-pink: hsl(330, 81%, 60%);
--slyd-accent-pink-rgb: 236, 72, 153;
--slyd-success: hsl(146, 55%, 44%);
--slyd-success-dark: hsl(146, 58%, 36%);
--slyd-success-light: hsl(146, 50%, 56%);
--slyd-success-bg: hsla(146, 55%, 44%, 0.12);
--slyd-success-rgb: 50, 174, 118;
--slyd-warning: hsl(38, 92%, 50%);
--slyd-warning-dark: hsl(32, 95%, 44%);
--slyd-warning-light: hsl(43, 96%, 56%);
--slyd-warning-bg: hsla(38, 92%, 50%, 0.1);
--slyd-warning-rgb: 245, 158, 11;
--slyd-danger: hsl(0, 52%, 55%);
--slyd-error: hsl(0, 52%, 55%);
--slyd-danger-dark: hsl(0, 52%, 45%);
--slyd-error-dark: hsl(0, 52%, 45%);
--slyd-danger-light: hsl(0, 52%, 66%);
--slyd-error-light: hsl(0, 52%, 66%);
--slyd-danger-bg: hsla(0, 52%, 55%, 0.12);
--slyd-error-bg: hsla(0, 52%, 55%, 0.12);
--slyd-danger-rgb: 198, 84, 84;
--slyd-error-rgb: 198, 84, 84;
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
--slyd-border-focus: hsla(152, 55%, 42%, 0.55);
--slyd-border-primary: hsla(152, 55%, 42%, 0.22);
--slyd-border-active: hsla(152, 55%, 42%, 0.55);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-shadow-glow: 0 0 20px hsla(152, 55%, 42%, 0.24);
--slyd-shadow-glow-primary: 0 0 30px hsla(152, 55%, 42%, 0.12);
--slyd-shadow-glow-gold: 0 8px 40px hsla(38, 92%, 50%, 0.12);
--slyd-shadow-glow-gold-hover: 0 12px 50px hsla(38, 92%, 50%, 0.2);
--slyd-shadow-glow-purple: 0 0 30px hsla(258, 90%, 66%, 0.15);
}
/* Green-Ops primary — light-mode override */
:root[data-slyd-theme="green-ops"][data-mode="light"] {
--slyd-primary: hsl(152, 58%, 32%);
--slyd-primary-dark: hsl(152, 58%, 24%);
--slyd-primary-light: hsl(152, 58%, 42%);
--slyd-primary-rgb: 35, 130, 87;
--slyd-primary-soft: hsla(152, 58%, 32%, 0.10);
--slyd-primary-glow: hsla(152, 58%, 32%, 0.18);
--slyd-border-focus: hsla(152, 58%, 32%, 0.5);
--slyd-border-primary: hsla(152, 58%, 32%, 0.22);
--slyd-border-active: hsla(152, 58%, 32%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(152, 58%, 32%, 0.2);
--slyd-shadow-glow-primary: 0 0 30px hsla(152, 58%, 32%, 0.10);
}
/* ===================
MODE TOKENS — Surface kit (Dashboard / Family B per Track 2 §3)
These blocks come after the theme blocks so they win the cascade for
surface tokens that earlier theme-tree iterations duplicated. Specificity
ties on `:root[…]`, so source order decides — and surface tokens are
theme-invariant in V3, so the mode block is the right home.
Dark is the default if no data-mode attribute is present.
=================== */
/* MODE: DARK (default) */
:root[data-mode="dark"],
:root:not([data-mode]) {
color-scheme: dark;
/* BACKGROUNDS — Family B values per spec §3 */
--slyd-bg-body: hsl(229, 84%, 4%);
--slyd-bg-card: hsl(215, 36%, 8%);
--slyd-bg-elevated: hsl(222, 40%, 11%);
--slyd-bg-input: hsl(222, 32%, 14%);
--slyd-bg-sidebar: hsl(224, 44%, 6%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
/* Frosted/overlay surfaces */
--slyd-bg-glass: hsla(215, 36%, 8%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 8%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 4%, 0.8);
--slyd-card-bg: hsla(215, 36%, 8%, 0.6);
--slyd-card-bg-frosted-glass: linear-gradient(140deg, rgba(212, 216, 255, 0.12), rgba(255, 255, 255, 0.02));
--slyd-card-bg-frosted-glass-ng: rgba(255, 255, 255, 0.01);
--slyd-card-bg-solid: hsl(222, 40%, 11%);
--slyd-surface: hsla(215, 36%, 8%, 0.8);
/* Retired legacy aliases — pass through to bg-body so any straggling
* consumer renders identically. Spec §5.4 GAP-13a/b: codemod planned in
* Tier B5. */
--slyd-bg-dark: var(--slyd-bg-body);
--slyd-bg-darker: var(--slyd-bg-body);
--slyd-dark: var(--slyd-bg-body);
--slyd-darker: var(--slyd-bg-body);
/* TEXT */
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 76%);
--slyd-text-tertiary: hsl(215, 18%, 56%);
--slyd-text-muted: hsl(215, 15%, 40%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
/* BORDERS — neutral, mode-aware */
--slyd-border: hsla(0, 0%, 100%, 0.08);
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.045);
--slyd-border-hover: hsla(0, 0%, 100%, 0.16);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
/* SHADOWS — mode-aware aesthetic set (spec §3, V19) */
--slyd-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(0, 0%, 100%, 0.04);
--slyd-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
--slyd-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--slyd-primary-glow);
/* GRID — marketing background grid lines */
--slyd-grid-line: hsla(0, 0%, 100%, 0.04);
}
/* MODE: LIGHT */
:root[data-mode="light"] {
color-scheme: light;
/* BACKGROUNDS — Family B light values per spec §3 */
--slyd-bg-body: hsl(220, 28%, 96%);
--slyd-bg-card: #ffffff;
--slyd-bg-elevated: hsl(220, 24%, 98%);
--slyd-bg-input: hsl(220, 24%, 97%);
--slyd-bg-sidebar: hsl(224, 30%, 99%);
--slyd-bg-card-hover: hsl(220, 24%, 94%);
/* Frosted/overlay surfaces (light derivations per spec §5.4 GAP-13d–h) */
--slyd-bg-glass: hsla(220, 28%, 96%, 0.7);
--slyd-bg-glass-hover: hsla(220, 28%, 96%, 0.9);
--slyd-bg-overlay: hsla(220, 28%, 96%, 0.8);
--slyd-card-bg: hsla(220, 28%, 96%, 0.6);
--slyd-card-bg-frosted-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
--slyd-card-bg-frosted-glass-ng: rgba(255, 255, 255, 0.6);
--slyd-card-bg-solid: hsl(220, 24%, 98%);
--slyd-surface: hsla(220, 28%, 96%, 0.9);
/* Retired aliases pass-through (same rationale as dark block). */
--slyd-bg-dark: var(--slyd-bg-body);
--slyd-bg-darker: var(--slyd-bg-body);
--slyd-dark: var(--slyd-bg-body);
--slyd-darker: var(--slyd-bg-body);
/* TEXT */
--slyd-text-primary: hsl(229, 50%, 8%);
--slyd-text-secondary: hsl(220, 20%, 32%);
--slyd-text-tertiary: hsl(220, 14%, 50%);
--slyd-text-muted: hsl(220, 12%, 66%);
--slyd-text-dark-muted: hsl(220, 20%, 38%);
--slyd-text-inverse: hsl(210, 40%, 96%); /* light text on dark surfaces */
--slyd-text: hsl(229, 50%, 8%);
/* BORDERS */
--slyd-border: hsl(220, 16%, 89%);
--slyd-border-default: hsl(220, 16%, 92%);
--slyd-border-subtle: hsl(220, 18%, 93%);
--slyd-border-hover: hsl(220, 16%, 76%);
--slyd-border-light: hsl(220, 18%, 95%);
/* Reflection: dark-on-light analogue */
--slyd-border-refelection: hsla(220, 30%, 30%, 0.18);
/* SHADOWS — mode-aware aesthetic set */
--slyd-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
--slyd-shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06), 0 0 0 1px hsl(220, 16%, 90%);
--slyd-shadow-hover: 0 12px 32px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--slyd-primary);
/* GRID */
--slyd-grid-line: hsl(220, 16%, 94%);
}
/* ===================
THEME OVERRIDES (Legacy - Class-based)
=================== */
/* Theme: Burnt Orange
Usage: ...
*/
.theme-burnt-orange {
--slyd-primary: hsl(16, 90%, 55%);
--slyd-primary-dark: hsl(16, 85%, 45%);
--slyd-primary-light: hsl(16, 95%, 65%);
--slyd-primary-rgb: 230, 95, 45;
--slyd-primary-soft: hsla(16, 90%, 55%, 0.14);
--slyd-primary-glow: hsla(16, 90%, 55%, 0.30);
--slyd-border-focus: hsla(16, 90%, 55%, 0.5);
--slyd-border-primary: hsla(16, 90%, 55%, 0.2);
--slyd-border-active: hsla(16, 90%, 55%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(16, 90%, 55%, 0.3);
--slyd-shadow-glow-primary: 0 0 30px hsla(16, 90%, 55%, 0.15);
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
}
/* Theme: Sharp Green
Usage: ...
*/
.theme-sharp-green {
--slyd-primary: hsl(142, 76%, 45%);
--slyd-primary-dark: hsl(142, 80%, 35%);
--slyd-primary-light: hsl(142, 70%, 55%);
--slyd-primary-rgb: 28, 200, 100;
--slyd-primary-soft: hsla(142, 76%, 45%, 0.14);
--slyd-primary-glow: hsla(142, 76%, 45%, 0.30);
--slyd-border-focus: hsla(142, 76%, 45%, 0.5);
--slyd-border-primary: hsla(142, 76%, 45%, 0.2);
--slyd-border-active: hsla(142, 76%, 45%, 0.5);
--slyd-shadow-glow: 0 0 20px hsla(142, 76%, 45%, 0.3);
--slyd-shadow-glow-primary: 0 0 30px hsla(142, 76%, 45%, 0.15);
--slyd-info: hsl(199, 89%, 48%);
--slyd-info-light: hsl(199, 89%, 58%);
--slyd-info-bg: hsla(199, 89%, 48%, 0.1);
--slyd-info-rgb: 14, 165, 233;
}
/* ===================
DARK MODE legacy switches (kept for any consumer still using these
class/attr names; superseded by data-mode in the cascade).
=================== */
[data-theme="dark"],
.slyd-dark {
color-scheme: dark;
}
/* ===================
UTILITY CLASSES
=================== */
/* Text utilities */
.slyd-text-primary { color: var(--slyd-primary); }
.slyd-text-secondary { color: var(--slyd-secondary); }
.slyd-text-muted { color: var(--slyd-text-muted); }
.slyd-text-success { color: var(--slyd-success-light); }
.slyd-text-error { color: var(--slyd-error-light); }
.slyd-text-warning { color: var(--slyd-warning); }
.slyd-text-info { color: var(--slyd-info); }
/* Background utilities */
.slyd-bg-primary { background-color: var(--slyd-primary); }
.slyd-bg-card { background-color: var(--slyd-bg-card); }
.slyd-bg-surface { background-color: var(--slyd-surface); }
.slyd-bg-dark { background-color: var(--slyd-bg-dark); }
.slyd-bg-darker { background-color: var(--slyd-bg-darker); }
.slyd-bg-elevated { background-color: var(--slyd-bg-elevated); }
.slyd-bg-input { background-color: var(--slyd-bg-input); }
.slyd-bg-sidebar { background-color: var(--slyd-bg-sidebar); }
/* Border utilities */
.slyd-border { border: 1px solid var(--slyd-border-default); }
.slyd-border-primary { border-color: var(--slyd-primary); }
.slyd-border-subtle { border-color: var(--slyd-border-subtle); }
/* Radius utilities */
.slyd-rounded-sm { border-radius: var(--slyd-radius-sm); }
.slyd-rounded-md { border-radius: var(--slyd-radius-md); }
.slyd-rounded-lg { border-radius: var(--slyd-radius-lg); }
.slyd-rounded-xl { border-radius: var(--slyd-radius-xl); }
.slyd-rounded-full { border-radius: var(--slyd-radius-full); }
/* Shadow utilities */
.slyd-shadow-sm { box-shadow: var(--slyd-shadow-sm); }
.slyd-shadow-md { box-shadow: var(--slyd-shadow-md); }
.slyd-shadow-lg { box-shadow: var(--slyd-shadow-lg); }
.slyd-shadow-glow { box-shadow: var(--slyd-shadow-glow); }
.slyd-shadow-soft { box-shadow: var(--slyd-shadow-soft); }
.slyd-shadow-card { box-shadow: var(--slyd-shadow-card); }
.slyd-shadow-hover { box-shadow: var(--slyd-shadow-hover); }
/* ===================
BREAKPOINTS (for reference)
=================== */
/*
--slyd-breakpoint-sm: 640px;
--slyd-breakpoint-md: 768px;
--slyd-breakpoint-lg: 992px;
--slyd-breakpoint-xl: 1280px;
--slyd-breakpoint-2xl: 1536px;
*/