/* ═══════════════════════════════════════════════════════════════════════════ MARGAUX TOKEN SHEET · branch: variant/margaux All custom properties prefixed --mgx- Font collision check (run before every pass per spec §3): Noir 2.0 → Fraunces + Hanken Grotesk Heritage → Playfair Display + Crimson Pro Bodoni Moda is CLEAR — using as Margaux display face. Rule: hex values live ONLY in this file. Every other CSS file uses var(--mgx-*) or a chassis alias that resolves to an --mgx-* token. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. PALETTE TOKENS ──────────────────────────────────────────────────── */ :root { /* Grounds */ --mgx-parchment: #F0E7D8; /* Ground A — cream paper */ --mgx-paper-aged: #E7DCC8; /* Aged paper, folded-letter fills */ --mgx-oxblood: #6B1A24; /* Ground B — crushed red paper */ --mgx-oxblood-deep: #470E16; /* Dark panels — invitation, testimonial */ /* Text */ --mgx-ink: #3B1219; /* Body on parchment — 13.31:1 on parchment */ --mgx-cream-text: #F0E7D8; /* All text on oxblood — 9.52:1 on oxblood */ /* Accent — SINGLE accent family. Decorative / large text ONLY. Never body copy. */ --mgx-brass: #8F7749; /* 3.49:1 on parchment — ornament strokes, hairlines, hover */ /* Script overlay — DECORATIVE ONLY. Always paired with an accessible heading. */ --mgx-rose-script: #C4707E; /* 3.32:1 — script words on oxblood grounds */ /* Derived utility tokens (computed, no raw hex outside this block) */ --mgx-rule: #C4B09A; /* Warm parchment hairline */ --mgx-ink-muted: #7A4D50; /* Secondary / muted text on parchment */ --mgx-brass-40: color-mix(in srgb, var(--mgx-brass) 40%, transparent); --mgx-brass-15: color-mix(in srgb, var(--mgx-brass) 15%, transparent); /* ── 2. TYPOGRAPHY TOKENS ─────────────────────────────────────────────── */ --mgx-font-display: 'Bodoni Moda', 'Bodoni 72', Georgia, serif; --mgx-font-script: 'Pinyon Script', cursive; --mgx-font-body: 'Lora', Georgia, serif; /* ── 3. CHASSIS COLOR ALIAS OVERRIDE (parchment default) ─────────────── */ /* Overrides the Noir-wired aliases in tokens.css so chassis components pick up Margaux palette without hardcoding hex in component CSS. */ --paper: var(--mgx-parchment); --surface: var(--mgx-paper-aged); --rule: var(--mgx-rule); --ink: var(--mgx-ink); --ink-muted: var(--mgx-ink-muted); --accent: var(--mgx-brass); --accent-deep: color-mix(in srgb, var(--mgx-brass) 80%, var(--mgx-ink)); --accent-40: var(--mgx-brass-40); --accent-15: var(--mgx-brass-15); /* ── 4. CHASSIS FONT ALIAS OVERRIDE ──────────────────────────────────── */ --font-serif: var(--mgx-font-body); /* Lora for body text & headings */ --font-label: var(--mgx-font-body); /* Lora letterspaced-caps for labels */ } /* ── 5. DISPLAY CLASS ──────────────────────────────────────────────────── Overrides base.css .display (Fraunces → Bodoni Moda). 'opsz' 48 = high optical-size axis for maximum Didone elegance. */ .display { font-family: var(--mgx-font-display); font-variation-settings: 'opsz' 48; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; } /* ── 6. GROUND CLASSES ─────────────────────────────────────────────────── SCAR RULE (from Noir 2.0): apply to the OUTERMOST full-bleed section wrapper only. Full-bleed = max-width:none + padding-inline re-centering. NEVER width:100vw. Texture technique: SVG feTurbulence + feDiffuseLighting crease-relief baked into background-image, blended via soft-light — visible paper creases at 100% zoom; no z-index / stacking-context issues, no pseudo-elements. Parchment: baseFrequency 0.013, seed 7, surfaceScale 2.4, rect opacity 0.30. Oxblood: baseFrequency 0.011, seed 11, surfaceScale 3.0, rect opacity 0.45 (stronger relief). mgx-ground-oxblood-deep stays flat. */ /* Paper-grain data URIs — hex is inside the SVG source, counted as token file */ /* stylelint-disable */ .mgx-ground-parchment { max-width: none; padding-inline: max(clamp(1.25rem, 5vw, 3rem), calc(50vw - 640px)); background-color: var(--mgx-parchment); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='4' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23p)' opacity='0.30'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 640px 640px; background-blend-mode: soft-light; color: var(--mgx-ink); /* Local alias re-declarations so nested chassis components still read correct values */ --paper: var(--mgx-parchment); --surface: var(--mgx-paper-aged); --ink: var(--mgx-ink); --ink-muted: var(--mgx-ink-muted); --rule: var(--mgx-rule); --accent: var(--mgx-brass); --accent-40: var(--mgx-brass-40); --accent-15: var(--mgx-brass-15); } .mgx-ground-oxblood { max-width: none; padding-inline: max(clamp(1.25rem, 5vw, 3rem), calc(50vw - 640px)); background-color: var(--mgx-oxblood); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='3.0'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23p)' opacity='0.45'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 640px 640px; background-blend-mode: soft-light; color: var(--mgx-cream-text); --paper: var(--mgx-oxblood); --surface: color-mix(in srgb, var(--mgx-oxblood) 80%, var(--mgx-oxblood-deep)); --ink: var(--mgx-cream-text); --ink-muted: color-mix(in srgb, var(--mgx-cream-text) 70%, var(--mgx-oxblood)); --rule: color-mix(in srgb, var(--mgx-cream-text) 25%, var(--mgx-oxblood)); --accent: var(--mgx-rose-script); --accent-40: color-mix(in srgb, var(--mgx-rose-script) 40%, transparent); --accent-15: color-mix(in srgb, var(--mgx-rose-script) 15%, transparent); } .mgx-ground-oxblood-deep { /* Flat, no texture per spec */ max-width: none; padding-inline: max(clamp(1.25rem, 5vw, 3rem), calc(50vw - 640px)); background: var(--mgx-oxblood-deep); color: var(--mgx-cream-text); --paper: var(--mgx-oxblood-deep); --surface: color-mix(in srgb, var(--mgx-oxblood-deep) 85%, transparent); --ink: var(--mgx-cream-text); --ink-muted: color-mix(in srgb, var(--mgx-cream-text) 70%, var(--mgx-oxblood-deep)); --rule: color-mix(in srgb, var(--mgx-cream-text) 20%, var(--mgx-oxblood-deep)); --accent: var(--mgx-rose-script); --accent-40: color-mix(in srgb, var(--mgx-rose-script) 40%, transparent); --accent-15: color-mix(in srgb, var(--mgx-rose-script) 15%, transparent); } /* stylelint-enable */ /* ── 7. LOCKUP PATTERN ─────────────────────────────────────────────────── Three-line display lockup from spec §3: .mgx-lockup__caps — lines 1–2, Bodoni Moda ALL CAPS, tight leading .mgx-lockup__script — line 3, Pinyon Script at ~1.4× the caps size Usage:

Documenting
Love

beautifully

The script line is DECORATIVE. The semantic heading sits inside .mgx-lockup or alongside it — never omitted. */ .mgx-lockup { display: block; } .mgx-lockup__caps { font-family: var(--mgx-font-display); font-variation-settings: 'opsz' 48; font-weight: 400; font-size: var(--fs-display); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; } .mgx-lockup__script { font-family: var(--mgx-font-script); font-weight: 400; font-size: calc(var(--fs-display) * 1.4); line-height: 1; letter-spacing: 0; text-transform: none; display: block; margin-top: 0.1em; } /* ── 8. S9 FOOTER SKIN ─────────────────────────────────────────────────── body .footer beats the footer partial's .footer rule (specificity 11 vs 10) so the texture background-image applies even though the partial sets background: var(--paper) via its own inline