/* Atolyeman design tokens — the single source of truth for color, type, spacing. Per-audience "segments" override a small subset of these to re-skin the whole storefront without touching layout. The atolyeman-segments plugin adds an `aud-*` class to ; the overrides below cascade from there. */ :root { /* Neutrals — warm, natural-material inspired */ --at-bg: #faf8f5; --at-surface: #ffffff; --at-surface-2: #f2efe9; --at-text: #1c1a17; --at-text-muted: #6b6560; --at-border: #e5e0d8; /* Inverted / dark section surface — used by bands that flip to a dark mood (newsletter, future dark blocks). Constant across segments so a dark band stays dark; only the accent keeps morphing over it. */ --at-ink: #1f1c18; --at-on-dark: #f4f1ea; --at-on-dark-muted: rgba(244, 241, 234, .62); --at-on-dark-border: rgba(244, 241, 234, .16); /* Accent (default / general audience) */ --at-accent: #8a6d4b; /* warm oak / walnut */ --at-accent-hover: #6f5638; --at-on-accent: #ffffff; /* Typography */ --at-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --at-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale trimmed ~10-15% (2026-07-22) for a tighter, Flying Tiger-style feel; Poppins runs visually larger than the old Fraunces at equal px. */ --at-fs-100: 0.78125rem; --at-fs-200: 0.875rem; --at-fs-300: 0.9375rem; --at-fs-400: 1.125rem; --at-fs-500: 1.5rem; --at-fs-600: 2rem; --at-fs-700: 2.75rem; --at-lh-tight: 1.15; --at-lh-body: 1.6; /* Spacing scale */ --at-space-1: 0.25rem; --at-space-2: 0.5rem; --at-space-3: 0.75rem; --at-space-4: 1rem; --at-space-6: 1.5rem; --at-space-8: 2rem; --at-space-12: 3rem; --at-space-16: 4rem; /* Radius, shadow, layout */ --at-radius-sm: 6px; --at-radius: 12px; --at-radius-lg: 20px; --at-shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 8px 24px rgba(28, 26, 23, .06); --at-container: 1280px; } /* ---- Audience morphing -------------------------------------------------- Each segment re-skins accent + surface mood (and, where it fits the audience, geometry) while layout stays identical. Expanded in Phase 4. */ body.aud-personal { --at-accent: #6d8a76; /* soft sage — cozy, domestic */ --at-accent-hover: #55705d; --at-bg: #f7f6f2; } body.aud-professional { --at-accent: #3f6d8a; /* steel blue — technical, robust */ --at-accent-hover: #2f5468; --at-bg: #f4f5f6; --at-surface-2: #eceef0; --at-radius: 6px; /* squarer, more utilitarian */ --at-radius-lg: 10px; } body.aud-maker { --at-accent: #b4552d; /* energetic terracotta — maker / creative */ --at-accent-hover: #94421f; --at-bg: #faf6f1; }