/* ========================================================================== Design Tokens All visual properties are defined here as CSS custom properties. Theme switching is handled by toggling [data-theme] on . ========================================================================== */ :root { /* --- Color Palette ---------------------------------------------------- */ --color-primary-h: 244; --color-primary-s: 98%; --color-primary-l: 60%; --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); --color-primary-hover: hsl(var(--color-primary-h), var(--color-primary-s), 52%); --color-primary-muted: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15); --color-accent-h: 190; --color-accent-s: 100%; --color-accent-l: 50%; --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l)); --color-accent-muted: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.15); --color-success: hsl(152, 68%, 46%); --color-warning: hsl(38, 92%, 55%); --color-danger: hsl(0, 84%, 60%); /* --- Typography ------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.8; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; /* --- Spacing Scale ---------------------------------------------------- */ --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 */ --space-24: 6rem; /* 96px */ /* --- Borders & Radii -------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; --border-width: 1px; /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-glow: 0 0 20px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3); /* --- Transitions ------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; /* --- Layout ----------------------------------------------------------- */ --container-max: 1200px; --container-padding: var(--space-6); --header-height: 72px; --section-padding: var(--space-24); /* --- Z-index Scale ---------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== Dark Theme (default) ========================================================================== */ [data-theme="dark"] { --bg-primary: #0B0B11; --bg-secondary: #12121A; --bg-tertiary: #1A1A26; --surface: rgba(255, 255, 255, 0.03); --surface-hover: rgba(255, 255, 255, 0.06); --surface-active: rgba(255, 255, 255, 0.09); --surface-elevated: rgba(255, 255, 255, 0.05); --border-color: rgba(255, 255, 255, 0.08); --border-color-strong: rgba(255, 255, 255, 0.15); --text-primary: #F0F0F5; --text-secondary: #A0A0B8; --text-tertiary: #6E6E8A; --text-inverse: #0B0B11; --glass-bg: rgba(18, 18, 26, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 16px; --code-bg: rgba(255, 255, 255, 0.06); --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-track: transparent; } /* ========================================================================== Light Theme ========================================================================== */ [data-theme="light"] { --bg-primary: #FAFAFC; --bg-secondary: #F0F0F5; --bg-tertiary: #E6E6EE; --surface: rgba(0, 0, 0, 0.02); --surface-hover: rgba(0, 0, 0, 0.04); --surface-active: rgba(0, 0, 0, 0.06); --surface-elevated: rgba(255, 255, 255, 0.9); --border-color: rgba(0, 0, 0, 0.08); --border-color-strong: rgba(0, 0, 0, 0.15); --text-primary: #1A1A2E; --text-secondary: #52526E; --text-tertiary: #8888A0; --text-inverse: #FAFAFC; --glass-bg: rgba(250, 250, 252, 0.8); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: 16px; --code-bg: rgba(0, 0, 0, 0.04); --scrollbar-thumb: rgba(0, 0, 0, 0.15); --scrollbar-track: transparent; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.12); }