/* ===================================================================== Halo Metallic Design System — Foundation tokens Import this in every artifact. Includes color (semantic + form), type, spacing, radius, shadow, motion, page-pattern, and engraving tokens, plus semantic element styles. Color taxonomy (see ADR-0002): • Semantic colors (qualitative axis) — gold, silver, bronze (variant hierarchy) plus rust, patina, copper (severity overlays). Each has 3 swatches: highlight (-300), main (-500), lowlight (-700). • Form color — ink. The structural workhorse AND the page surface. 13-stop ramp; the near-white end (ink-10 raised / ink-25 page / ink-50 sunken) carries the light-mode page surfaces. • Paper — pure white plus a warm-tinted white, off the cool ink ramp. ===================================================================== */ /* Fonts are self-hosted (no third-party CDN) — see ADR-0024. Files live in the design site's publicDir (`assets/`), so they serve at the ROOT URL `/fonts/…` (latin woff2 subset; that subset covers Spanish accents). Both families are SIL OFL 1.1; see the *-OFL.txt files alongside. URLs must be root-absolute (`/fonts/…`), NOT relative — a relative `assets/fonts/…` resolves against this stylesheet's location and 404s in dev (vite serves it from `/@tanstack-start/…`). Root-absolute matches the publicDir mapping in both dev and the production build. */ @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/zen-kaku-gothic-new-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/zen-kaku-gothic-new-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/zen-kaku-gothic-new-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/zen-kaku-gothic-new-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/zen-kaku-gothic-new-latin-900-normal.woff2') format('woff2'); } @font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/fragment-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Fragment Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/fragment-mono-latin-400-italic.woff2') format('woff2'); } /* Official-brand fonts (Arvo / Poppins / JetBrains Mono) — the DEFAULT brand is official, so its families are declared in the base token file (not only the brand pack). Self-hosted per ADR-0024; latin woff2 subsets; OFL 1.1 licenses alongside the files; served from the design-site publicDir at /fonts. The Zen Kaku / Fragment Mono families above stay declared too — the proposed brand pack (brands/proposed.css) selects them via --font-*; only the token chooses which family renders. */ @font-face { font-family: 'Arvo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/arvo-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Arvo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/arvo-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } :root { /* ------- Semantic colors — qualitative axis, 3 swatches each ------- Each semantic color has: -300: highlight (lighter; hover state / subtle emphasis) -500: main (the anchor; the default rendered value) -700: lowlight (darker; press state / sunken / slightly more emphatic) Intermediate positions (-400, -600) are deliberately empty so future intermediate stops can slot in without forced token renumbering. See ADR-0002. */ /* Gold — qualitative semantic for the "primary" tier. TWO ramps: --gold-* (brand gold): the canonical, luminous brand gold. Bright and MODE-INVARIANT (same value on light and dark; not redefined in the dark block, not darkened in the contrast blocks). Contrast-EXEMPT — for logos / brand marks / decorative use, which WCAG SC 1.4.3 (text) and 1.4.11 (non-text) do not govern. The Halo mark consumes this ramp (ADR-0023). Do NOT use it for text/focus/state-bearing UI. --gold-aa-* (contrast-safe variant): the WCAG-bound gold for text, focus rings, and state-bearing UI. SPLIT-MODE — darkened on light (anchor #8a5300, 6.02:1 on the official page #f9f9fa for AA Normal text), bright on the dark plate (see dark block). Same hue as brand gold in every state; only lightness shifts. See ADR-0002. */ --gold-300: #ffab2b; --gold-500: #ff9c00; --gold-700: #cc7a00; --gold-aa-300: #a36300; /* 4.60:1 on #f9f9fa */ --gold-aa-500: #8a5300; /* 6.02:1 */ --gold-aa-700: #7a4a00; /* 7.11:1 */ /* Silver — qualitative semantic for the "secondary" tier (default). Official cool blue-gray secondary. Mode-invariant. */ --silver-300: #8799ab; --silver-500: #40617f; --silver-700: #294152; /* Bronze — qualitative semantic for the "tertiary" tier. Official warm secondary. Mode-invariant. */ --bronze-300: #d9ad55; --bronze-500: #b26d00; --bronze-700: #7c4c00; /* Rust — qualitative semantic for "critical" severity (official danger). */ --rust-300: #d65f5f; --rust-500: #c03131; --rust-700: #912121; /* Patina — qualitative semantic for "affirm" severity (official success). */ --patina-300: #5cab77; --patina-500: #2f8c4f; --patina-700: #1f6235; /* Copper — qualitative semantic for "caution" severity (official warning). */ --copper-300: #cf8a2e; --copper-500: #b26d00; --copper-700: #7c4c00; /* ------- Form color: ink — 13 stops ------- Cool near-neutral with slight blue undertone. Replaces the previous brown family. Document/ledger/blueprint register — matches the compliance buyer's daily environment (regulatory documents, audit reports, legal ledgers are all printed in ink). The cool tint cleanly separates the structural register from the warm metallic cluster, so semantic colors stand out against it. The near-white end carries the light-mode page surfaces, for one consistent hue across page and structure: ink-10 raised · ink-25 page · ink-50 sunken. Used for: body text, secondary text, borders, dividers, page + sunken surfaces, dark-mode page background. The structural register is COOL near-neutral with a slight blue undertone (adopted from the proposed ramp): document/ledger/blueprint, never warm-brown. The cool tint cleanly separates the structure from the warm metallic cluster (gold/severity), so accents stand out. The near-white end carries the light-mode page surfaces: ink-10 raised · ink-25 page · ink-50 sunken. See ADR-0002. */ --ink-10: #fbfcfe; /* raised page surface (lightest) */ --ink-20: #f8f9fb; /* faint chrome — between raised (10) and page (25) */ --ink-25: #f7f8fa; /* page background (light mode) */ --ink-50: #f3f4f6; /* sunken page surface */ --ink-100: #e2e4e8; /* border-subtle */ --ink-200: #c5c9d0; /* border */ --ink-300: #a4a9b4; --ink-400: #828893; --ink-500: #5f6573; /* fg-3 */ --ink-600: #464c5a; --ink-700: #353a48; /* fg-2 */ --ink-800: #262a36; --ink-900: #181b22; /* fg-1 (anchor — body text in light mode) */ --ink-950: #0e1015; /* deepest — dark-mode anchor */ /* ------- Paper ------- Pure white and the official warm-tinted brown-50. */ --paper: #ffffff; --paper-tinted: #f8f0e8; /* official brown-50 */ /* ------- Semantic aliases ------- Role-bound names over the semantic overlays plus silver-as-info. Components reference the semantic names so severity changes propagate through the palette by editing the overlay scales above. */ --affirm-300: var(--patina-300); --affirm-500: var(--patina-500); --affirm-700: var(--patina-700); --affirm-100: #eaf6ee; /* pale tint, for background fills */ --caution-300: var(--copper-300); --caution-500: var(--copper-500); --caution-700: var(--copper-700); --caution-100: #fff4e0; --critical-300: var(--rust-300); --critical-500: var(--rust-500); --critical-700: var(--rust-700); --critical-100: #fbecec; --info-300: var(--silver-300); --info-500: var(--silver-500); --info-700: var(--silver-700); --info-100: #e9eef3; /* ------- Semantic surface tokens ------- Form color (ink) carries all structural needs. Silver's previous utility uses (borders, links, dividers) migrated to ink — silver is now purely a qualitative semantic marker. */ --fg-1: var(--ink-900); /* primary text (official brown-900) */ --fg-2: var(--ink-700); /* secondary text */ --fg-3: var(--ink-500); /* tertiary text, captions */ --fg-on-metal: #ffffff; /* official buttons set white on gold */ --fg-link: var(--silver-500); /* official links are silver-blue */ --fg-link-visited: var(--silver-700); --bg-page: var(--ink-25); /* Surfaces (cards, menus, popovers, modals) ride --ink-10, the raised page-surface stop — matching the content plane; elevation comes from border + shadow. (Dark sets --bg-surface directly.) */ --bg-surface: var(--ink-10); --bg-surface-tinted: var(--paper-tinted); /* --bg-recessed — visually set apart from the page plane. Light mode goes darker than page (ink-50 vs ink-25); dark mode inverts and goes lighter than page. Same visual function in both — the value moves whichever direction creates contrast. */ --bg-recessed: var(--ink-50); /* Official borders are warm neutrals, never gray. The metal frame is bronze-300 (the official border-strong). */ --border-hairline: var(--ink-100); --border-strong: var(--ink-200); --border-metal: var(--bronze-300); /* ------- Typography (official brand default) ------- Arvo (slab-serif display) / Poppins (body) / JetBrains Mono (data). Tier-based naming: --font-display = Arvo, --font-body = Poppins, --font-data = JetBrains Mono. The proposed brand swaps these to Zen Kaku Gothic New / Fragment Mono via brands/proposed.css. */ --font-display: 'Arvo', Georgia, 'Times New Roman', serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Weight tokens. Arvo ships 400/700; Poppins 400/500/600/700. */ --weight-body: 400; --weight-emphasis: 500; --weight-strong: 600; --weight-display: 700; /* Type scale — perceptually-spaced, ~1.20–1.33 ratio progression. */ --text-display: clamp(48px, 7vw, 72px); --text-display-1: clamp(48px, 7vw, 72px); /* legacy alias */ --text-display-2: clamp(36px, 5vw, 56px); --text-h1: clamp(30px, 3vw, 40px); --text-h2: 30px; --text-h3: 24px; --text-h4: 20px; --text-body-lg: 17px; --text-body: 15px; --text-body-sm: 13px; --text-caption: 12px; --text-overline: 11px; --text-micro: 9px; /* tiny captions / skel-row labels — below overline */ --text-mono: 13px; /* Per-tier line-heights (paired with each size) */ --lh-display: 1.05; --lh-h1: 1.10; --lh-h2: 1.20; --lh-h3: 1.25; --lh-h4: 1.30; --lh-body-lg: 1.55; --lh-body: 1.55; --lh-body-sm: 1.50; --lh-caption: 1.45; --lh-overline: 1.40; --lh-tight: 1; /* no leading — button labels and ultra-tight UI */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-display: -0.015em; /* Arvo slab — gentler than the proposed display tracking */ --tracking-tight: -0.01em; --tracking-snug: -0.005em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-mono: 0; /* JetBrains Mono needs no narrowing */ --tracking-mark: -0.04em; /* the Halo wordmark */ /* ------- Spacing (4-pt grid) ------- * Plus sub-base structural widths (--space-px*) for hairline borders, * focus rings, and frame insets. These don't fit the 4px grid but are * the canonical sub-pixel-base structural widths. */ --space-0: 0; --space-px: 1px; /* hairline borders / 1px frame widths */ --space-px-15: 1.5px; /* button & instrument frame inset */ --space-px-2: 2px; /* focus rings, micro-radii, paired hairlines */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 96px; --space-12: 128px; /* ------- Radii ------- Instrument-precise scale (4/6/8) — a compliance tool reads as engineered, not pillowy (ADR-0011). The proposed brand sharpens further to 2/4/8 (see brands/proposed.css). Pill is reserved for genuinely-round things (avatars, dots), not status badges. */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ------- Shadows ------- Official warm brown-tinted shadows — never neutral black, never a metallic-bronze cast. The proposed brand swaps in the dual-color metallic recipe (warm cast + cool hairline). */ --shadow-hairline: 0 0 0 1px var(--ink-100); --shadow-xs: 0 1px 2px rgba(55, 34, 0, 0.06); --shadow-sm: 0 1px 2px rgba(55, 34, 0, 0.06), 0 1px 3px rgba(55, 34, 0, 0.05); --shadow-md: 0 4px 8px rgba(55, 34, 0, 0.08), 0 2px 4px rgba(55, 34, 0, 0.06); --shadow-lg: 0 10px 20px rgba(55, 34, 0, 0.09), 0 4px 8px rgba(55, 34, 0, 0.05); --shadow-xl: 0 20px 40px rgba(55, 34, 0, 0.12), 0 8px 16px rgba(55, 34, 0, 0.06); /* Press-state shadow — used on buttons and tiles when active */ --shadow-inset: inset 0 1px 2px rgba(55, 34, 0, 0.08); /* Inner specular highlight — the proposed brand's "polished" top-edge line. The official brand is flat material with no specular; the token is neutralized with TRANSPARENT (NOT `none`) so composed box-shadow lists stay valid wherever they're concatenated. */ --specular-top: inset 0 1px 0 rgba(255, 255, 255, 0); --specular-strong: inset 0 1px 0 rgba(255, 255, 255, 0), inset 0 -1px 0 rgba(255, 255, 255, 0); /* ------- Z-index — the layering scale (ADR-0025 depth model) ------- ADR-0025 fixes three planes, back to front: Base (the page) → Content + Chrome (coplanar peers on the base, separated by a splash gutter — they never overlap) → Overlay (the only floating plane: scrims, drawers, popovers, modals, toasts). These tokens pin numeric values to that model so stacking is decided here once, not ad-hoc per component. Use `z-index: var(--z-*)`, never a bare number (enforced by the no-magic-z-index Stylelint rule). `0` and `auto` stay bare — they're local stacking-context primitives, not layering choices. The 100-step gaps in the overlay band leave room to slot new surfaces in. */ --z-base: 0; /* the page plane */ --z-content: 1; /* glass content surfaces (the work plane) */ --z-chrome: 10; /* opaque metal chrome at the viewport edges */ --z-overlay: 1000; /* overlay-plane floor: scrims, drawer / modal backdrops */ --z-popover: 1100; /* menus, tooltips, selects */ --z-modal: 1200; /* dialogs */ --z-toast: 1300; /* toasts & notifications — always on top */ /* ------- Page pattern ------- The tiled Halo mark is proposed-brand artwork (a low-opacity texture that gives backdrop-filter content to blur, load-bearing per ADR-0025). The official brand has no tiled-mark texture. The proposed brand restores the pattern URLs in brands/proposed.css. */ --page-pattern: none; --page-pattern-dark: none; /* ------- Metallic surfaces — no gradient tokens ------- The system intentionally has NO gradient tokens. The metallic register uses three approved patterns instead: 1. Solid fill + 1px specular highlight at the top inner edge 2. Solid fill + warm-tinted shadow for elevation 3. Solid fill + state-shift across the variant's 3-swatch range (-500 default → -300 hover → -700 press) See ADR-0001 and ADR-0002. */ /* ------- Focus ring (official gold register) ------- */ --focus-ring: 0 0 0 3px rgba(255, 156, 0, 0.25); /* Error-state focus ring — same geometry as --focus-ring but in the critical (rust) register; used on invalid inputs / fields. */ --focus-ring-error: 0 0 0 3px rgba(192, 49, 49, 0.30); /* Affirm-state focus ring — same geometry as --focus-ring in the affirm (patina) register; used on valid inputs / fields. */ --focus-ring-affirm: 0 0 0 3px rgba(47, 140, 79, 0.30); /* ------- Glass-engraving highlight for system-voice text ------- The 1px cream highlight above each letter is the proposed brand's incised-cut effect (ADR-0015). The official brand is flat material with no engraving; the token is neutralized with a TRANSPARENT text-shadow (NOT `none`) so composed text-shadow lists stay valid. The proposed brand restores the real highlight in brands/proposed.css. */ --engraving-shadow: 0 -1px 0 rgba(255, 247, 230, 0); --engraving-shadow-dark: 0 -1px 0 rgba(255, 255, 255, 0); /* ------- Motion (systemic, official scale) ------- The proposed brand swaps in the calibration-settle curves + longer durations (see brands/proposed.css). */ --ease-mechanical: cubic-bezier(0.2, 0, 0, 1); --ease-out-soft: cubic-bezier(0, 0, 0, 1); --dur-quick: 120ms; --dur-base: 180ms; --dur-deliberate: 280ms; /* ------- Motion (brand-namespaced) ------- * Brand-specific motion choreographies that aren't part of the systemic * scale. The spinner-* tokens model the calibration-settle gesture from * preview/loader.html — the brand's signature "instrument settling on a * value" motion. The mark-* tokens drive the Halo mark animations. * These are intentional exceptions to the two-curve / three-duration * systemic scale — keep them named so they read as specific and rare. */ --spinner-ease-decel: cubic-bezier(0.15, 0, 0.4, 1); /* dial-settle long decel */ --spinner-ease-snap: cubic-bezier(0.5, 0, 0.2, 1); /* dial-settle snap-back */ --spinner-dur-routine: 7.5s; /* full calibrate-routine cycle (hunt → spin A → spin B → return) */ --spinner-dur-settle: 800ms; /* full calibrate-settle cycle */ --spinner-sweep: 1; /* hunt-twitch amplitude scalar; per preview/loader.html */ --mark-dur-shimmer: 750ms; /* logo shimmer sweep */ /* ------- Loading state — pulse rhythm and alpha ranges ------- */ --loading-cycle: 1.6s; --loading-easing: ease-in-out; --loading-pulse-white-min: 0.1; --loading-pulse-white-max: 0.5; --loading-pulse-metal-min: 4; --loading-pulse-metal-max: 18; --loading-hairline-min: 0.5; --loading-hairline-max: 1.0; } /* ------------------------------------------------------------------ Dark mode — token overrides (official brand default). Values from the official client portal's dark block: warm near-neutral darks, eggshell foregrounds, bright gold accents. The proposed brand's dark overrides live in brands/proposed.css, doubly-scoped [data-brand="proposed"][data-theme="dark"] so they win over this block. ------------------------------------------------------------------ */ [data-theme="dark"] { --bg-page: #171513; --bg-surface: #201e1c; --bg-surface-tinted: #292522; --bg-recessed: #292522; --paper: #201e1c; --paper-tinted: #292522; --fg-1: #f0ebe2; --fg-2: #c0b8b0; /* The portal's dark fg-3 (#6e6660) sits at 3.2:1 — below AA for the caption text this token carries. Lightened to clear 4.5:1 while keeping the warm-neutral register. */ --fg-3: #99908a; --fg-on-metal: #ffffff; --fg-link: #8799ab; --fg-link-visited: #b3c1cf; /* Card/surface foreground aliases (parallel to --bg/--paper) */ --fg-page: #f0ebe2; --card-bg: #201e1c; --card-fg: #f0ebe2; --border-hairline: rgba(255, 220, 180, 0.13); --border-strong: #5a4f47; --border-metal: #b26d00; /* Bright gold is contrast-safe on the dark plate (8.7:1 on #171513). The brand gold (--gold-*) is NOT redefined here — it inherits the bright :root value, staying mode-invariant (contrast-exempt). */ --gold-aa-300: #ffbc52; --gold-aa-500: #ffab2b; --gold-aa-700: #ff9c00; /* Severity brightened for the dark plate (official dark *-700 tints). */ --rust-300: #f08080; --patina-300: #6bd48a; --copper-300: #f5b952; --affirm-100: rgba(47, 140, 79, 0.15); --caution-100: rgba(178, 109, 0, 0.15); --critical-100: rgba(192, 49, 49, 0.15); --info-100: rgba(64, 97, 127, 0.15); --shadow-hairline: 0 0 0 1px rgba(255, 220, 180, 0.13); /* Loading hairline pulses subtler in dark mode (mode tuning, brand-neutral) */ --loading-hairline-min: 0.22; --loading-hairline-max: 0.45; } [data-theme="dark"] .has-page-pattern { background-color: var(--bg-page); } /* --------------------------------------------------------------------- Base elements — opinionated defaults that match the system. --------------------------------------------------------------------- */ html, body { margin: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Reduced-motion override — PreferencesCorner sets data-motion="reduced" when the user picks the override (or system + OS-reduced when the resolver chooses to materialize it). Existing @media (prefers-reduced- motion: reduce) blocks throughout the system still handle the OS-default case; this rule covers the explicit user override on hosts where OS is set to standard. Sledgehammer-by-design: when a user asks for reduced motion, they get it. */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* The patterned page surface. The halo-stems brick (negative space forms an "H") in a one-step-toward-center tint on the ink-50 ground. Rotated 22deg so the pattern doesn't read as a strict grid; faded diagonally via mask so the top-left is most visible and the bottom-right recedes. Goyard/Hermès register: visible on careful look, invisible at a glance. Load-bearing: gives backdrop-filter glass surfaces content to blur. */ .has-page-pattern { position: relative; background-color: var(--ink-50); overflow: hidden; } /* The splash ::before is deliberately oversized (inset: -50%) and rotated; `overflow: hidden` above clips it visually, but that clip LEAKS to the document — via body→viewport overflow propagation the html element stays horizontally scrollable (~780px) to the over-extended pseudo, producing a stray horizontal scrollbar. Clip the scroll at the root, only where the splash is mounted, so the decorative pattern can't scroll the page sideways. (Scoped via :has so non-splash surfaces keep normal overflow.) */ html:has(.has-page-pattern) { /* Clip both axes: x stops the oversized splash pseudo from scrolling the page sideways (below); y keeps the viewport-locked shell from ever producing a vertical page scroll on mobile, where the bottom chrome corners are pinned to the visible viewport. */ overflow: clip; } .has-page-pattern::before { content: ""; position: absolute; /* -50% (not -25%): at 22° a smaller oversize leaves the corners of wide viewports bare. -50% covers the rotation to ~3:1 aspect. */ inset: -50%; background-image: var(--page-pattern); background-repeat: repeat; background-size: 48px auto; transform: rotate(22deg); transform-origin: center center; opacity: var(--pattern-opacity, 0.5); /* The splash is brand presence, not just the backdrop-filter substrate — it prints. Browsers omit backgrounds by default, so force it (ADR-0025). */ print-color-adjust: exact; -webkit-print-color-adjust: exact; pointer-events: none; z-index: 0; } [data-theme="dark"] .has-page-pattern::before { /* halo-stems splash (ink-900 on the ink-950 plate) renders at full opacity; light uses 0.5. Both are one-step-toward-center tints baked into the asset. */ --pattern-opacity: 1; } .has-page-pattern > * { position: relative; z-index: 1; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); margin: 0; text-wrap: balance; } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-snug); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); } h4 { font-size: var(--text-h4); line-height: var(--lh-h4); } .display-1, .display-2 { font-family: var(--font-display); font-weight: 900; color: var(--fg-1); letter-spacing: var(--tracking-display); line-height: 1.02; margin: 0; } .display-1 { font-size: var(--text-display-1); } .display-2 { font-size: var(--text-display-2); } p { margin: 0; text-wrap: pretty; } p + p { margin-top: var(--space-3); } a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ink-700); } a:visited { color: var(--fg-link-visited); } code, kbd, samp, pre, .mono { font-family: var(--font-data); font-size: var(--text-mono); font-feature-settings: "tnum"; letter-spacing: var(--tracking-mono); } .overline { font-family: var(--font-body); font-size: var(--text-overline); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); } .caption { font-family: var(--font-body); font-size: var(--text-caption); color: var(--fg-3); line-height: var(--leading-normal); } /* Halo wordmark — the display family (Arvo under official, Zen Kaku Black under proposed), tight tracking. */ .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-mark); color: var(--fg-1); text-transform: none; } hr { border: 0; height: 1px; background: var(--border-hairline); margin: var(--space-7) 0; } ::selection { background: var(--gold-aa-300); color: var(--ink-900); } /* --------------------------------------------------------------------- Accessible-contrast override (light mode only) --------------------------------------------------------------------- The OFFICIAL brand's contrast-safe variants (--gold-aa-* and the severity -500s) are already AA-verified on the eggshell page (see the :root values above and the official color notes), so the base needs no forced color-ramp darkening under prefers-contrast. The PROPOSED brand's light-mode -500s sit at 3.3–4.4:1 against its cool ink-25 (passing WCAG 1.4.11 UI 3:1 but short of 1.4.3 text 4.5:1), so it ships an AA-text-compliant ramp — that ramp lives in brands/proposed.css, scoped to [data-brand="proposed"] so it can never bleed onto the official base. Dark mode is untouched in both brands (dark -500s already pass AAA on the dark plate). The brand-neutral piece — dropping the engraving text-shadow under high-contrast / forced-colors — stays in the base below (official already carries a transparent engraving shadow; `none` is consistent). */ /* High-contrast / forced-colors / accessible-colors override: drop the engraving text-shadow. It's the decorative skeuomorphic "raised metal" cue; at the cost of visual noise around glyph edges, it can smear focus for users with low vision, contrast sensitivity, or astigmatism. */ @media (prefers-contrast: more) { :root { --engraving-shadow: none; --engraving-shadow-dark: none; } } :root[data-contrast="more"] { --engraving-shadow: none; --engraving-shadow-dark: none; } @media (forced-colors: active) { :root { --engraving-shadow: none; --engraving-shadow-dark: none; } }