/* ============================================================ AUREAUX — Design Tokens Brand: deep forest green · champagne gold · warm ivory Source of truth: Aureaux Brand Guidelines 2026 v1.0 ============================================================ */ /* ---- Display typeface: IvyMode (via Adobe Typekit, loaded per-page in ). GC Commune is kept as a local fallback if Typekit is unavailable. ---- */ @font-face { font-family: 'GC Commune'; src: url('/fonts/gc-commune.woff2') format('woff2'), url('/fonts/gc-commune.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- Brand greens ---------- */ --green-ink: #010D04; /* near-black green — primary text on light */ --green-deep: #002615; /* deepest brand green */ --green-base: #0A2417; /* canvas for dark sections */ --green-mid: #0F2919; --green-soft: #163826; --sage: #367963; /* secondary green */ --sage-light: #4EA88B; /* ---------- Metals / accents ---------- */ --gold: #C29962; /* bronzed gold */ --gold-light: #DCBE86; /* champagne */ --gold-deep: #A87D45; /* ---------- Neutrals ---------- */ --ivory: #F6F2E9; /* warm paper — primary light canvas */ --ivory-2: #EFEADD; /* slightly deeper paper surface */ --cream: #FBF8F1; --white: #FFFFFF; --grey-200: #E6E6E6; --grey-400: #BCBEC0; /* ---------- Semantic surfaces ---------- */ --bg-base: var(--green-base); --bg-surface: var(--green-mid); --bg-elevated: var(--green-soft); --text-on-dark: #EAE7DC; --text-on-dark-muted: rgba(234, 231, 220, 0.62); --text-on-light: var(--green-ink); --text-on-light-muted: rgba(1, 13, 4, 0.62); --hairline-dark: rgba(220, 190, 134, 0.22); /* gold hairline on dark */ --hairline-light: rgba(1, 13, 4, 0.12); /* ---------- Type ---------- */ --font-display: 'ivymode', 'GC Commune', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --fs-eyebrow: 0.72rem; --tracking-eyebrow: 0.34em; --tracking-tight: -0.02em; --leading-body: 1.75; /* ---------- Spacing scale ---------- */ --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: 6rem; --space-10: 8rem; --pad-section-y: clamp(5rem, 11vw, 10rem); --pad-section-x: clamp(1.5rem, 6vw, 7rem); --maxw: 1320px; /* ---------- Radius ---------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- Shadows (layered, green-tinted) ---------- */ --shadow-sm: 0 1px 2px rgba(1, 13, 4, 0.06), 0 4px 12px rgba(1, 13, 4, 0.06); --shadow-md: 0 2px 4px rgba(1, 13, 4, 0.08), 0 14px 34px rgba(1, 13, 4, 0.12); --shadow-lg: 0 4px 8px rgba(1, 13, 4, 0.10), 0 30px 70px rgba(1, 13, 4, 0.22); /* ---------- Glass / liquid-metal button system ---------- Shared by every stylesheet (site.css, legal.css, inline blocks) so the whole site's buttons stay one material. */ --glass-blur: 14px; --glass-fill-dark: rgba(255, 255, 255, 0.06); /* keyline fill on dark surfaces */ --glass-fill-light: rgba(1, 13, 4, 0.035); /* keyline fill on light surfaces */ --glass-rim-dark: rgba(220, 190, 134, 0.24); /* static hairline fallback, dark */ --glass-rim-light: rgba(1, 13, 4, 0.14); /* static hairline fallback, light */ --btn-gold: linear-gradient(135deg, #E7CF9C 0%, var(--gold) 46%, #B0894C 100%); --btn-shadow: 0 1px 2px rgba(1,13,4,.10), 0 10px 24px rgba(1,13,4,.16), 0 20px 46px rgba(1,13,4,.14); --btn-shadow-hover: 0 2px 5px rgba(1,13,4,.14), 0 16px 34px rgba(1,13,4,.22), 0 30px 64px rgba(1,13,4,.20); /* ---------- Easing ---------- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Animatable angle for the travelling rim light on keyline buttons. Registered so it can tween; if unsupported the rim simply stays static and the button keeps its hairline border. */ @property --btn-angle { syntax: ""; inherits: false; initial-value: 0deg; }