/* ============================================================================ CRAFT MY PROTOTYPE — Design Tokens (source of truth for BOTH skins) Ported verbatim from frontend-v1/src/styles/tokens.css. Skin is switched with [data-theme="light"|"dark"] on (see assets/js/app.js). ========================================================================== */ :root, [data-theme="light"] { /* — Workshop Light (warm, premium, conversion-first; never pure #FFF) — */ --canvas: #fcf9f8; --canvas-sunk: #f6f3f2; --card: #ffffff; --raised: #fbfaf9; --border-hair: #ece6e3; --border-strong: #ded6d1; --scrim: rgba(22, 20, 18, 0.55); --ink: #161412; --body: #4d4d4d; --muted: #7a726d; --on-amber: #ffffff; --inverse: #fcf9f8; /* molten amber — the single brand accent, conversion-only */ --amber: #e8590d; --amber-hover: #d24e0a; --amber-pressed: #b8430a; --amber-text: #c24a09; /* amber-as-text, clears 4.5:1 — never use --amber as small text */ --amber-tint: #fdeee4; --amber-tint-border: #f7c9ac; --blue: #2563eb; /* status / links only, never a primary CTA */ --blue-hover: #1d4fd7; --blue-tint: #eaf0fe; --green: #16a34a; /* "Available" / "Quote ready" / success */ --green-tint: #e7f6ed; --warning: #b45309; --warning-tint: #fef3e2; --error: #dc2626; --error-tint: #fcebea; /* warm-tinted shadows (grey shadow on warm canvas looks dirty) */ --shadow-rest: 0 1px 2px rgba(40, 28, 20, 0.05), 0 2px 8px rgba(40, 28, 20, 0.04); --shadow-hover: 0 8px 24px rgba(40, 28, 20, 0.08), 0 2px 6px rgba(40, 28, 20, 0.05); --shadow-sticky: 0 12px 36px rgba(40, 28, 20, 0.1); --amber-glow: 0 6px 20px rgba(232, 89, 13, 0.28); --glass-bg: rgba(252, 249, 248, 0.72); --glass-border: rgba(22, 20, 18, 0.06); --header-bg: rgba(252, 249, 248, 0.985); --grain-opacity: 0.04; --plate-line: rgba(22, 20, 18, 0.05); --neon: var(--amber); color-scheme: light; } [data-theme="dark"] { /* — Premium Dark "lights-off workshop" (warm-black so prints + amber glow) — */ --canvas: #121110; --canvas-sunk: #0e0d0c; --card: #1a1816; --raised: #232019; --border-hair: #2e2a25; --border-strong: #3a352f; --scrim: rgba(0, 0, 0, 0.6); --ink: #f7f3ee; --body: #c7bfb6; --muted: #948b81; --on-amber: #121110; --inverse: #f7f3ee; --amber: #ff6b1a; --amber-hover: #ff8038; --amber-pressed: #e85a0e; --amber-text: #ff8038; --amber-tint: rgba(255, 107, 26, 0.12); --amber-tint-border: rgba(255, 107, 26, 0.4); --blue: #5b9bff; --blue-hover: #7db0ff; --blue-tint: rgba(91, 155, 255, 0.12); --green: #34d399; --green-tint: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-tint: rgba(251, 191, 36, 0.12); --error: #f87171; --error-tint: rgba(248, 113, 113, 0.12); --shadow-rest: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-sticky: 0 12px 36px rgba(0, 0, 0, 0.6); --amber-glow: 0 0 0 1px rgba(255, 107, 26, 0.4), 0 8px 28px rgba(255, 107, 26, 0.35); --glass-bg: rgba(26, 24, 22, 0.62); --glass-border: rgba(255, 255, 255, 0.08); --header-bg: rgba(18, 17, 16, 0.985); --grain-opacity: 0.06; --plate-line: rgba(255, 255, 255, 0.05); --neon: var(--amber); color-scheme: dark; } /* neon-filament accent — one per section in dark (set data-neon on the section wrapper) */ [data-theme="dark"] [data-neon="cyan"] { --neon: #2dd4bf; } [data-theme="dark"] [data-neon="magenta"] { --neon: #f65bd0; } [data-theme="dark"] [data-neon="lime"] { --neon: #a3e635; } [data-theme="dark"] [data-neon="violet"] { --neon: #a78bfa; } /* — skin-independent: radius, spacing, layout, motion — */ :root { --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --r-full: 50%; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --container: 1400px; --container-wide: 1600px; --reading: 720px; --gutter: 24px; /* motion */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-medium: 420ms; --dur-slow: 640ms; --dur-price: 520ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --stagger-tight: 60ms; --stagger-cards: 90ms; --stagger-hero: 120ms; --travel-sm: 8px; --travel-md: 24px; --header-h: 72px; /* font stacks — the var names match the source bridge; actual families are Bricolage Grotesque / Hanken Grotesk / JetBrains Mono (loaded in inc/enqueue.php) */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } @media (min-width: 768px) { :root { --gutter: 36px; } } @media (min-width: 1024px) { :root { --gutter: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }