/** * DrummerTube CSS Variables * * Centralized color palette and design tokens for the entire theme. * Import this file in all CSS files to maintain consistency. * * @package DrummerTube * @since 2.3.0 */ :root { /* ========================================================================== PRIMARY COLORS ========================================================================== */ /* Accent - Primary brand color (cyan) */ --dt-accent: #00F0FF; --dt-accent-hover: #00d4e0; --dt-accent-light: #00e0ff; --dt-accent-rgb: 0, 240, 255; /* ========================================================================== BACKGROUND COLORS ========================================================================== */ /* Page backgrounds (darkest to lighter) */ --dt-bg-darkest: #0a0a0a; --dt-bg-dark: #111418; --dt-bg-base: #1a1a1a; --dt-bg-elevated: #1c1d1f; --dt-bg-card: #1f1f1f; --dt-bg-card-alt: #24272E; --dt-bg-input: #232323; --dt-bg-hover: rgba(255, 255, 255, 0.05); --dt-bg-hover-strong: rgba(255, 255, 255, 0.1); /* ========================================================================== TEXT COLORS ========================================================================== */ --dt-text-primary: #ffffff; --dt-text-secondary: #ddd; --dt-text-muted: #888; --dt-text-subtle: #666; --dt-text-hint: #9ca3af; --dt-text-dark: #1c1d1f; --dt-text-dark-secondary: #212121; /* Specific muted text variations */ --dt-text-muted-light: #ccc; --dt-text-muted-cool: #8fa0a6; --dt-text-muted-warm: #cfd8dc; /* ========================================================================== BORDER COLORS ========================================================================== */ --dt-border-dark: #20262b; --dt-border-base: #2a2a2a; --dt-border-light: #333; --dt-border-lighter: #2d2e32; --dt-border-lightest: #CAC9C8; --dt-border-white: #eee; --dt-border-input: #555; /* ========================================================================== SEMANTIC COLORS ========================================================================== */ /* Success */ --dt-success: #00cc66; --dt-success-rgb: 0, 204, 102; /* Error */ --dt-error: #ff4444; --dt-error-light: #ff6666; --dt-error-rgb: 255, 68, 68; /* Warning */ --dt-warning: #ffaa00; --dt-warning-rgb: 255, 170, 0; /* Info (uses accent) */ --dt-info: var(--dt-accent); /* ========================================================================== BUTTON COLORS ========================================================================== */ --dt-btn-primary-bg: var(--dt-accent); --dt-btn-primary-text: #000; --dt-btn-primary-hover: var(--dt-accent-hover); --dt-btn-secondary-bg: transparent; --dt-btn-secondary-text: var(--dt-text-primary); --dt-btn-secondary-border: var(--dt-border-lighter); --dt-btn-cta-bg: #ffc000; --dt-btn-cta-text: #000; --dt-btn-cta-border: #ffc000; /* ========================================================================== OVERLAY COLORS ========================================================================== */ --dt-overlay-dark: rgba(0, 0, 0, 0.6); --dt-overlay-light: rgba(255, 255, 255, 0.05); --dt-overlay-accent: rgba(0, 240, 255, 0.1); --dt-overlay-accent-strong: rgba(0, 240, 255, 0.15); /* ========================================================================== DROPDOWN/PANEL COLORS ========================================================================== */ --dt-dropdown-bg: #ffffff; --dt-dropdown-text: #1c1d1f; --dt-dropdown-border: #f0f0f0; --dt-dropdown-hover: #f5f5f5; --dt-dropdown-shadow: rgba(0, 0, 0, 0.3); /* ========================================================================== SHADOWS ========================================================================== */ --dt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --dt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2); --dt-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3); --dt-shadow-panel: -4px 0 20px rgba(0, 0, 0, 0.4); /* ========================================================================== TYPOGRAPHY ========================================================================== */ --dt-font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; --dt-font-mono: "SF Mono", Monaco, Consolas, monospace; /* ========================================================================== SPACING (reference values) ========================================================================== */ --dt-spacing-xs: 4px; --dt-spacing-sm: 8px; --dt-spacing-md: 16px; --dt-spacing-lg: 24px; --dt-spacing-xl: 32px; --dt-spacing-2xl: 48px; /* ========================================================================== BORDER RADIUS ========================================================================== */ --dt-radius-sm: 4px; --dt-radius-md: 8px; --dt-radius-lg: 12px; --dt-radius-xl: 16px; --dt-radius-2xl: 20px; --dt-radius-pill: 50px; --dt-radius-circle: 50%; /* ========================================================================== TRANSITIONS ========================================================================== */ --dt-transition-fast: 150ms ease; --dt-transition-base: 200ms ease; --dt-transition-slow: 300ms ease; /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --dt-z-dropdown: 100; --dt-z-sticky: 500; --dt-z-header: 1000; --dt-z-overlay: 5000; --dt-z-modal: 10000; } /* ========================================================================== DARK THEME (default, explicit) ========================================================================== */ [data-theme="dark"], .dark-theme { /* All variables above are dark theme by default */ } /* ========================================================================== COMPONENT-SPECIFIC VARIABLE ALIASES These provide semantic names for specific components ========================================================================== */ :root { /* Header component (mirrors dt-header-* from header-menu.css) */ --dt-header-bg: var(--dt-bg-elevated); --dt-header-border: var(--dt-border-lighter); --dt-header-text: var(--dt-text-primary); --dt-header-text-muted: var(--dt-text-hint); --dt-header-accent: var(--dt-accent); --dt-header-accent-hover: var(--dt-accent-hover); /* Form inputs */ --dt-input-bg: var(--dt-bg-card-alt); --dt-input-border: var(--dt-border-light); --dt-input-text: var(--dt-text-primary); --dt-input-placeholder: var(--dt-text-muted); --dt-input-focus-border: var(--dt-accent); --dt-input-focus-shadow: 0 0 0 3px rgba(var(--dt-accent-rgb), 0.15); /* Cards */ --dt-card-bg: var(--dt-bg-card); --dt-card-border: var(--dt-border-light); --dt-card-radius: var(--dt-radius-2xl); /* Song elements */ --dt-song-card-bg: var(--dt-bg-card-alt); /* Filters (Jet Smart Filters) */ --dt-filter-bg: var(--dt-bg-base); --dt-filter-border: var(--dt-border-light); --dt-filter-checked: var(--dt-accent); /* Autocomplete/search */ --dt-search-bg: var(--dt-bg-base); --dt-search-border: var(--dt-border-light); --dt-search-results-bg: var(--dt-bg-card); /* Progress/status */ --dt-progress-active: var(--dt-accent); --dt-progress-completed: var(--dt-success); --dt-progress-none: var(--dt-text-muted); /* ========================================================================== RESPONSIVE BREAKPOINT REFERENCE Note: CSS custom properties cannot be used in media queries. These values are documented here for consistency across the codebase. xs: 360px - Extra small mobile (iPhone SE) sm: 480px - Small mobile md: 768px - Tablet portrait lg: 1024px - Tablet landscape / small desktop xl: 1280px - Desktop 2xl: 1440px - Large desktop ========================================================================== */ /* ========================================================================== FLUID TYPOGRAPHY SCALE Uses clamp() for smooth scaling between breakpoints. Format: clamp(min, preferred, max) ========================================================================== */ --dt-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --dt-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --dt-text-base: clamp(1rem, 0.925rem + 0.4vw, 1.125rem); --dt-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --dt-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); --dt-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --dt-text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.625rem); --dt-text-4xl: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); --dt-text-5xl: clamp(3rem, 2.25rem + 3vw, 4.5rem); /* ========================================================================== FLUID SPACING Responsive spacing that scales smoothly with viewport. ========================================================================== */ --dt-space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem); --dt-space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); --dt-space-fluid-md: clamp(1rem, 0.8rem + 1vw, 1.5rem); --dt-space-fluid-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); --dt-space-fluid-xl: clamp(2rem, 1.5rem + 2vw, 3rem); --dt-space-fluid-2xl: clamp(3rem, 2.25rem + 3vw, 4.5rem); /* ========================================================================== CONTAINER WIDTHS Max-width values for centered content containers. ========================================================================== */ --dt-container-sm: 540px; --dt-container-md: 720px; --dt-container-lg: 960px; --dt-container-xl: 1140px; --dt-container-2xl: 1320px; --dt-container-padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); }