/* * Design tokens (v1). Source: design-tokens.md. * Loaded before main.css (see inc/enqueue.php) so every other stylesheet * can consume these custom properties instead of hardcoding values. * * Dark mode activates two ways: automatically via prefers-color-scheme, * or explicitly via a data-theme="dark"/"light" attribute on (set * by the inline snippet in header.php and toggleable via * [data-theme-toggle] — see assets/js/main.js). The explicit attribute * always wins over the system preference. */ :root { /* 1.1 Brand */ --color-primary: #FF6B00; --color-primary-hover: #E65F00; --color-primary-active: #CC5400; --color-primary-light: #FFE8D6; --color-primary-subtle: #FFF3EA; --color-secondary: #111111; --color-secondary-hover: #2A2A2A; --color-accent: #7C3AED; --color-accent-hover: #6D28D9; --color-accent-light: #EDE4FD; /* 1.2 Neutral scale */ --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E5E5E5; --gray-300: #D4D4D4; --gray-400: #A3A3A3; --gray-500: #737373; --gray-600: #525252; --gray-700: #404040; --gray-800: #262626; --gray-900: #111111; /* 1.3 Semantic colors */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-warning: #F59E0B; --color-warning-light: #FEF3C7; --color-error: #DC2626; --color-error-light: #FEE2E2; --color-info: #2563EB; --color-info-light: #DBEAFE; /* 1.4 Surfaces & text */ --bg-page: #FFFFFF; --bg-surface: #FAFAFA; --bg-surface-raised: #FFFFFF; --bg-muted: #F5F5F5; --text-primary: #111111; --text-secondary: #525252; --text-disabled: #A3A3A3; --text-inverse: #FFFFFF; --text-link: #FF6B00; --text-link-hover: #E65F00; --border-default: #E5E5E5; --border-strong: #D4D4D4; --border-focus: #FF6B00; --border-error: #DC2626; /* 2. Typography */ --font-display: "Sora", "Poppins", sans-serif; --font-body: "Inter", -apple-system, sans-serif; --font-mono: "JetBrains Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-hero: clamp(2rem, 1.2rem + 3.5vw, 3.75rem); --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* 3. Spacing (4px base unit) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* 4. Radius */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* 5. Elevation */ --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06); --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.08); --shadow-lg: 0 8px 24px rgba(17, 17, 17, 0.12); --shadow-xl: 0 16px 40px rgba(17, 17, 17, 0.16); --shadow-primary-glow: 0 4px 20px rgba(255, 107, 0, 0.25); --shadow-accent-glow: 0 4px 20px rgba(124, 58, 237, 0.25); /* 6. Motion */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 7. Breakpoints & containers (also mirrored as custom properties for JS/reference use — CSS media queries can't consume var() in their condition, so component CSS must hardcode the same pixel values). */ --bp-xs: 0px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --container-narrow: 640px; --container-default: 1120px; --container-wide: 1320px; /* 8. Z-index scale */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* 9. Accessibility */ --focus-ring: 0 0 0 3px rgba(255, 107, 0, 0.4); --min-tap-target: 44px; } /* 1.5 Dark mode — system preference (loses to an explicit data-theme). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-page: #111111; --bg-surface: #1A1A1A; --bg-surface-raised: #222222; --bg-muted: #2A2A2A; --text-primary: #FAFAFA; --text-secondary: #A3A3A3; --text-disabled: #737373; --text-inverse: #111111; --border-default: #2A2A2A; --border-strong: #404040; --color-primary: #FF7A1A; --color-primary-hover: #FF8A38; --color-accent: #9061F9; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } } /* 1.5 Dark mode — explicit override, always wins over system preference. */ :root[data-theme="dark"] { --bg-page: #111111; --bg-surface: #1A1A1A; --bg-surface-raised: #222222; --bg-muted: #2A2A2A; --text-primary: #FAFAFA; --text-secondary: #A3A3A3; --text-disabled: #737373; --text-inverse: #111111; --border-default: #2A2A2A; --border-strong: #404040; --color-primary: #FF7A1A; --color-primary-hover: #FF8A38; --color-accent: #9061F9; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }