/* ============================================================= variables.css — Design Tokens · "Atelier" direction Single source of truth for colour, typography, spacing, radii, shadow and motion. Every other stylesheet consumes these tokens so the whole site stays visually consistent and is easy to re-tune from one place. Vision: a calm, warm, editorial recording-studio identity. Warm ivory paper as the base, deep espresso "ink" for cinematic feature bands and text, a single brass accent (the glow of tube gear / VU meters). One clean neutral sans (Inter) carries the whole system: heavy weights for the headlines, regular for body — modern, cohesive, easy to read. The monoline deer mark sets the minimal, precise tone. ============================================================= */ :root { /* ---------- Brand & accent ---------- One brass identity in three steps: --accent : warm brass for decorative use on any surface --accent-strong : deeper brass, readable as a text link on ivory --accent-ink : darkest brass for link hover / pressed */ --accent: #c49a5e; --accent-strong: #9a6c30; --accent-ink: #6f4d20; /* Legacy warm brown — kept as a token for any subtle non-link use */ --warm-brown: #5a3e2b; /* ---------- Surfaces ---------- Warm paper base + espresso ink. */ --surface: #f5f1ea; /* primary ivory paper (page + light sections) */ --surface-raised: #fbf8f2; /* cards / raised panels slightly above paper */ --surface-alt: #ebe4d7; /* deeper sand for alternating bands */ --surface-input: #ffffff; /* form fields — crisp white pops on ivory */ --dark: #17120c; /* primary espresso (hero / dark feature bands) */ --dark-soft: #1f1810; /* lifted espresso — footer */ --dark-media: #0f0c08; /* letterbox behind gallery / video */ /* Back-compat alias used by existing rules */ --dark-bg: var(--dark); /* ---------- Text on light surfaces ---------- */ --c-heading: #1c1710; /* headings */ --c-text: #4a4339; /* body copy */ --c-muted: #8a8073; /* captions, labels, meta */ /* ---------- Text on dark surfaces ---------- */ --c-on-dark: rgba(245, 241, 234, 0.92); --c-on-dark-muted: rgba(245, 241, 234, 0.58); /* Back-compat aliases */ --text-light: var(--c-on-dark); --text-muted: var(--c-on-dark-muted); /* ---------- Borders / hairlines ---------- */ --border: rgba(28, 23, 16, 0.12); --border-strong: rgba(28, 23, 16, 0.20); --border-on-dark: rgba(245, 241, 234, 0.20); /* ---------- Fonts ---------- Loaded from Google Fonts in each page . --font-display : Inter (heavy weights) — headlines --font-sans : Inter (regular) — nav, labels, buttons, body Both map to Inter; hierarchy comes from weight and size. */ --font-display: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Back-compat aliases: existing rules used --font-heading for BOTH titles and UI labels. Point the alias at the sans so any label-style rule stays clean; headings are switched to --font-display explicitly where needed. */ --font-heading: var(--font-sans); --font-body: var(--font-sans); /* ---------- Type scale ---------- */ --fs-display: clamp(52px, 9vw, 104px); /* hero headline */ --fs-h1: clamp(36px, 6vw, 72px); /* section titles */ --fs-h2: clamp(24px, 3vw, 40px); /* large sub-headings */ --fs-h3: 23px; /* card / legal headings */ --fs-lead: 19px; /* lead paragraphs */ --fs-body: 16px; /* body copy */ --fs-sm: 14px; /* small text / meta */ --fs-xs: 12px; /* eyebrow / uppercase labels */ /* ---------- Line heights ---------- */ --lh-tight: 1.04; /* display headlines */ --lh-snug: 1.18; /* sub-headings */ --lh-body: 1.7; /* body copy */ /* ---------- Letter spacing ---------- */ --tracking-label: 0.14em; /* uppercase nav / labels / buttons */ --tracking-wide: 0.26em; /* eyebrows / wordmark */ --tracking-title: 0.14em; /* legacy: used by uppercase mobile menu */ /* ---------- Spacing scale (4-based) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; /* Semantic spacing for the page shell */ --space-section: 120px; /* vertical section padding (generous rhythm) */ --space-gutter: 64px; /* horizontal section padding */ --space-navclear: 168px; /* top padding clearing the fixed nav */ /* ---------- Radii ---------- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px; /* ---------- Shadows (warm, soft) ---------- */ --shadow-sm: 0 4px 20px rgba(24, 19, 13, 0.08); --shadow-md: 0 24px 60px rgba(24, 19, 13, 0.18); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.2s; --dur-mid: 0.45s; }