/* * Neutral design tokens. * * These are the cross-brand primitives: typography ramp, spacing, radii, * shadows, z-index, motion, focus offsets. They are defined once at :root and * never change per brand. * * Brand-specific COLORS, BACKGROUNDS, and FONT FAMILIES live in * /assets/css/brands/*.css and override :root custom properties scoped to the * `.brand--{slug}` class on . The default brand (Story Seed Studios * parent) is applied via /assets/css/brands/sss.css at :root, then sub-brands * (The Dais dark mode, The Map earth tones) override at the body-class scope. */ :root { /* ---- Typography ramp (fluid clamp). Brand files may override --sss-font-* families. ---- */ --sss-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sss-font-body: var(--sss-font-sans); --sss-font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --sss-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sss-step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --sss-step-0: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --sss-step-1: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); --sss-step-2: clamp(1.375rem, 1.30rem + 0.40vw, 1.5rem); --sss-step-3: clamp(1.75rem, 1.60rem + 0.80vw, 2.125rem); --sss-step-4: clamp(2.25rem, 2.00rem + 1.25vw, 3rem); --sss-step-5: clamp(2.75rem, 2.40rem + 1.80vw, 4rem); --sss-line-tight: 1.15; --sss-line-snug: 1.3; --sss-line-base: 1.6; --sss-line-loose: 1.75; --sss-tracking-tight: -0.02em; --sss-tracking-base: 0; --sss-tracking-wide: 0.02em; /* ---- Spacing scale (4px base). ---- */ --sss-space-0: 0; --sss-space-1: 0.25rem; --sss-space-2: 0.5rem; --sss-space-3: 0.75rem; --sss-space-4: 1rem; --sss-space-5: 1.25rem; --sss-space-6: 1.5rem; --sss-space-8: 2rem; --sss-space-10: 2.5rem; --sss-space-12: 3rem; --sss-space-16: 4rem; --sss-space-20: 5rem; --sss-space-24: 6rem; /* ---- Radii. ---- */ --sss-radius-sm: 0.25rem; --sss-radius-md: 0.5rem; --sss-radius-lg: 0.75rem; --sss-radius-xl: 1rem; --sss-radius-pill: 999px; /* ---- Elevation. ---- */ --sss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04); --sss-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --sss-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.08); /* ---- Focus ring. --sss-focus is a color — brand files override it. ---- */ --sss-focus: #2563a0; --sss-focus-width: 2px; --sss-focus-offset: 3px; /* ---- Motion. ---- */ --sss-motion-fast: 120ms; --sss-motion-base: 200ms; --sss-motion-slow: 320ms; --sss-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* ---- Layout / container. ---- */ --sss-container-sm: 36rem; --sss-container-md: 48rem; --sss-container-lg: 64rem; --sss-container-xl: 80rem; /* ---- Z-index layers. ---- */ --sss-z-base: 0; --sss-z-sticky: 100; --sss-z-dropdown: 200; --sss-z-header: 300; --sss-z-overlay: 400; --sss-z-modal: 500; --sss-z-toast: 600; --sss-z-skiplink: 9999; /* ---- Minimum tap target (WCAG 2.5.5 Target Size AA = 24px, AAA = 44px; we pick 48px). ---- */ --sss-tap-target: 48px; } @media (prefers-reduced-motion: reduce) { :root { --sss-motion-fast: 0ms; --sss-motion-base: 0ms; --sss-motion-slow: 0ms; } }