/*
* SLYD Design Tokens v0.5.0
* Shared CSS custom properties for consistent theming across all SLYD applications.
*
* Usage in consuming projects:
*
*
* Token Architecture:
* - Core Tokens: Never change (spacing, typography, shadows, transitions, z-index)
* - Theme Tokens: Swappable per theme (all colors)
*
* Theming:
* - Theme selection via data attribute:
* - Default theme: indigo (no attribute or data-slyd-theme="indigo")
*
* 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
------------------------- */
--slyd-radius-xs: 2px;
--slyd-radius-sm: 4px;
--slyd-radius-md: 8px;
--slyd-radius-lg: 12px;
--slyd-radius-xl: 16px;
--slyd-radius-2xl: 20px;
--slyd-radius-full: 9999px;
/* -------------------------
TYPOGRAPHY
------------------------- */
--slyd-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--slyd-font-family-heading: 'Space Grotesk', var(--slyd-font-family);
--slyd-font-family-mono: 'JetBrains Mono', 'Fira Code', '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;
/* -------------------------
SHADOWS
------------------------- */
--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;
}
/* ===================
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;
/* 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-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;
--slyd-info: hsl(239, 84%, 67%);
--slyd-info-light: hsl(235, 93%, 75%);
--slyd-info-bg: hsla(239, 84%, 67%, 0.1);
--slyd-info-rgb: 129, 140, 248;
/* TEXT */
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 84%);
--slyd-text-tertiary: hsl(215, 20%, 65%);
--slyd-text-muted: hsl(215, 16%, 47%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
/* BACKGROUNDS */
--slyd-bg-body: hsl(229, 84%, 5%);
--slyd-bg-dark: hsl(214, 41%, 7%);
--slyd-bg-darker: hsl(217, 57%, 5%);
--slyd-bg-elevated: hsl(222, 47%, 11%);
--slyd-bg-card: hsl(215, 36%, 9%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
--slyd-bg-glass: hsla(215, 36%, 9%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 9%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 5%, 0.8);
--slyd-dark: hsl(214, 41%, 7%);
--slyd-darker: hsl(217, 57%, 5%);
--slyd-card-bg: hsla(215, 36%, 9%, 0.6);
--slyd-card-bg-frosted-glass: linear-gradient(140deg, rgba(212, 216, 255, 0.12), rgba(255, 255, 255, 0.01));
--slyd-card-bg-solid: hsl(222, 47%, 11%);
--slyd-surface: hsla(215, 36%, 9%, 0.8);
/* BORDERS */
--slyd-border-refelection: hsla(239, 60%, 80%, 0.4);
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.04);
--slyd-border-hover: hsla(0, 0%, 100%, 0.12);
--slyd-border-focus: hsla(239, 84%, 67%, 0.5);
--slyd-border-primary: hsla(239, 84%, 67%, 0.2);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-border: hsla(0, 0%, 100%, 0.1);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
--slyd-border-active: hsla(239, 84%, 67%, 0.5);
/* SHADOW GLOWS */
--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);
}
/* =========================================================
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;
/* 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-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;
--slyd-info: hsl(186, 94%, 43%);
--slyd-info-light: hsl(188, 86%, 53%);
--slyd-info-bg: hsla(186, 94%, 43%, 0.1);
--slyd-info-rgb: 6, 182, 212;
/* TEXT */
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 84%);
--slyd-text-tertiary: hsl(215, 20%, 65%);
--slyd-text-muted: hsl(215, 16%, 47%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
/* BACKGROUNDS */
--slyd-bg-body: hsl(229, 84%, 5%);
--slyd-bg-dark: hsl(214, 41%, 7%);
--slyd-bg-darker: hsl(217, 57%, 5%);
--slyd-bg-elevated: hsl(222, 47%, 11%);
--slyd-bg-card: hsl(215, 36%, 9%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
--slyd-bg-glass: hsla(215, 36%, 9%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 9%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 5%, 0.8);
--slyd-dark: hsl(214, 41%, 7%);
--slyd-darker: hsl(217, 57%, 5%);
--slyd-card-bg: hsla(215, 36%, 15%, 0.3);
--slyd-card-bg-frosted-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
--slyd-card-bg-solid: hsl(222, 47%, 11%);
--slyd-surface: hsla(215, 36%, 9%, 0.8);
/* BORDERS */
--slyd-border-refelection: linear-gradient(90deg, var(--slyd-secondary-light), rgba(255, 255, 255, 0.01));
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.04);
--slyd-border-hover: hsla(0, 0%, 100%, 0.12);
--slyd-border-focus: hsla(186, 94%, 43%, 0.5);
--slyd-border-primary: hsla(186, 94%, 43%, 0.2);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-border: hsla(0, 0%, 100%, 0.1);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
--slyd-border-active: hsla(186, 94%, 43%, 0.5);
/* SHADOW GLOWS */
--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);
}
/* =========================================================
THEME: BLACK + BRASS
Applied when data-slyd-theme="black-brass"
========================================================= */
:root[data-slyd-theme="black-brass"] {
--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-secondary: hsl(215, 14%, 42%);
--slyd-secondary-dark: hsl(215, 16%, 34%);
--slyd-secondary-light: hsl(215, 14%, 56%);
--slyd-secondary-rgb: 88, 101, 117;
--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-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: var(--slyd-primary);
--slyd-info-light: var(--slyd-primary-light);
--slyd-info-bg: hsla(38, 45%, 52%, 0.12);
--slyd-info-rgb: 168, 142, 97;
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 84%);
--slyd-text-tertiary: hsl(215, 20%, 65%);
--slyd-text-muted: hsl(215, 16%, 47%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
--slyd-bg-body: hsl(229, 84%, 5%);
--slyd-bg-dark: hsl(214, 41%, 7%);
--slyd-bg-darker: hsl(217, 57%, 5%);
--slyd-bg-elevated: hsl(222, 47%, 11%);
--slyd-bg-card: hsl(215, 36%, 9%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
--slyd-bg-glass: hsla(215, 36%, 9%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 9%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 5%, 0.8);
--slyd-dark: hsl(214, 41%, 7%);
--slyd-darker: hsl(217, 57%, 5%);
--slyd-card-bg: hsla(215, 36%, 9%, 0.6);
--slyd-card-bg-solid: hsl(222, 47%, 11%);
--slyd-surface: hsla(215, 36%, 9%, 0.8);
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.04);
--slyd-border-hover: hsla(0, 0%, 100%, 0.12);
--slyd-border-focus: hsla(38, 45%, 52%, 0.55);
--slyd-border-primary: hsla(38, 45%, 52%, 0.22);
--slyd-border-gold: hsla(43, 90%, 56%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-border: hsla(0, 0%, 100%, 0.1);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
--slyd-border-active: hsla(38, 45%, 52%, 0.55);
--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);
}
/* =========================================================
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-secondary: hsl(210, 22%, 58%);
--slyd-secondary-dark: hsl(210, 22%, 48%);
--slyd-secondary-light: hsl(210, 22%, 68%);
--slyd-secondary-rgb: 124, 149, 172;
--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-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: var(--slyd-primary);
--slyd-info-light: var(--slyd-primary-light);
--slyd-info-bg: hsla(222, 55%, 52%, 0.12);
--slyd-info-rgb: 60, 96, 206;
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 84%);
--slyd-text-tertiary: hsl(215, 20%, 65%);
--slyd-text-muted: hsl(215, 16%, 47%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
--slyd-bg-body: hsl(229, 84%, 5%);
--slyd-bg-dark: hsl(214, 41%, 7%);
--slyd-bg-darker: hsl(217, 57%, 5%);
--slyd-bg-elevated: hsl(222, 47%, 11%);
--slyd-bg-card: hsl(215, 36%, 9%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
--slyd-bg-glass: hsla(215, 36%, 9%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 9%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 5%, 0.8);
--slyd-dark: hsl(214, 41%, 7%);
--slyd-darker: hsl(217, 57%, 5%);
--slyd-card-bg: hsla(215, 36%, 9%, 0.6);
--slyd-card-bg-solid: hsl(222, 47%, 11%);
--slyd-surface: hsla(215, 36%, 9%, 0.8);
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.04);
--slyd-border-hover: hsla(0, 0%, 100%, 0.12);
--slyd-border-focus: hsla(222, 55%, 52%, 0.55);
--slyd-border-primary: hsla(222, 55%, 52%, 0.22);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-border: hsla(0, 0%, 100%, 0.1);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
--slyd-border-active: hsla(222, 55%, 52%, 0.55);
--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);
}
/* =========================================================
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-secondary: hsl(215, 16%, 46%);
--slyd-secondary-dark: hsl(215, 20%, 36%);
--slyd-secondary-light: hsl(215, 18%, 60%);
--slyd-secondary-rgb: 71, 85, 105;
--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-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: var(--slyd-primary);
--slyd-info-light: var(--slyd-primary-light);
--slyd-info-bg: hsla(152, 55%, 42%, 0.12);
--slyd-info-rgb: 48, 166, 124;
--slyd-text-primary: hsl(210, 40%, 96%);
--slyd-text-secondary: hsl(213, 27%, 84%);
--slyd-text-tertiary: hsl(215, 20%, 65%);
--slyd-text-muted: hsl(215, 16%, 47%);
--slyd-text-dark-muted: hsl(215, 19%, 35%);
--slyd-text-inverse: hsl(229, 84%, 5%);
--slyd-text: hsl(210, 40%, 96%);
--slyd-bg-body: hsl(229, 84%, 5%);
--slyd-bg-dark: hsl(214, 41%, 7%);
--slyd-bg-darker: hsl(217, 57%, 5%);
--slyd-bg-elevated: hsl(222, 47%, 11%);
--slyd-bg-card: hsl(215, 36%, 9%);
--slyd-bg-card-hover: hsl(218, 42%, 13%);
--slyd-bg-glass: hsla(215, 36%, 9%, 0.5);
--slyd-bg-glass-hover: hsla(215, 36%, 9%, 0.8);
--slyd-bg-overlay: hsla(229, 84%, 5%, 0.8);
--slyd-dark: hsl(214, 41%, 7%);
--slyd-darker: hsl(217, 57%, 5%);
--slyd-card-bg: hsla(215, 36%, 9%, 0.6);
--slyd-card-bg-solid: hsl(222, 47%, 11%);
--slyd-surface: hsla(215, 36%, 9%, 0.8);
--slyd-border-default: hsla(0, 0%, 100%, 0.06);
--slyd-border-subtle: hsla(0, 0%, 100%, 0.04);
--slyd-border-hover: hsla(0, 0%, 100%, 0.12);
--slyd-border-focus: hsla(152, 55%, 42%, 0.55);
--slyd-border-primary: hsla(152, 55%, 42%, 0.22);
--slyd-border-gold: hsla(38, 92%, 50%, 0.3);
--slyd-border-purple: hsla(258, 90%, 66%, 0.2);
--slyd-border: hsla(0, 0%, 100%, 0.1);
--slyd-border-light: hsla(0, 0%, 100%, 0.05);
--slyd-border-active: hsla(152, 55%, 42%, 0.55);
--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);
}
/* ===================
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-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(16, 90%, 55%);
--slyd-info-light: hsl(16, 95%, 65%);
--slyd-info-bg: hsla(16, 90%, 55%, 0.1);
--slyd-info-rgb: 230, 95, 45;
}
/* 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-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(142, 76%, 45%);
--slyd-info-light: hsl(142, 70%, 55%);
--slyd-info-bg: hsla(142, 76%, 45%, 0.1);
--slyd-info-rgb: 28, 200, 100;
}
/* ===================
DARK MODE (default for SLYD)
=================== */
[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); }
/* 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); }
/* ===================
BREAKPOINTS (for reference)
=================== */
/*
--slyd-breakpoint-sm: 640px;
--slyd-breakpoint-md: 768px;
--slyd-breakpoint-lg: 992px;
--slyd-breakpoint-xl: 1280px;
--slyd-breakpoint-2xl: 1536px;
*/