/* ============================================================================ tokens.css — Parkway Homes Two-tier: primitives → semantic aliases. Child theme overrides primitives. Semantic aliases cascade. Source: Figma file nWRdV7wyyazjynYW8IUb6t — values 1:1. ============================================================================ */ :root { /* --------------------------------------------------------------------------- PRIMITIVES — raw values from Figma. Never reference these in components. --------------------------------------------------------------------------- */ /* Brand */ --mg-color-yellow: #FFDA0B; /* primary CTA — site-wide */ --mg-color-orange: #F97A25; /* eyebrow accent — never a button */ /* Warm surfaces */ --mg-color-cream: #F3F1ED; /* page surface — a step lighter than #F1EEEA, still gently muted vs the original #FBF8F1 */ --mg-color-cream-card: #F6F4F0; /* service cards */ --mg-color-input-bg: #F7F5F1; /* form inputs */ --mg-color-white: #FFFFFF; /* Browns (text on cream/warm sections) */ --mg-color-brown-gold: #5B491D; /* headings — gold-brown */ --mg-color-brown-taupe: #5D524B; /* headings — taupe-brown (about) */ --mg-color-brown-strong: #4B2B0B; /* card titles, selected pills */ --mg-color-brown-soft: #867666; /* secondary body / card subs */ --mg-color-brown-label: #685A3E; /* map labels */ --mg-color-brown-legal: #726E64; /* form disclaimer */ --mg-color-brown-placeholder: #6A5D50; /* form placeholder */ /* Inks (text on white sections) */ --mg-color-ink: #100C03; /* body on white */ --mg-color-ink-name: #111111; /* person names, strong labels */ --mg-color-ink-mid: #2D2D2D; /* outline-button text */ --mg-color-ink-quiet: #3D3D3D; /* opposite column header (them) */ /* Navy / dark surfaces */ --mg-color-navy: #05142D; /* footer + form section */ --mg-color-navy-border: #172C51; /* internal dividers on navy */ --mg-color-navy-rule: #325088; /* footer top rule */ --mg-color-navy-text: #A2AEC4; /* body text on navy */ --mg-color-navy-text-soft: #5C6F91; /* accreditation sub */ --mg-color-navy-legal: #778EBA; /* copyright + legal */ /* Process dark photo-backdrop */ --mg-color-process-bg: #10110C; /* photo overlay base */ /* Links + greys */ --mg-color-link: #0092CA; --mg-color-link-quiet: #006991; /* form disclaimer links */ --mg-color-disabled-text: #878787; --mg-color-form-border: #888479; /* WCAG 1.4.11: 3.73:1 on white form card — accessible at rest */ --mg-color-form-border-on: #4B3A1E; /* hover/focus — darker still (6.8:1), distinct from selected brown-strong (#4B2B0B) */ --mg-color-row-divider: #DFDCD3; --mg-color-table-head-rule: #222D53; --mg-color-map-card-border: #E3E0DB; --mg-color-map-water: #87ACBE; --mg-color-map-land-label: #D1C7B9; /* --------------------------------------------------------------------------- SEMANTIC ALIASES — what components reference. Surface-scoped. --------------------------------------------------------------------------- */ /* Surfaces */ --mg-surface-page: var(--mg-color-cream); --mg-surface-card: var(--mg-color-cream-card); --mg-surface-white: var(--mg-color-white); --mg-surface-dark: var(--mg-color-navy); --mg-surface-input: var(--mg-color-input-bg); --mg-surface-overlay-light: rgba(255, 255, 255, 0.80); --mg-surface-overlay-disabled: rgba(0, 0, 0, 0.10); /* Accents */ --mg-accent: var(--mg-color-yellow); --mg-accent-eyebrow: var(--mg-color-orange); /* Text on cream / warm card surfaces (two-colour rule) */ --mg-text-heading-warm: var(--mg-color-brown-gold); --mg-text-heading-warm-alt: var(--mg-color-brown-taupe); --mg-text-strong-warm: var(--mg-color-brown-strong); --mg-text-body-warm: color-mix(in srgb, var(--mg-color-brown-strong) 60%, transparent); /* Text on pure white surfaces (two-colour rule) */ --mg-text-heading-white: var(--mg-color-brown-taupe); --mg-text-body-white: var(--mg-color-ink); --mg-text-body-white-soft: color-mix(in srgb, var(--mg-color-ink) 75%, transparent); /* Text on dark / navy surfaces (two-colour rule) */ --mg-text-heading-dark: var(--mg-color-white); --mg-text-body-dark: var(--mg-color-navy-text); --mg-text-legal-dark: var(--mg-color-navy-legal); /* Borders */ --mg-border-form: var(--mg-color-form-border); --mg-border-form-on: var(--mg-color-form-border-on); --mg-border-row: var(--mg-color-row-divider); --mg-border-dark: var(--mg-color-navy-border); /* Radii */ --mg-radius-sm: 2px; /* compact buttons, pills, inputs */ --mg-radius-md: 4px; /* large CTAs, cards, form card */ --mg-radius-tab: 8px; /* tab top corners (what we build) */ --mg-radius-pill: 999px; /* circular */ /* Spacing scale (4-based) */ --mg-space-1: 4px; --mg-space-2: 8px; --mg-space-3: 12px; --mg-space-4: 16px; --mg-space-5: 20px; --mg-space-6: 24px; --mg-space-7: 32px; --mg-space-8: 40px; --mg-space-9: 48px; --mg-space-10: 56px; --mg-space-11: 64px; --mg-space-12: 96px; --mg-space-13: 120px; --mg-space-14: 136px; /* Section padding presets */ --mg-section-pad: var(--mg-space-12); /* 96px default */ --mg-section-pad-tight: var(--mg-space-11); /* 64px */ --mg-section-pad-loose: var(--mg-space-14); /* 136px (process) */ /* Wave-divider band height — shared by .section-wave and by sections that need to add equal extra padding on their dividered side(s). */ --mg-wave-h: clamp(40px, 4.5vw, 75px); /* Layout */ --mg-container-max: 1280px; --mg-container-narrow: 856px; /* hero text width-cap */ --mg-topbar-height: 112px; /* Typography — families */ --mg-font-display: "Fraunces", Georgia, "Times New Roman", serif; --mg-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Typography — size scale */ --mg-text-xs: 11px; /* legal */ --mg-text-sm: 12px; /* sublabel */ --mg-text-base: 13px; /* card body, role */ --mg-text-md: 14px; /* nav, eyebrow, form labels */ --mg-text-body: 16px; /* body default */ --mg-text-lg: 20px; /* hero subhead, person name, form section h */ --mg-text-step: 22px; /* process step title */ --mg-text-h3: 32px; /* map "MELBOURNE" */ --mg-text-h2: 56px; /* section headlines */ --mg-text-h1: 64px; /* hero headline */ /* Typography — weight */ --mg-weight-regular: 400; --mg-weight-medium: 500; --mg-weight-semibold: 600; --mg-weight-bold: 700; /* Typography — line height */ --mg-leading-tight: 1.1; /* display */ --mg-leading-snug: 1.15; /* card titles, h2 */ --mg-leading-display: 1.2; /* hero */ --mg-leading-normal: 1.5; /* body */ /* Typography — tracking */ --mg-track-eyebrow: 0.1em; /* eyebrow uppercase ≈ 1.4px on 14 */ --mg-track-eyebrow-wide: 0.18em; /* footer eyebrow wider ≈ 2px on 13 */ --mg-track-button: 0.05em; /* button labels */ /* Shadows */ --mg-shadow-card: 0 0 2px 0 rgba(0,0,0,0.20), 0 8px 32px 0 rgba(17,17,26,0.05); --mg-shadow-pill: 0 1px 1.5px 0 rgba(0,0,0,0.20); /* Motion */ --mg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mg-dur-fast: 150ms; --mg-dur-base: 240ms; --mg-dur-slow: 400ms; } /* --------------------------------------------------------------------------- Surface-scoped body-text override. Every section sets `data-surface` (or .bg-* class) so the two-colour rule applies automatically. Components reference --mg-text-heading / --mg-text-body without caring what surface they're on. --------------------------------------------------------------------------- */ :root, [data-surface="cream"] { --mg-text-heading: var(--mg-text-heading-warm); --mg-text-body: var(--mg-text-body-warm); --mg-text-strong: var(--mg-text-strong-warm); } [data-surface="white"] { --mg-text-heading: var(--mg-text-heading-white); --mg-text-body: var(--mg-text-body-white); --mg-text-strong: var(--mg-text-body-white); } [data-surface="dark"] { --mg-text-heading: var(--mg-text-heading-dark); --mg-text-body: var(--mg-text-body-dark); --mg-text-strong: var(--mg-text-heading-dark); } /* Reduced-motion baseline — every animation honours this. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }