/* ========================================================================= L'Atelier de MIA — Design Tokens Single source of truth. Authored from Master Playbook §8. Do not add values that do not appear in §8. Do not add accent colors. ========================================================================= */ :root { /* ---------- Color (§8) ---------- */ --canvas: #F5EFE4; --canvas-deep: #EDE6D8; --fg: #1A1612; --muted: #6A6258; --hairline: #D9D1C1; --error: #8E4A3C; /* Overlay text on photographic heroes (post-Playbook redesign — white on image). */ --white: #fff; /* ---------- Type families (§8) ---------- */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif; /* ---------- Type tokens (§8 table) ---------- */ /* display — hero serif headlines, 64/48, serif */ --type-display-font: var(--font-serif); --type-display-size: 64px; --type-display-size-mobile:48px; --type-display-weight: 300; --type-display-tracking: -0.01em; --type-display-case: none; /* headline — section openings, 36, serif */ --type-headline-font: var(--font-serif); --type-headline-size: 36px; --type-headline-weight: 300; --type-headline-tracking: -0.01em; --type-headline-case: none; /* sub-headline — in-flow headings, 24, serif */ --type-subheadline-font: var(--font-serif); --type-subheadline-size: 24px; --type-subheadline-weight: 300; --type-subheadline-tracking: 0; --type-subheadline-case: none; /* body-editorial — editorial paragraphs, 19, serif */ --type-body-editorial-font: var(--font-serif); --type-body-editorial-size: 19px; --type-body-editorial-weight: 400; --type-body-editorial-tracking: 0; --type-body-editorial-case: none; /* body-ui — interface text, 16, sans */ --type-body-ui-font: var(--font-sans); --type-body-ui-size: 16px; --type-body-ui-weight: 400; --type-body-ui-tracking: 0; --type-body-ui-case: none; /* caption — meta / secondary, 13, sans, muted */ --type-caption-font: var(--font-sans); --type-caption-size: 13px; --type-caption-weight: 400; --type-caption-tracking: 0; --type-caption-case: none; /* label-caps — spec labels, nav, 11, sans, uppercase, 0.14em */ --type-label-caps-font: var(--font-sans); --type-label-caps-size: 11px; --type-label-caps-weight: 500; --type-label-caps-tracking: 0.14em; --type-label-caps-case: uppercase; /* link-caps — primary links, 12, sans, uppercase, 0.12em */ --type-link-caps-font: var(--font-sans); --type-link-caps-size: 12px; --type-link-caps-weight: 500; --type-link-caps-tracking: 0.12em; --type-link-caps-case: uppercase; /* ---------- Spacing (§8) — 4/8/16/24/40/64/96/128/160/240 ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 128px; --space-9: 160px; --space-10: 240px; /* ---------- Motion (§8) — single easing, four durations ---------- */ --ease: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 300ms; --dur-medium: 450ms; --dur-slow: 800ms; --dur-reveal: 1100ms; /* ---------- Layout (Playbook 3 §2) ---------- Nav height token. Every page that carries `.page--no-hero` on reserves this much padding at the top so the fixed nav never overlaps the first pixel of content. Hero pages overlay the nav intentionally; they do not use this padding. */ --nav-height: 64px; } /* ---------- Reduced motion: collapse all durations to 0ms (§8) ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-medium: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } } /* ---------- Nav height narrows on mobile (Playbook 3 §2) ---------- */ @media (max-width: 899px) { :root { --nav-height: 56px; } }