/* ============================================================================ DESIGN TOKEN CONTRACT Every component consumes these custom-property names. [data-scheme] overrides only the color roles; [data-style] overrides type/radius/shadow/motion. The values here are neutral fallbacks. ============================================================================ */ :root { /* ---- color roles (overridden by [data-scheme]) ---- */ --c-bg: #ffffff; --c-surface: #f7f7f5; --c-surface-2: #efeeea; --c-text: #1a1a1a; --c-text-muted: #5b5b5b; --c-border: #e2e1dc; --c-primary: #1f4b8a; --c-primary-contrast: #ffffff; --c-accent: #c8962b; --c-success: #2e7d32; --c-warn: #b26a00; --c-danger: #b3261e; /* derived depth tokens (auto-adapt to every [data-scheme]) */ --c-primary-soft: color-mix(in srgb, var(--c-primary) 16%, var(--c-bg)); --c-bg-2: color-mix(in srgb, var(--c-surface) 55%, var(--c-bg)); --c-elev: color-mix(in srgb, var(--c-surface) 45%, var(--c-bg)); /* ---- control-panel knobs (set inline on by PHP / panel.js) ---- */ --den: 1; /* density multiplier (panel: spaced…dense) */ --wlre-sec: 1; /* section-spacing multiplier */ --wlre-gap: 1; /* grid-gap multiplier */ --wlre-type-mult: 1; /* global type-size multiplier */ --card-shadow: var(--shadow-1); /* ---- typography (family / scale overridden by [data-style]) ---- */ --font-display: Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --type-scale: 1.25; /* modular scale ratio */ --fs-base: calc(1rem * var(--wlre-type-mult, 1)); --fs-sm: calc(var(--fs-base) / var(--type-scale)); --fs-lg: calc(var(--fs-base) * var(--type-scale)); --fs-xl: calc(var(--fs-lg) * var(--type-scale)); --fs-2xl: calc(var(--fs-xl) * var(--type-scale)); --fs-3xl: calc(var(--fs-2xl) * var(--type-scale)); --lh-tight: 1.1; --lh-body: 1.6; /* ---- spacing (8pt grid) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- radius / shadow / borders (overridden by [data-style]) ---- */ --radius: 8px; --radius-sm: max(2px, calc(var(--radius) * .5)); --radius-lg: calc(var(--radius) * 1.75); --radius-pill: 999px; --border-w: 1px; --shadow-0: none; --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.07); --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.10); --shadow-3: 0 4px 12px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.16); --shadow-4: 0 8px 20px rgba(0,0,0,.10), 0 30px 70px rgba(0,0,0,.24); /* ---- layout ---- wide = near-edge-to-edge (no px cap); full = literally 100%; narrow = a readable column. The fluid gutter is the only breathing room. */ --container-narrow: min(1280px, 92vw); --container-wide: 98vw; --container-full: 100%; --gutter: clamp(0.75rem, 1.8vw, 2rem); /* ---- motion (overridden by [data-style]) ---- */ --ease-base: cubic-bezier(.16,.84,.3,1); /* slow, elegant ease-out */ --ease-spring: cubic-bezier(.34,1.4,.5,1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-reveal: 800ms; /* scroll-reveal transition */ --motion-scale: 1; /* amplitude / reveal-distance multiplier */ --reveal-dist: calc(30px * var(--motion-scale)); } /* Reduced motion: keep gentle UI feedback (fades, small lifts, colour shifts) but damp the amplitude. Genuinely disorienting motion (parallax, ken-burns, infinite loops) is suppressed separately in anim.css's @media (prefers-reduced-motion) blocks. A visitor who wants everything still can turn it off in the ⚙ panel (data-motion="off"). */ @media (prefers-reduced-motion: reduce) { :root { --motion-scale: .5; --reveal-dist: 10px; } } html[data-motion="off"]{ --motion-scale: 0 !important; --reveal-dist: 0px !important; }