/** * ============================================ * WINKSTER GLOBAL DESIGN SYSTEM * Centralized Theme Variables & Tokens * ============================================ * Usage: Include this file FIRST in all pages. * Theme is controlled via `data-theme` attribute on */ /* ======================================== 1. ROOT VARIABLES - DARK THEME (Default) ======================================== */ :root { /* === Color Palette === */ --color-primary: #E94057; --color-primary-light: #FF6B81; --color-primary-dark: #C4324A; --color-primary-rgb: 233, 64, 87; --color-secondary: #8A2387; --color-secondary-light: #A855F7; --color-accent: #F59E0B; --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; /* === Gradient Presets === */ --gradient-primary: linear-gradient(135deg, #E94057 0%, #8A2387 100%); --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); /* === Typography === */ --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* === Spacing Scale === */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* === Border Radius === */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* === Shadows === */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-glow: 0 0 20px rgba(233, 64, 87, 0.3); /* === Transitions === */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; --transition-theme: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* === Z-Index Scale === */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* === Layout === */ --sidebar-width: 280px; --sidebar-collapsed: 80px; --header-height: 70px; --container-max: 1200px; } /* ======================================== 2. DARK THEME SEMANTIC TOKENS (Default) ======================================== */ :root, [data-theme="dark"] { /* Background Colors */ --bg-body: #050505; --bg-surface: #0A0A0B; --bg-elevated: #121215; --bg-card: #1A1A1F; --bg-card-hover: #222228; --bg-input: #1A1A1F; --bg-overlay: rgba(0, 0, 0, 0.8); /* Glass/Blur Effects */ --bg-glass: rgba(20, 20, 25, 0.7); --bg-glass-border: rgba(255, 255, 255, 0.08); --bg-glass-shine: rgba(255, 255, 255, 0.1); /* Text Colors */ --text-primary: #FFFFFF; --text-secondary: #A1A1AA; --text-muted: #71717A; --text-disabled: #52525B; --text-inverse: #18181B; --text-link: var(--color-primary-light); --text-link-hover: var(--color-primary); /* Border Colors */ --border-default: #27272A; --border-muted: #1F1F23; --border-focus: var(--color-primary); /* Component Specific */ --sidebar-bg: var(--bg-surface); --header-bg: var(--bg-glass); --modal-bg: var(--bg-card); --tooltip-bg: #27272A; --tooltip-text: #FAFAFA; /* Button Variants */ --btn-primary-bg: var(--gradient-primary); --btn-primary-text: #FFFFFF; --btn-secondary-bg: transparent; --btn-secondary-border: var(--border-default); --btn-secondary-text: var(--text-secondary); --btn-ghost-hover: rgba(255, 255, 255, 0.1); /* Form Controls */ --input-bg: var(--bg-input); --input-border: var(--border-default); --input-border-focus: var(--color-primary); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); /* Scrollbar */ --scrollbar-track: var(--bg-surface); --scrollbar-thumb: #3F3F46; --scrollbar-thumb-hover: #52525B; /* Ambient Gradients (Background Accents) */ --ambient-1: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%); --ambient-2: radial-gradient(circle at 90% 80%, rgba(233, 64, 87, 0.1) 0%, transparent 40%); } /* ======================================== 3. LIGHT THEME SEMANTIC TOKENS ======================================== */ [data-theme="light"] { /* Background Colors */ --bg-body: #F8FAFC; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F1F5F9; --bg-input: #F1F5F9; --bg-overlay: rgba(0, 0, 0, 0.5); /* Glass/Blur Effects */ --bg-glass: rgba(255, 255, 255, 0.8); --bg-glass-border: rgba(0, 0, 0, 0.08); --bg-glass-shine: rgba(255, 255, 255, 0.5); /* Text Colors */ --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #71717A; --text-disabled: #A1A1AA; --text-inverse: #FFFFFF; --text-link: var(--color-primary); --text-link-hover: var(--color-primary-dark); /* Border Colors */ --border-default: #E4E4E7; --border-muted: #F4F4F5; --border-focus: var(--color-primary); /* Component Specific */ --sidebar-bg: var(--bg-surface); --header-bg: var(--bg-glass); --modal-bg: var(--bg-card); --tooltip-bg: #18181B; --tooltip-text: #FAFAFA; /* Button Variants */ --btn-primary-bg: var(--gradient-primary); --btn-primary-text: #FFFFFF; --btn-secondary-bg: transparent; --btn-secondary-border: var(--border-default); --btn-secondary-text: var(--text-secondary); --btn-ghost-hover: rgba(0, 0, 0, 0.05); /* Form Controls */ --input-bg: var(--bg-input); --input-border: var(--border-default); --input-border-focus: var(--color-primary); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); /* Scrollbar */ --scrollbar-track: #F1F5F9; --scrollbar-thumb: #CBD5E1; --scrollbar-thumb-hover: #94A3B8; /* Shadows - Lighter for light mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Ambient Gradients (Background Accents) */ --ambient-1: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 40%); --ambient-2: radial-gradient(circle at 90% 80%, rgba(233, 64, 87, 0.06) 0%, transparent 40%); } /* ======================================== 4. GLOBAL RESETS & BASE STYLES ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-primary); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-theme), color var(--transition-theme); } /* Ambient Background Layer */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--ambient-1), var(--ambient-2); pointer-events: none; z-index: -1; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Selection */ ::selection { background: var(--color-primary); color: white; } /* Links */ a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); } /* ======================================== 5. UTILITY CLASSES ======================================== */ /* Text Colors */ .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } .text-accent { color: var(--color-primary) !important; } .text-success { color: var(--color-success) !important; } .text-error { color: var(--color-error) !important; } /* Background Colors */ .bg-body { background-color: var(--bg-body) !important; } .bg-surface { background-color: var(--bg-surface) !important; } .bg-card { background-color: var(--bg-card) !important; } .bg-elevated { background-color: var(--bg-elevated) !important; } /* Gradients */ .bg-gradient-primary { background: var(--gradient-primary) !important; } .bg-gradient-gold { background: var(--gradient-gold) !important; } /* Glass Effect */ .glass { background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--bg-glass-border); } /* Border Utilities */ .border { border: 1px solid var(--border-default); } .border-muted { border: 1px solid var(--border-muted); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Shadow Utilities */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* ======================================== 6. COMPONENT BASE STYLES ======================================== */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; border-radius: var(--radius-lg); border: none; cursor: pointer; transition: all var(--transition-normal); text-decoration: none; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4); filter: brightness(1.1); } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); } .btn-secondary:hover { background: var(--btn-ghost-hover); color: var(--text-primary); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--btn-ghost-hover); color: var(--text-primary); } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border-muted); border-radius: var(--radius-xl); padding: var(--space-6); transition: all var(--transition-normal); } .card:hover { background: var(--bg-card-hover); } .card-elevated { box-shadow: var(--shadow-lg); } /* Form Inputs */ .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea, select { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-primary); font-size: var(--font-size-base); color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-lg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input:focus, input:focus, textarea:focus, select:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--input-placeholder); } /* Labels */ label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); } /* ======================================== 7. THEME TRANSITION ANIMATIONS ======================================== */ /* Smooth transition for all themed elements */ body, .sidebar, .card, .btn, .input, input, textarea, select, .modal, .nav-item, header, footer, main, aside { transition: background-color var(--transition-theme), border-color var(--transition-theme), color var(--transition-theme), box-shadow var(--transition-theme); } /* Disable transitions during theme switch to prevent flicker */ .theme-transitioning * { transition: none !important; } /* ======================================== 8. PRINT STYLES ======================================== */ @media print { :root { --bg-body: white; --text-primary: black; } body::before { display: none; } }