/* ========================================================================== TOKENS — "Machined Light" -------------------------------------------------------------------------- A cool machined-aluminium ground, white surfaces, graphite ink and the same molten-amber heat as the accent. Every value in the system is declared here and nowhere else. Token names are ROLE-based (--c-bg, --c-surface, --c-text), not appearance-based, so a palette can be swapped without the names lying about what they hold. CONTRAST: every text pairing below was verified against WCAG 2.1 AA. The measured ratios are noted inline. Amber splits into two tokens — a fill colour and a darker text colour — because a single amber cannot pass at both small text size and as a button fill. ========================================================================== */ :root { /* ---- Color: ground & surfaces ---------------------------------------- */ --c-bg: #F2F5F8; /* page — cool aluminium paper, not pure white */ --c-surface: #FFFFFF; /* cards, panels, elevated surfaces */ --c-surface-2: #F7F9FB; /* inputs, nested surfaces */ --c-border: #DCE3EA; /* borders, dividers */ --c-border-strong: #B8C3CE; /* hover borders, stronger rules */ /* ---- Color: text ------------------------------------------------------ */ --c-text: #0F151B; /* headings — 16.8:1 on page, 18.4:1 on card */ --c-text-soft: #46525E; /* body — 7.3:1 on page, 8.0:1 on card */ --c-text-muted: #5E6B77; /* meta — 5.0:1 on page, 5.5:1 on card */ /* ---- Color: accents --------------------------------------------------- --c-amber fills, icons, rules, large text (3.3:1 — UI/large only) --c-amber-text amber used as body-size text (5.0:1 — safe any size) Never set small text in --c-amber on a light ground. */ --c-amber: #E8580D; /* primary accent: fills, icons, underlines */ /* Verified on every ground this theme actually produces, worst case being the tinted active panel: page 5.75 · card 6.30 · panel 5.11 · input 5.97. A lighter amber passed on white but failed at 4.43 on the panel tint. */ --c-amber-text: #A83D06; /* amber as readable text */ --c-amber-deep: #8F3305; /* pressed states, gradient anchor */ --c-on-amber: #160A02; /* ink ON an amber fill — 5.4:1 (white fails) */ --c-cyan: #0E7C74; /* secondary accent — 4.6:1 */ --c-red: #C0392B; /* errors — 5.0:1 */ --c-green: #177245; /* open-now indicator — 5.4:1 */ --c-whatsapp: #0F7A39; /* white on this passes at 5.4:1 */ /* ---- Color: alpha utilities ------------------------------------------ Graphite ink at low alpha. On a light ground these read as hairlines and tints; the same scale on dark would need white, which is why they were renamed from --a-ivory-* to --a-ink-*. */ --a-ink-04: rgba(15,21,27,.04); --a-ink-06: rgba(15,21,27,.06); --a-ink-08: rgba(15,21,27,.08); --a-ink-12: rgba(15,21,27,.12); --a-ink-20: rgba(15,21,27,.20); --a-amber-10: rgba(232,88,13,.09); --a-amber-20: rgba(232,88,13,.18); --a-amber-35: rgba(232,88,13,.30); /* ---- Glass ------------------------------------------------------------ On a light ground glass is a frosted WHITE veil, not a dark one. */ --glass-bg: rgba(255,255,255,.72); --glass-bg-2: rgba(255,255,255,.86); --glass-solid: #FFFFFF; /* @supports fallback */ --glass-border: 1px solid var(--a-ink-08); --glass-blur: blur(18px) saturate(150%); /* ---- Depth: multi-layer shadows -------------------------------------- Light-theme shadows are far softer and cooler than dark-theme ones — the same opacities would look like soot. Each level stacks contact + ambient + cast, with a white inset that reads as a machined top edge. */ --sh-1: 0 1px 1px rgba(16,24,32,.04), 0 2px 4px rgba(16,24,32,.05), inset 0 1px 0 rgba(255,255,255,.9); --sh-2: 0 1px 1px rgba(16,24,32,.04), 0 4px 8px rgba(16,24,32,.06), 0 12px 24px rgba(16,24,32,.07), inset 0 1px 0 rgba(255,255,255,.9); --sh-3: 0 1px 1px rgba(16,24,32,.04), 0 4px 8px rgba(16,24,32,.06), 0 12px 24px rgba(16,24,32,.07), 0 32px 56px rgba(16,24,32,.09), inset 0 1px 0 rgba(255,255,255,.9); --sh-amber: 0 2px 8px rgba(232,88,13,.26), 0 10px 24px rgba(232,88,13,.20), inset 0 1px 0 rgba(255,255,255,.30); /* ---- Type ------------------------------------------------------------- */ --f-display: 'Chakra Petch', 'Saira', 'Arial Narrow', system-ui, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --fs-hero: clamp(2.6rem, 6.2vw, 5.6rem); --fs-h1: clamp(2.2rem, 4.6vw, 3.9rem); --fs-h2: clamp(1.75rem, 3.2vw, 2.7rem); --fs-h3: clamp(1.25rem, 1.9vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem); --fs-body: 1rem; /* 16px floor on mobile */ --fs-sm: .875rem; --fs-xs: .78rem; --lh-tight: 1.06; --lh-snug: 1.28; --lh-body: 1.65; --tr-tight: -.02em; --tr-wide: .14em; --measure: 68ch; /* ---- Space (4px base) ------------------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(4rem, 9vw, 8rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --container: 1280px; --container-narrow: 820px; /* ---- Radius ----------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px; /* ---- Motion ----------------------------------------------------------- */ --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 620ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* ---- Z-index scale ---------------------------------------------------- Fixed ladder — no ad-hoc values anywhere in the codebase. */ --z-base: 1; --z-raised: 5; --z-sticky: 10; /* scroll progress */ --z-dropdown: 300; /* nav submenu, tooltips (inside the header) */ --z-mobilebar:400; /* mobile call/whatsapp bar */ --z-overlay: 900; /* mobile nav sheet */ --z-header: 910; /* sticky header — ABOVE the sheet so the close toggle stays clickable while the sheet is open */ --z-topbar: 920; /* sticky utility bar — ABOVE the header so the header slides behind it when it hides on scroll */ --z-modal: 999; /* bio modal, demo popup, lightbox */ --z-toast: 9999; /* ---- Layout constants ------------------------------------------------- */ /* Both bars are sticky, so their heights are load-bearing: scroll-padding, the mobile nav sheet and the sticky split media all measure from them. Mobile-first — responsive.css raises the header at >=768px. */ --h-utilitybar: 36px; --h-header: 62px; /* Decorative background field, tuned per theme */ --field-noise-opacity: .035; --field-glow-opacity: .55; --field-glow-amber: rgba(232,88,13,.16); --field-glow-cyan: rgba(14,124,116,.10); /* Hero photo treatment */ --hero-img-opacity: .30; } /* Focus ring — one definition, used everywhere. */ :root { --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-amber); } /* ========================================================================== OPTIONAL DARK THEME -------------------------------------------------------------------------- The original dark palette, preserved and inert. Nothing here applies unless is set, so the light theme is the only one shipped by default. Kept because it costs nothing and means reverting is a one attribute change rather than a rebuild. ========================================================================== */ :root[data-theme="dark"] { --c-bg: #0A0C0E; --c-surface: #14181C; --c-surface-2: #1A1F24; --c-border: #232A31; --c-border-strong: #2E373F; --c-text: #F2F5F7; --c-text-soft: #A4ADB6; --c-text-muted: #8B959E; --c-amber: #FF6A1A; --c-amber-text: #FF9152; --c-amber-deep: #C24A08; --c-on-amber: #160A02; --c-cyan: #38E1D0; --c-red: #FF6B63; --c-green: #4ADE80; --c-whatsapp: #1FA855; --a-ink-04: rgba(242,245,247,.04); --a-ink-06: rgba(242,245,247,.06); --a-ink-08: rgba(242,245,247,.08); --a-ink-12: rgba(242,245,247,.12); --a-ink-20: rgba(242,245,247,.20); --a-amber-10: rgba(255,106,26,.10); --a-amber-20: rgba(255,106,26,.20); --a-amber-35: rgba(255,106,26,.35); --glass-bg: rgba(20,24,28,.62); --glass-bg-2: rgba(10,12,14,.78); --glass-solid: #12161A; --sh-1: 0 1px 1px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.26), inset 0 1px 0 var(--a-ink-06); --sh-2: 0 1px 1px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 var(--a-ink-06); --sh-3: 0 1px 1px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.28), 0 32px 64px rgba(0,0,0,.24), inset 0 1px 0 var(--a-ink-06); --sh-amber: 0 2px 8px rgba(255,106,26,.24), 0 10px 28px rgba(255,106,26,.20), inset 0 1px 0 rgba(255,255,255,.22); --field-noise-opacity: .04; --field-glow-opacity: .5; --field-glow-amber: rgba(255,106,26,.20); --field-glow-cyan: rgba(56,225,208,.09); --hero-img-opacity: .32; }