/* ────────────────────────────────────────────────────────────── JMJ Consultancy - Design tokens A builder/automation identity (dark · indigo · mono), governed by the JMJ Experiences craft DNA: editorial whitespace, hairline borders, whisper shadows, fades-only motion on the same easing. ──────────────────────────────────────────────────────────── */ /* ── Inter (sans · body, UI, display) ── Loaded via Google Fonts in the HTML (keeps this an asset-light import). To self-host instead: drop the Inter *.ttf files into jmj/fonts/ and restore the eight @font-face rules pointing at fonts/Inter-*.ttf. ── */ :root { /* ── Palette · cool neutrals + one indigo accent ───────────── */ --paper: #FBFBFD; /* primary canvas (near-white) */ --paper-2: #F3F4F7; /* secondary surface */ --paper-3: #ECEDF1; /* hovered / inset surface */ --line: rgba(10,10,11,0.10); /* hairline border */ --line-2: rgba(10,10,11,0.06); /* faintest rule */ --line-strong: rgba(10,10,11,0.18); --ink: #0A0A0B; /* true-black ink (display, body) */ --ink-2: #3A3B40; /* secondary text */ --ink-3: #6B6D76; /* tertiary text, labels */ --ink-4: #9A9CA4; /* quiet captions */ --spotlight: #08080A; /* dark "spotlight" section canvas */ --spotlight-2: #111114; /* elevated surface on dark */ --spotlight-3: #18181C; /* card on dark */ --on-dark: #F4F4F6; /* primary text on dark */ --on-dark-2: #A6A7AE; /* secondary text on dark */ --on-dark-3: #8A8C95; /* tertiary on dark (WCAG AA ~5.9:1 on #08080A) */ --line-on-dark: rgba(255,255,255,0.10); --line-on-dark-2: rgba(255,255,255,0.06); /* ── The one accent · warm crimson (toggle to indigo in Tweaks) ── */ --accent: #D6392C; --accent-bright:#DD594E; /* glows, dots, hover on dark */ --accent-press: #B43025; --accent-soft: rgba(214,57,44,0.10); /* tint fills on light */ --accent-soft-d:rgba(221,89,78,0.16); /* tint fills on dark */ --accent-line: rgba(214,57,44,0.30); /* ── Type families ────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── Type scale (bold, confident, product-grade) ──────────── */ --fs-display: clamp(52px, 8.4vw, 132px); /* hero */ --fs-h1: clamp(40px, 5.6vw, 84px); --fs-h2: clamp(32px, 4.4vw, 60px); --fs-h3: clamp(25px, 2.8vw, 38px); --fs-h4: clamp(21px, 2.0vw, 27px); --fs-lede: clamp(19px, 1.7vw, 24px); --fs-body-lg: 19px; --fs-body: 17px; --fs-body-sm: 15px; --fs-mono: 13px; --fs-mono-sm: 12px; --fs-eyebrow: 12px; --lh-display: 0.96; --lh-heading: 1.06; --lh-snug: 1.3; --lh-body: 1.62; --tr-display: -0.03em; --tr-tight: -0.02em; --tr-eyebrow: 0.26em; --tr-mono: 0.02em; /* ── Spacing (8px scale, used at the upper end) ───────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 200px; /* section vertical rhythm, responsive */ --section-y: clamp(80px, 11vw, 168px); /* ── Radii (product-grade, still restrained) ──────────────── */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px; /* ── Shadows (whisper-soft, cool) ─────────────────────────── */ --shadow-1: 0 1px 2px rgba(10,10,11,0.05), 0 1px 1px rgba(10,10,11,0.03); --shadow-2: 0 6px 22px -8px rgba(10,10,11,0.12), 0 2px 6px rgba(10,10,11,0.05); --shadow-3: 0 24px 60px -22px rgba(10,10,11,0.24), 0 6px 16px rgba(10,10,11,0.07); --shadow-accent: 0 18px 50px -20px rgba(214,57,44,0.45); /* ── Motion (borrowed from JMJ Experiences) ───────────────── */ --ease-out: cubic-bezier(0.16, 0.84, 0.30, 1.00); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1.00); --dur-1: 150ms; --dur-2: 280ms; --dur-3: 560ms; --dur-slow: 880ms; /* ── Layout ───────────────────────────────────────────────── */ --max-w: 1240px; --max-w-wide: 1400px; --gutter: clamp(20px, 5vw, 80px); --nav-h: 68px; }