/* ========================================================================== TOKENS — single source of truth for the design system. Themes switch via (set pre-paint in ). Breakpoints used across all sheets (mobile-first, min-width): sm 640px · md 768px · lg 1024px · xl 1280px ========================================================================== */ :root { /* ---- Typography ---- */ --font-display: "Clash Display", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Fluid type scale */ --fs-hero: clamp(3rem, 11.5vw, 10.5rem); /* hero name lines */ --fs-tagline: clamp(1.35rem, 2.6vw, 2.1rem); /* hero quote */ --fs-display: clamp(2.6rem, 7vw, 6.5rem); /* contact / menu display */ --fs-h2: clamp(2.2rem, 5vw, 4.5rem); /* section titles */ --fs-h3: clamp(1.5rem, 2.8vw, 2.5rem); /* service / row titles */ --fs-h4: clamp(1.3rem, 2.2vw, 1.85rem); /* card titles */ --fs-stat: clamp(2.75rem, 4.5vw, 4.25rem); /* about stats */ --fs-lead: clamp(1.15rem, 1.7vw, 1.45rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-2xs: 0.75rem; --lh-tight: 0.94; --lh-heading: 1.08; --lh-body: 1.65; --track-caps: 0.14em; /* mono uppercase labels */ --track-tight: -0.02em; /* display headings */ /* ---- Spacing ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(5.5rem, 12vw, 11rem); /* vertical section rhythm */ --head-gap: clamp(2.75rem, 6vw, 4.75rem); /* section head → content */ --gutter: clamp(1.25rem, 2.5vw, 2.5rem); /* ---- Layout ---- */ --container-max: 88rem; --container-pad: clamp(1.25rem, 4.5vw, 4rem); --header-h: 4.5rem; /* ---- Shape ---- */ --radius-sm: 4px; --radius-pill: 999px; /* ---- Motion — mirrors js/core/motion.js exactly. Keep them in sync. ---- Four easings, each with one job; five durations that step ~1.5×. CSS curves are the bezier equivalents of the Anime.js easings so a hover and a scroll reveal feel like the same hand. */ --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* outExpo — arriving */ --ease-adjust: cubic-bezier(0.22, 1, 0.36, 1); /* outQuint — repositioning */ --ease-exit: cubic-bezier(0.55, 0, 1, 0.45); /* inQuad — leaving */ --ease-travel: cubic-bezier(0.83, 0, 0.17, 1); /* inOutQuint — journeys */ --dur-micro: 0.2s; /* hover feedback, state flips */ --dur-fast: 0.4s; /* exits, small corrections */ --dur-base: 0.6s; /* the default move */ --dur-slow: 0.9s; /* reveals */ --dur-epic: 1.2s; /* climax moments */ /* ---- Z-index ---- */ --z-menu: 90; --z-nav: 100; --z-skip: 200; } /* ---- Dark theme (site default) ---------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0a0a0b; --color-surface: #121214; --color-surface-2: #18181c; --color-text: #f4f4f5; --color-text-muted: #9ca0a8; --color-line: rgba(244, 244, 245, 0.1); --color-line-strong: rgba(244, 244, 245, 0.22); --color-accent: #2e5cff; /* graphics only: rules, dots, borders, glows */ --color-accent-ink: #5b86ff; /* ANY blue TEXT — 5.9:1, passes AA at 12px */ --color-accent-deep: #2450e0; /* fills that carry white text (AA) */ --accent-rgb: 46, 92, 255; /* for glows / alpha gradients */ /* Form errors only. Never the sole signal — every error also has text. */ --color-error: #ff7a6b; --grain-opacity: 0.055; } /* ---- Light theme ------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --color-bg: #fafaf8; --color-surface: #ffffff; --color-surface-2: #f0f0ec; --color-text: #0a0a0b; --color-text-muted: #575b63; --color-line: rgba(10, 10, 11, 0.12); --color-line-strong: rgba(10, 10, 11, 0.28); --color-accent: #1f3fd8; --color-accent-ink: #1f3fd8; /* already 7.3:1 on the light ground */ --color-accent-deep: #1a38c8; --accent-rgb: 31, 63, 216; --color-error: #c0392b; --grain-opacity: 0.04; }