/* ========================================================================== AGL SURFACES - DESIGN SYSTEM FOUNDATIONS Tier 1 of 4 (token layer, ported from AGL_Tier1_Material_Foundations) Cascade position 1 of 5. Everything downstream references these tokens. ========================================================================== */ :root{ /* ---------------------------------------------------------------------- COLOUR TOKENS · Architectural Noir Grounds are warm near-blacks (never pure #000 — pure black flattens material photography). Ivory, not white. Gold is an accent metal, never a field. Logo greens are LOGO-ONLY inks — see §03. CMYK values are FOGRA39 working approximations; press-confirm before production (see §15 Print Bridge). -------------------------------------------------------------------- */ /* Grounds — four steps of dark, lightest to deepest use */ --agl-noir-950: #0b0b0a; /* base ground · page, hero · CMYK ~60/55/55/95 rich black */ --agl-noir-900: #121110; /* raised ground · alternating bands */ --agl-noir-850: #171614; /* panel · cards, notes */ --agl-noir-800: #1d1b18; /* panel-2 · hover, inset */ /* Text ramp — warm, never blue-grey */ --agl-ivory: #f4f2ed; /* primary text · CMYK ~3/3/6/0 */ --agl-stone-300: #b9b4aa; /* secondary · leads, body on dark */ --agl-stone-500: #837e74; /* muted · captions, meta */ --agl-stone-700: #4f4b44; /* faint · disabled, watermarks */ /* Accent metal */ --agl-gold: #c8b78a; /* champagne gold · CMYK ~22/26/50/3 (pending press) */ --agl-gold-deep: #a4946c; /* pressed/hover gold */ --agl-gold-08: rgba(200,183,138,.08); --agl-gold-14: rgba(200,183,138,.14); --agl-gold-ink: #756844; /* gold as TEXT on light grounds · AA verified §16 */ /* Daylight grounds — the ivory galleries (v1.1). Secondary mode: deployed inside the noir canvas for material display + long reading. */ --agl-day-50: #f7f5f0; /* base light ground · gallery wall */ --agl-day-100: #f0ede5; /* raised light ground · alternating bands */ --agl-day-200: #e7e3d9; /* light panel · cards, wells */ /* Ink ramp — text on light grounds */ --agl-ink: #16140f; /* primary on light */ --agl-ink-2: #4a463f; /* secondary on light */ --agl-ink-3: #6e685e; /* muted on light · large-only on day-200 */ /* Hairlines on light */ --agl-hairline-day: rgba(22,20,15,.16); --agl-hairline-day-soft: rgba(22,20,15,.09); /* Scrim — mandatory under type on photography (v1.1 law, §12) */ --agl-scrim: linear-gradient(180deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,.22) 45%, rgba(11,11,10,.62) 100%); /* side-weighted scrim for content-left compositions on BRIGHT photography (v1.5.1) */ --agl-scrim-side: linear-gradient(92deg, rgba(11,11,10,.78) 0%, rgba(11,11,10,.52) 40%, rgba(11,11,10,.10) 72%), linear-gradient(180deg, rgba(11,11,10,.38) 0%, rgba(11,11,10,0) 30%, rgba(11,11,10,0) 72%, rgba(11,11,10,.34) 100%); /* Logo inks — LOGO-ONLY. Never UI, never copy, never decoration. */ --agl-green-light:#8dc63f; --agl-green-mid: #39b54a; --agl-green-deep: #009444; --agl-green-shadow:#007b38; --agl-logo-ink: #231f20; /* Functional status — desaturated so they never compete with the brand */ --agl-ok: #7d9678; /* sage · confirmations */ --agl-warn: #b3925f; /* amber-leather · cautions */ --agl-error: #b07a6a; /* clay · errors */ /* Hairlines — the system's primary structural ink */ --agl-hairline: rgba(244,242,237,.13); --agl-hairline-soft: rgba(244,242,237,.07); --agl-hairline-gold: rgba(200,183,138,.35); /* ---------------------------------------------------------------------- TYPE TOKENS · per Decision Record 01 -------------------------------------------------------------------- */ --agl-display: 'Cormorant Garamond', serif; --agl-body: 'Archivo', sans-serif; /* Guardrail floors (Decision Record 01 — rules, not suggestions) */ --agl-display-min-weight-dark: 500; /* Cormorant on noir grounds */ --agl-display-min-px: 26px; /* below this, Archivo owns every word */ --agl-display-min-pt: 18pt; --agl-label-width: 112; /* Archivo wdth for eyebrows/labels */ --agl-body-width: 100; /* Archivo wdth for running text */ /* Type scale (fluid) */ --agl-t-display: clamp(44px, 6vw, 78px); /* hero only · Cormorant 500 */ --agl-t-section: clamp(30px, 3.6vw, 46px); /* section titles · Cormorant 500 */ --agl-t-sub: 24px; /* subsections · Cormorant 600 */ --agl-t-lead: 16.5px; /* leads · Archivo 300 */ --agl-t-body: 15px; /* body · Archivo 340 */ --agl-t-caption: 12px; /* captions · Archivo 380 */ --agl-t-label: 11px; /* eyebrows/labels · Archivo 500 wdth 112, ls .26em */ /* ---------------------------------------------------------------------- SPACE & LAYOUT TOKENS -------------------------------------------------------------------- */ --agl-container-narrow: 760px; /* reading width */ --agl-container-default: 1120px; /* standard sections */ --agl-container-wide: 1320px; /* galleries, slab grids */ --agl-section-x: 32px; --agl-section-x-mobile: 20px; --agl-section-y-xs: 32px; --agl-section-y-sm: 56px; --agl-section-y-md: 96px; /* default rhythm */ --agl-section-y-lg: 140px; /* flagship moments */ --agl-section-y-xl: 180px; /* hero only */ /* ---------------------------------------------------------------------- EDGE TOKENS · §06 — surfaces are cut, not rounded -------------------------------------------------------------------- */ --agl-edge: 0; /* canonical. Cards, buttons, panels, images. */ /* CONTAINMENT (v1.6) — grounds bleed, content is contained */ --agl-page-max: 1440px; /* content ceiling on any viewport */ --agl-stage-max: 1760px; /* wide tier: framed scenes only */ --agl-pad-x: clamp(24px, 5vw, 64px); /* responsive side padding */ --agl-inline: max(var(--agl-pad-x), calc((100% - var(--agl-page-max)) / 2)); --agl-edge-ease: 2px; /* micro-UI optical ease only (checkbox, swatch chip) */ /* ---------------------------------------------------------------------- LIGHT TOKENS · §07 — depth comes from light, not shadow -------------------------------------------------------------------- */ --agl-light-raise: linear-gradient(180deg, rgba(244,242,237,.045), rgba(244,242,237,0) 38%); /* --agl-light-rake retired in v1.4 — the diagonal streak read as glare, not architecture. Raking light remains a PHOTOGRAPHY direction (§12), never a CSS device. */ --agl-light-focus: 0 0 0 1px var(--agl-gold-deep); --agl-light-halo: 0 0 0 1px var(--agl-hairline-gold), 0 10px 36px rgba(200,183,138,.10); --agl-shadow-drop: 0 18px 44px rgba(0,0,0,.45); /* overlays only — the one true shadow */ /* ---------------------------------------------------------------------- MOTION TOKENS · §08 — cinematic, one curve -------------------------------------------------------------------- */ --agl-ease: cubic-bezier(.22,.61,.36,1); --agl-t-fast: .15s; /* colour, hairline, focus */ --agl-t-base: .25s; /* hover lifts, fades */ --agl-t-reveal: .6s; /* section reveals, image fades — the cinematic beat */ --agl-t-drift: 1.2s; /* ambient atmosphere drift */ /* ---------------------------------------------------------------------- PRINT BRIDGE TOKENS · §15 — values already proven in the catalogue press -------------------------------------------------------------------- */ --agl-print-trim-w: 230mm; /* catalogue trim */ --agl-print-trim-h: 300mm; --agl-print-bleed: 3mm; --agl-print-profile: "FOGRA39 · PDF/X-1a:2001"; --agl-pt-display: 34pt; --agl-pt-section: 22pt; --agl-pt-body: 10.5pt; --agl-pt-caption: 8.5pt; --agl-logo-min-stacked-px: 96px; --agl-logo-min-stacked-print: 25mm; --agl-logo-min-icon-px: 24px; --agl-logo-min-icon-print: 6mm; } /* --- Base ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--agl-body);color:var(--agl-ink);background:var(--agl-day-50);line-height:1.7;font-weight:380} img{max-width:100%;height:auto} a{color:inherit} button{font:inherit} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} }