/** * Little Black Book — Design Tokens * ----------------------------------------------------------------------------- * Single source of truth for colors, spacing, radii, shadows, type. * Every other stylesheet in the theme should reference these vars, never * hardcode a hex / px / font name. * * Usage: * → light palette (DEFAULT) * → dark palette (opt-in via settings) * (unset) → falls back to :root which is light * * The inline boot script in template-parts/head/theme-boot.php sets * data-theme BEFORE styles load, so there is no flash of unthemed content. * ----------------------------------------------------------------------------- */ :root { /* Type */ --lbb-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lbb-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; /* Font sizes — modular scale */ --lbb-text-xs: 0.6875rem; /* 11px — micro labels, eyebrows */ --lbb-text-sm: 0.8125rem; /* 13px — captions, meta */ --lbb-text-base: 0.9375rem; /* 15px — body */ --lbb-text-md: 1rem; /* 16px — prominent body */ --lbb-text-lg: 1.125rem; /* 18px — subhead */ --lbb-text-xl: 1.375rem; /* 22px */ --lbb-text-2xl: 1.75rem; /* 28px — page titles */ --lbb-text-3xl: 2.25rem; /* 36px — hero */ --lbb-text-4xl: 3rem; /* 48px — marketing hero */ /* Weights */ --lbb-weight-regular: 400; --lbb-weight-medium: 500; --lbb-weight-semibold: 600; --lbb-weight-bold: 700; /* Spacing */ --lbb-space-0: 0; --lbb-space-1: 0.25rem; /* 4 */ --lbb-space-2: 0.5rem; /* 8 */ --lbb-space-3: 0.75rem; /* 12 */ --lbb-space-4: 1rem; /* 16 */ --lbb-space-5: 1.25rem; /* 20 */ --lbb-space-6: 1.5rem; /* 24 */ --lbb-space-8: 2rem; /* 32 */ --lbb-space-10: 2.5rem; /* 40 */ --lbb-space-12: 3rem; /* 48 */ --lbb-space-16: 4rem; /* 64 */ /* Radii */ --lbb-radius-sm: 6px; --lbb-radius-md: 10px; --lbb-radius-lg: 14px; --lbb-radius-xl: 18px; --lbb-radius-2xl: 22px; --lbb-radius-pill: 9999px; /* Motion */ --lbb-duration-fast: 150ms; --lbb-duration-normal: 200ms; --lbb-duration-slow: 300ms; --lbb-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* Z */ --lbb-z-base: 0; --lbb-z-raised: 10; --lbb-z-sticky: 100; --lbb-z-overlay: 500; --lbb-z-modal: 1000; --lbb-z-toast: 2000; /* Brand (theme-invariant) ----------------------------------------------- */ --lbb-brand-violet-600: #7c3aed; --lbb-brand-violet-500: #9311d4; --lbb-brand-violet-400: #a78bfa; --lbb-brand-violet-300: #c4b5fd; --lbb-brand-lilac-200: #e879f9; --lbb-brand-gradient: linear-gradient(135deg, #7c3aed 0%, #9311d4 100%); --lbb-brand-gradient-soft:linear-gradient(135deg, #a78bfa 0%, #e879f9 100%); /* Semantic (theme-invariant hues; tints come from theme maps below) ----- */ --lbb-hue-success: #10b981; --lbb-hue-warning: #f59e0b; --lbb-hue-danger: #ef4444; --lbb-hue-info: #3b82f6; /* ----------------------------------------------------------------------- * Default to LIGHT mode (per project decision — Light is the primary * theme, Dark is opt-in via user settings). * ----------------------------------------------------------------------- */ color-scheme: light; --lbb-surface-canvas: #ffffff; --lbb-surface-1: #ffffff; --lbb-surface-2: rgba(255, 255, 255, 0.72); --lbb-surface-raised: #fafafa; --lbb-surface-sunken: #f5f3f8; --lbb-surface-overlay: rgba(17, 10, 26, 0.4); --lbb-surface-glass: rgba(255, 255, 255, 0.78); --lbb-border-subtle: rgba(17, 10, 26, 0.06); --lbb-border-default: rgba(17, 10, 26, 0.1); --lbb-border-strong: rgba(17, 10, 26, 0.2); --lbb-border-accent: rgba(124, 58, 237, 0.2); --lbb-text-primary: #0f0a1a; --lbb-text-body: #1f1533; --lbb-text-muted: #6b5f7c; --lbb-text-subtle: #8b7fa0; --lbb-text-disabled: #c2b8d1; --lbb-text-on-brand: #ffffff; --lbb-text-link: var(--lbb-brand-violet-500); --lbb-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25); --lbb-glow-brand: 0 10px 30px rgba(124, 58, 237, 0.22); --lbb-glow-brand-hover: 0 14px 38px rgba(124, 58, 237, 0.32); --lbb-shadow-sm: 0 1px 2px rgba(17, 10, 26, 0.04); --lbb-shadow-md: 0 6px 16px rgba(17, 10, 26, 0.06); --lbb-shadow-lg: 0 18px 42px rgba(17, 10, 26, 0.1); /* Softer tints for light surfaces */ --lbb-tint-violet-bg: #f1ebff; --lbb-tint-violet-fg: #7c3aed; --lbb-tint-pink-bg: #fde4f2; --lbb-tint-pink-fg: #c026d3; --lbb-tint-amber-bg: #fef3c7; --lbb-tint-amber-fg: #b45309; --lbb-tint-rose-bg: #ffe4e6; --lbb-tint-rose-fg: #be123c; --lbb-tint-emerald-bg: #d1fae5; --lbb-tint-emerald-fg: #047857; --lbb-tint-slate-bg: #eef2f6; --lbb-tint-slate-fg: #475569; } /* ============================================================================= * LIGHT theme — explicit (identical to :root so the toggle can emit any value). * ============================================================================= */ :root[data-theme="light"] { /* identical to :root — kept as a hook for future light-specific tweaks */ } /* ============================================================================= * DARK theme — opt in with * ============================================================================= */ :root[data-theme="dark"] { color-scheme: dark; --lbb-surface-canvas: #09090b; --lbb-surface-1: #18181b; --lbb-surface-2: rgba(24, 24, 27, 0.5); --lbb-surface-raised: #1a1221; --lbb-surface-sunken: #030712; --lbb-surface-overlay: rgba(0, 0, 0, 0.7); --lbb-surface-glass: rgba(9, 9, 11, 0.75); --lbb-border-subtle: rgba(63, 63, 70, 0.5); --lbb-border-default: #27272a; --lbb-border-strong: #3f3f46; --lbb-border-accent: rgba(139, 92, 246, 0.25); --lbb-text-primary: #ffffff; --lbb-text-body: #d4d4d8; --lbb-text-muted: #a1a1aa; --lbb-text-subtle: #71717a; --lbb-text-disabled: #52525b; --lbb-text-on-brand: #ffffff; --lbb-text-link: var(--lbb-brand-violet-400); --lbb-focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.45); --lbb-glow-brand: 0 0 24px rgba(124, 58, 237, 0.35); --lbb-glow-brand-hover: 0 0 32px rgba(124, 58, 237, 0.55); --lbb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --lbb-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45); --lbb-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55); /* Dark tile / feature tints */ --lbb-tint-violet-bg: rgba(139, 92, 246, 0.16); --lbb-tint-violet-fg: #c4b5fd; --lbb-tint-pink-bg: rgba(236, 72, 153, 0.16); --lbb-tint-pink-fg: #f9a8d4; --lbb-tint-amber-bg: rgba(245, 158, 11, 0.16); --lbb-tint-amber-fg: #fcd34d; --lbb-tint-rose-bg: rgba(244, 63, 94, 0.16); --lbb-tint-rose-fg: #fda4af; --lbb-tint-emerald-bg: rgba(16, 185, 129, 0.16); --lbb-tint-emerald-fg: #6ee7b7; --lbb-tint-slate-bg: rgba(148, 163, 184, 0.16); --lbb-tint-slate-fg: #cbd5e1; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --lbb-duration-fast: 0ms; --lbb-duration-normal: 0ms; --lbb-duration-slow: 0ms; } }