/* ============================================================ MESA 2026 — DESIGN TOKENS (ACSS-portable conventions) Everything is tokenized: fonts, type scale, spacing, colors, radius, borders, shadows, buttons, cards, layout, motion. Root font-size = 62.5% → 1rem = 10px Fluid range: 576px (57.6rem) → 2048px (204.8rem) ============================================================ */ :root { /* --------------------------------------------------------- TYPOGRAPHY — FAMILIES Brand: Playfair Display (display/headings) Body: Inter (replaces Gotham per 2026 direction) Logo: Punavuori (logo artwork only — never re-typeset) --------------------------------------------------------- */ --font-display: "Playfair Display", "Times New Roman", serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --heading-font-family: var(--font-display); --heading-font-weight: 600; --heading-line-height: 1.12; --heading-letter-spacing: -0.01em; --text-font-family: var(--font-body); --text-font-weight: 400; --text-line-height: 1.65; --accent-letter-spacing: 0.16em; /* eyebrow / accent text */ --accent-font-weight: 600; /* --------------------------------------------------------- TYPOGRAPHY — FLUID SCALE (m = base) --------------------------------------------------------- */ --text-xs: clamp(1.2rem, 1.16rem + 0.07vw, 1.3rem); --text-s: clamp(1.4rem, 1.36rem + 0.07vw, 1.5rem); --text-m: clamp(1.6rem, 1.52rem + 0.14vw, 1.8rem); --text-l: clamp(1.9rem, 1.70rem + 0.34vw, 2.4rem); --text-xl: clamp(2.3rem, 1.95rem + 0.61vw, 3.2rem); --text-xxl: clamp(2.8rem, 2.25rem + 0.95vw, 4.2rem); --h1: clamp(4.0rem, 3.06rem + 1.63vw, 6.4rem); --h2: clamp(3.2rem, 2.57rem + 1.09vw, 4.8rem); --h3: clamp(2.6rem, 2.21rem + 0.68vw, 3.6rem); --h4: clamp(2.2rem, 1.97rem + 0.41vw, 2.8rem); --h5: clamp(1.8rem, 1.64rem + 0.27vw, 2.2rem); --h6: clamp(1.6rem, 1.52rem + 0.14vw, 1.8rem); /* Oversized hero/display type */ --display: clamp(4.6rem, 2.96rem + 2.85vw, 8.8rem); --display-xl: clamp(5.2rem, 3.10rem + 3.70vw, 10.6rem); /* --------------------------------------------------------- SPACING — FLUID SCALE (m = base) --------------------------------------------------------- */ --space-xs: clamp(0.8rem, 0.72rem + 0.14vw, 1.0rem); --space-s: clamp(1.6rem, 1.44rem + 0.27vw, 2.0rem); --space-m: clamp(2.4rem, 2.17rem + 0.41vw, 3.0rem); --space-l: clamp(3.6rem, 3.13rem + 0.82vw, 4.8rem); --space-xl: clamp(5.4rem, 4.70rem + 1.22vw, 7.2rem); --space-xxl: clamp(8.0rem, 6.90rem + 1.90vw, 10.8rem); /* Vertical rhythm between sections (padding-block, never margin) */ --section-space-xs: clamp(3.2rem, 2.57rem + 1.09vw, 4.8rem); --section-space-s: clamp(4.8rem, 3.55rem + 2.17vw, 8.0rem); --section-space-m: clamp(6.4rem, 4.52rem + 3.26vw, 11.2rem); --section-space-l: clamp(9.6rem, 7.10rem + 4.35vw, 16.0rem); --section-space-xl: clamp(12.8rem, 9.98rem + 4.89vw, 20.0rem); --content-gap: var(--space-m); --container-gap: clamp(2.0rem, 1.3rem + 1.22vw, 3.8rem); --grid-gap: var(--space-m); /* --------------------------------------------------------- COLOR — BRAND (Brand Guidelines 2025, hue family 22–24) primary #fd721f MESA orange secondary #bc4c07 burnt orange / rust tertiary #6e320c deep kape brown accent #fc9f62 peach --------------------------------------------------------- */ --primary-h: 22; --primary-s: 98%; --primary-l: 56%; --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --primary-hover: hsl(var(--primary-h) var(--primary-s) 48%); --primary-ultra-light:hsl(var(--primary-h) 100% 96%); --primary-light: hsl(var(--primary-h) 98% 86%); --primary-semi-light: hsl(var(--primary-h) 98% 70%); --primary-semi-dark: hsl(var(--primary-h) 95% 44%); --primary-dark: hsl(var(--primary-h) 93% 34%); --primary-ultra-dark: hsl(var(--primary-h) 85% 22%); --primary-trans-5: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.05); --primary-trans-10: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.10); --primary-trans-20: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.20); --primary-trans-30: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.30); --primary-trans-40: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.40); --primary-trans-50: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.50); --primary-trans-60: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.60); --primary-trans-80: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.80); --secondary-h: 23; --secondary-s: 93%; --secondary-l: 38%; --secondary: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l)); --secondary-hover: hsl(var(--secondary-h) var(--secondary-s) 32%); --secondary-light: hsl(var(--secondary-h) 80% 88%); --secondary-dark: hsl(var(--secondary-h) 90% 28%); --secondary-trans-10: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / 0.10); --secondary-trans-20: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / 0.20); --tertiary-h: 23; --tertiary-s: 80%; --tertiary-l: 24%; --tertiary: hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l)); --tertiary-hover: hsl(var(--tertiary-h) var(--tertiary-s) 19%); --tertiary-light: hsl(var(--tertiary-h) 45% 90%); --tertiary-dark: hsl(var(--tertiary-h) 78% 16%); --tertiary-ultra-dark: hsl(var(--tertiary-h) 70% 10%); --tertiary-trans-10: hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l) / 0.10); --tertiary-trans-20: hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l) / 0.20); --tertiary-trans-60: hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l) / 0.60); --accent-h: 24; --accent-s: 96%; --accent-l: 69%; --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-hover: hsl(var(--accent-h) var(--accent-s) 61%); --accent-ultra-light:hsl(var(--accent-h) 100% 95%); --accent-light: hsl(var(--accent-h) 96% 84%); --accent-dark: hsl(var(--accent-h) 70% 52%); --accent-trans-10: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.10); --accent-trans-20: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.20); --accent-trans-30: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.30); /* Warm neutrals (base = ink, neutral = warm grey) */ --base-h: 23; --base-s: 35%; --base-l: 9%; --base: hsl(var(--base-h) var(--base-s) var(--base-l)); --base-trans-5: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.05); --base-trans-10: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.10); --base-trans-20: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.20); --base-trans-40: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.40); --base-trans-60: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.60); --base-trans-80: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.80); --neutral-h: 26; --neutral-s: 18%; --neutral-l: 46%; --neutral: hsl(var(--neutral-h) var(--neutral-s) var(--neutral-l)); --neutral-light: hsl(var(--neutral-h) 24% 82%); --neutral-dark: hsl(var(--neutral-h) 20% 30%); /* --------------------------------------------------------- COLOR — CONTEXTUAL --------------------------------------------------------- */ --bg-ultra-light: hsl(35 60% 98%); /* warm paper */ --bg-light: hsl(33 52% 95%); /* cream */ --bg-semi-light: hsl(31 48% 91%); /* deeper cream */ --bg-dark: var(--tertiary-dark); --bg-ultra-dark: var(--tertiary-ultra-dark); --text-dark: var(--base); --text-dark-muted: hsl(24 16% 34%); --text-light: hsl(33 60% 97%); --text-light-muted: hsl(30 30% 78%); --link-color: var(--secondary); --link-color-hover: var(--primary); /* --------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------- */ --border-width: 1px; --border-style: solid; --border-color-light: hsl(30 30% 86%); --border-color-dark: hsl(24 25% 22%); --border: var(--border-width) var(--border-style) var(--border-color-light); --radius-xs: 0.4rem; --radius-s: 0.8rem; --radius-m: 1.2rem; --radius-l: 2.0rem; --radius-xl: 3.2rem; --radius-xxl: 4.8rem; --radius-round: 999px; --radius: var(--radius-m); /* Brand arch motif (MESA interior arches / capiz windows) */ --radius-arch: var(--radius-round) var(--radius-round) var(--radius-l) var(--radius-l); /* --------------------------------------------------------- SHADOWS (warm-tinted, layered) --------------------------------------------------------- */ --shadow-color: 24 45% 15%; --shadow-m: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 4px 12px hsl(var(--shadow-color) / 0.08); --shadow-l: 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 10px 24px hsl(var(--shadow-color) / 0.10), 0 24px 48px hsl(var(--shadow-color) / 0.08); --shadow-xl: 0 4px 8px hsl(var(--shadow-color) / 0.07), 0 16px 32px hsl(var(--shadow-color) / 0.12), 0 40px 80px hsl(var(--shadow-color) / 0.14); --shadow-glow-primary: 0 8px 32px var(--primary-trans-40); /* --------------------------------------------------------- COMPONENTS — BUTTONS --------------------------------------------------------- */ --btn-padding-block: 1.4rem; --btn-padding-inline: 2.8rem; --btn-border-radius: var(--radius-round); --btn-font-family: var(--font-body); --btn-font-weight: 600; --btn-font-size: var(--text-s); --btn-letter-spacing: 0.02em; --btn-text-transform: none; --btn-line-height: 1; --btn-border-width: 2px; /* --------------------------------------------------------- COMPONENTS — CARDS --------------------------------------------------------- */ --card-padding: var(--space-m); --card-gap: var(--space-s); --card-border-radius: var(--radius-l); --card-bg: var(--bg-ultra-light); /* --------------------------------------------------------- LAYOUT --------------------------------------------------------- */ --container-width: 136.6rem; /* 1366px */ --container-width-narrow: 96rem; --container-width-wide: 156rem; --header-height: 8rem; /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --transition: all var(--duration-normal) var(--ease-out-expo); /* --------------------------------------------------------- Z-INDEX SCALE --------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-header: 1000; --z-modal: 2000; }