/* ============================================================ M&S ACCOUNTING — DESIGN TOKENS The Quarterly Publication direction. Five colors. Two fonts. Eight type sizes. Three motion rules. Any new section must use only what is defined here. ============================================================ */ :root { /* === THE PALETTE — 5 colors, each with a single role === */ --color-paper: #F6F1E7; /* Page bg — warm cream, replaces #FFF everywhere except cards */ --color-paper-deep: #ECE5D3; /* Section alternation — the "next page" of the journal */ --color-ink: #1A1F2E; /* Body text, headlines — almost-black with navy touch */ --color-navy: #1E3A5F; /* Footer, one section, buttons — event color, used rarely */ --color-green: #84BD00; /* Ampersand only. Three states. Never UI background. */ /* Sage — the editorial accent (page-chrome only — indicator rules, sticky-nav active state, list-item bullets, audience-block border). Distinct role from --color-green which stays reserved for the ampersand mark. */ --color-sage: #8FA886; --color-sage-deep: #6E8865; --color-sage-soft: #C7D2BD; /* Card surface — pure white inside cards lifts them off paper */ --color-card: #FFFFFF; /* Light text on dark surfaces (not a "palette color" — it's the opposite of ink) */ --color-ink-on-dark: #FFFFFF; --color-ink-on-dark-soft: rgba(255, 255, 255, 0.78); --color-ink-on-dark-mute: rgba(255, 255, 255, 0.54); /* Ink derivatives — same color, different opacity, NOT new tokens */ --color-ink-soft: rgba(26, 31, 46, 0.74); --color-ink-mute: rgba(26, 31, 46, 0.54); /* Hairlines — ink at 12% opacity, locked per brief */ --color-hairline: rgba(26, 31, 46, 0.12); --color-hairline-strong: rgba(26, 31, 46, 0.20); --color-hairline-dark: rgba(255, 255, 255, 0.12); /* === THE FONTS — 2 families === */ --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* === THE TYPE SCALE — 8 sizes, every one locked === */ --fs-display: clamp(3rem, 6vw, 6rem); /* EB Garamond 500 italic — hero, one per page */ --fs-h1: clamp(2.5rem, 5vw, 4.25rem); /* Fraunces 500 — page-opening headlines */ --fs-h2: clamp(1.875rem, 3vw, 2.75rem); /* Fraunces 500 — section headings */ --fs-pull: clamp(2rem, 4vw, 3.5rem); /* Fraunces 400 italic — pull quotes only */ --fs-lead: 1.375rem; /* 22px — Fraunces 400 italic — section subheads, ledes */ --fs-body: 1.0625rem; /* 17px — Inter 400 — all paragraph text */ --fs-meta: 0.75rem; /* 12px — Inter 500, ls 0.18em UPPERCASE — eyebrows, bylines */ --fs-rule: 0.6875rem; /* 11px — Inter 500, ls 0.20em UPPERCASE — masthead chrome */ /* === LINE HEIGHTS === */ --lh-display: 1.0; --lh-headline: 1.1; --lh-pull: 1.25; --lh-lead: 1.4; --lh-body: 1.75; --lh-meta: 1.2; /* === LETTER SPACING === */ --ls-tight: -0.02em; --ls-normal: 0; --ls-meta: 0.18em; --ls-rule: 0.20em; /* === SPACING === */ --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: 5rem; --space-10: 6rem; --space-11: 8rem; --space-12: 10rem; /* The vertical rhythm — tightened for web frames */ --space-section: clamp(64px, 8vw, 128px); --space-section-y: clamp(5rem, 8vw, 7rem); /* Inner-page section padding (smaller than home sections) */ /* Side margins — the whitespace IS the design */ --space-margin-side: clamp(1.5rem, 4vw, 4rem); --gutter: clamp(1.25rem, 3vw, 2rem); /* Inner-page side gutter — tighter than masthead */ /* === LAYOUT === */ --content-max: 680px; /* Single-column content — magazine column width */ --content-wide: 920px; /* When a section needs slightly more room */ --container-max: 1200px; /* Max bound for chrome (masthead, footer) */ /* === RADII — sharp, magazine-style === */ --radius-button: 2px; --radius-card: 2px; --radius-input: 2px; --radius-sm: 6px; /* Used on audience-block tail */ --radius-md: 12px; /* Inner-page cards, reference-card primitive */ --radius-lg: 20px; /* Larger image frames */ --radius-pill: 9999px; /* === SHADOWS — print-light, never web-heavy === */ --shadow-card: 0 4px 40px rgba(26, 31, 46, 0.04); --shadow-card-hov: 0 16px 48px rgba(26, 31, 46, 0.08); --shadow-md: 0 8px 28px rgba(26, 31, 46, 0.10); --shadow-lg: 0 20px 56px rgba(26, 31, 46, 0.14); /* === MOTION — 3 rules only === */ --duration-reveal: 900ms; --duration-hover: 300ms; --duration-fast: 200ms; --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); /* === Z-INDEX === */ --z-base: 1; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-grain: 9990; /* === LEGACY ALIASES — for sections not yet rebuilt === Remove these as each section is migrated to the new vocabulary. */ --color-bg-page: var(--color-paper); --color-bg-alt: var(--color-paper-deep); --color-bg-card: var(--color-card); --color-bg-dark: var(--color-navy); --color-bg-dark-soft: var(--color-navy); --color-text-strong: var(--color-ink); --color-text-body: var(--color-ink); --color-text-muted: var(--color-ink-mute); --color-text-light: var(--color-ink-on-dark); --color-text-light-soft: var(--color-ink-on-dark-soft); --color-text-light-mute: var(--color-ink-on-dark-mute); --color-text-link: var(--color-navy); --color-primary: var(--color-navy); --color-primary-dark: #142940; --color-primary-light: #2A4F7F; --color-primary-soft: #243F66; --color-accent: var(--color-navy); --color-accent-dk: var(--color-navy); --color-signature: var(--color-green); --color-border-soft: var(--color-hairline); --color-border-strong: var(--color-hairline-strong); --fs-hero: var(--fs-display); --fs-h3: 1.625rem; --fs-h4: 1.25rem; --fs-small: var(--fs-meta); --fs-tiny: var(--fs-rule); --fs-numeral-display: var(--fs-pull); --lh-tight: var(--lh-display); --lh-snug: var(--lh-headline); --lh-normal: 1.5; --lh-loose: var(--lh-body); --ls-tighter: -0.025em; --ls-wide: 0.08em; --ls-wider: var(--ls-meta); --transition-fast: var(--duration-fast) ease; --transition-base: var(--duration-hover) ease; --transition-slow: var(--duration-reveal) ease; --space-gutter: var(--space-margin-side); --space-grid: 1.5rem; --container-narrow: var(--content-wide); --container-wide: var(--container-max); --shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.03); --shadow-overlay: var(--shadow-card-hov); --shadow-elevated: var(--shadow-card-hov); /* === PROTOTYPE-VOCAB ALIASES (Reston Cream direction) === The inner-page prototypes (Services, Client Center, Contact, Privacy, Terms) were authored against a "cream / rule / text-mute" token vocabulary. Map those names onto the theme's existing tokens so the prototype CSS resolves cleanly. */ --color-cream: var(--color-paper); --color-cream-deep: var(--color-paper-deep); --color-white: #FDFCF9; --color-rule: var(--color-hairline); --color-rule-dark: var(--color-hairline-dark); --color-text-mute: var(--color-ink-mute); --color-text-soft: var(--color-ink-soft); /* Transition aliases used by inner-page CSS */ --t-fast: var(--transition-fast); --t-base: var(--transition-base); --t-slow: var(--transition-slow); /* Line-height alias used widely by inner-page headings (legal-page, contact-form, about-*, services-flow). Without this, line-height silently falls back to inherited or initial values. */ --lh-heading: var(--lh-headline); /* Monospace stack — used by .standards__item-num and other numeric accents in the alternate homepage and elsewhere. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Roboto Mono', monospace; }