/* ========================================================================== The Undeniable Stack: design tokens Direction: Emerald Standard (locked 2026-07-15) Dark-first. Light is the secondary mode. Respects OS preference; a manual toggle can force a mode via data-theme="dark" | "light" on . Brand rule: sharp rectangular edges only. No rounded corners, no pills. Source of decision: business vault 05-Coaching-Offer/Brand/palette-decision.md ========================================================================== */ /* ---- Non-color tokens (mode-independent) ------------------------------- */ :root { /* Type roles. Self-hosted variable faces first (see fonts.css), system stacks as fallback. The three roles stay fixed; only the first family changes if faces are ever re-licensed. */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; /* Modular type scale (1.25). The top steps are fluid: they hold their full desktop size on wide viewports (the clamp max) and shrink on small screens so large display type never overflows a phone. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: clamp(1.2rem, 0.98rem + 0.92vw, 1.563rem); --text-2xl: clamp(1.4rem, 1.06rem + 1.39vw, 1.953rem); --text-3xl: clamp(1.65rem, 1.16rem + 1.99vw, 2.441rem); --text-4xl: clamp(2rem, 1.36rem + 2.65vw, 3.052rem); --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.6; --tracking-label: 0.2em; /* Reading measure. Deliberately NOT in ch. The ch unit resolves against the element's own font size, so one shared token produced three different column widths on the same page: 99% of the container at 18px, 88% at 16px, 77% at 14px. Smaller text got a narrower column, which is backwards, and stacked blocks of different sizes landed on different right edges. That read as a bug rather than as a choice. 64rem is 1024px, just inside the 1032px inner width of the 1080px container, so every prose block fills the column the same way that cards, tables and callouts already do, at any font size. Kept as a cap rather than removed so line length stays bounded if --maxwidth is ever raised. Large display type still breaks earlier on purpose (see .section-title, .hero h1, .tagline p); that hierarchy is intentional. */ --measure: 64rem; /* Spacing scale. */ --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; --border-hairline: 1px; --radius: 0; /* brand rule: sharp edges everywhere */ --maxwidth: 1080px; } /* ---- Color: DARK (default / hero) -------------------------------------- */ :root { color-scheme: dark; /* Grounds and surfaces. Base avoids pure black; each neutral is nudged toward emerald so the whole system reads as one deliberate palette. */ --bg: #0c0f0e; --surface-1: #121615; --surface-2: #1b211e; --overlay: #222a26; --border: #273029; --border-strong: #3a463f; /* Text. Body avoids pure white to prevent halation. */ --text: #f1f4f2; --text-muted: #9aa8a1; /* Raised from #6b7873 (2026-08-12). At the old value the two places this is actually used, the input placeholder on --surface-2 and the 12px "From" heading, measured 3.55:1 and 4.18:1 against their real backgrounds, under the 4.5:1 WCAG AA floor for small text. The large-text 3:1 allowance does not apply: both are small. Now 5.51:1 on --surface-2, 6.48:1 on --bg. Light mode moved with it: #7c8781 -> #66716b, 3.33 -> 4.53 on --surface-2, which is the tightest of the four and the one to re-check if the surface colors ever move. */ --text-faint: #8b9992; /* Brand. Emerald is the 30% signal; gold is the 10% seal. */ --accent: #2fb37d; /* 7.21:1 on --bg, AA body + large */ --accent-hover: #48c692; --accent-deep: #0e5c40; /* rich fill; use --on-accent-deep for text on top */ --on-accent: #07160f; /* text/ink on a solid --accent fill */ --on-accent-deep: #eaf5ef; /* text on a solid --accent-deep fill */ --gold: #c6a24e; /* micro-accent: rules, numerals, a seal */ --gold-strong: #d8b869; /* Functional (kept distinct from the brand accent). */ --ok: #35b57e; --warn: #e0a93c; --danger: #e5565c; --info: #6e93b8; /* Focus ring for keyboard users. */ --focus: #6fd6a6; } /* ---- Color: LIGHT (secondary) ------------------------------------------ */ :root[data-theme="light"] { color-scheme: light; --bg: #fafbfa; --surface-1: #ffffff; --surface-2: #eff3f1; --overlay: #ffffff; --border: #dce4e0; --border-strong: #bfc9c3; --text: #0d1512; --text-muted: #54605b; --text-faint: #66716b; /* was #7c8781: 3.33:1 on --surface-2, under AA */ --accent: #0f7a52; /* 5.16:1 on light --bg, AA */ --accent-hover: #0b6444; --accent-deep: #0f7a52; --on-accent: #ffffff; --on-accent-deep: #f4faf7; --gold: #8a6a22; --gold-strong: #6f551b; --ok: #0f7a52; --warn: #9a6a12; --danger: #b23138; --info: #3d6488; --focus: #0f7a52; } /* Dark-first by decision: dark is the hero every visitor sees by default, regardless of OS preference. Light is opt-in via the theme toggle, which sets data-theme="light" (defined above). We deliberately do NOT auto-switch on prefers-color-scheme, so the premium dark look always leads. */ /* Explicit dark toggle re-asserts the hero palette after a light choice. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0f0e; --surface-1: #121615; --surface-2: #1b211e; --overlay: #222a26; --border: #273029; --border-strong: #3a463f; --text: #f1f4f2; --text-muted: #9aa8a1; --text-faint: #8b9992; --accent: #2fb37d; --accent-hover: #48c692; --accent-deep: #0e5c40; --on-accent: #07160f; --on-accent-deep: #eaf5ef; --gold: #c6a24e; --gold-strong: #d8b869; --ok: #35b57e; --warn: #e0a93c; --danger: #e5565c; --info: #6e93b8; --focus: #6fd6a6; } /* ---- Minimal element defaults so the tokens are usable immediately ------ */ * { box-sizing: border-box; border-radius: var(--radius); } /* Keep anchor-linked sections clear of the sticky nav (see .topnav). */ html { scroll-padding-top: 5rem; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); text-wrap: balance; overflow-wrap: break-word; margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); } a { color: var(--accent); text-underline-offset: 0.2em; } a:hover { color: var(--accent-hover); } :where(button, a, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }