/* ============================================================ SUMMIT PHARMACY — DESIGN TOKENS (Final pass — "Alpenglow" definitive) The ONLY file permitted to contain raw color literals; everything else references var(--*). Colour model is 60-30-10: 60 CREAM-FAMILY GROUNDS --paper / --cream 30 GREEN zones (hero / CTA band / footer) + controls + ink 10 WARM ACCENTS --orange / --orange-dark / --yellow Geometry: square (radius 0; 50% sun-discs only). Depth: flat (no shadows except the hard-edged alpenglow horizon). Motion <=150ms. ============================================================ */ :root { /* ---------- RAW PALETTE (only place raw hex is allowed) ---------- */ /* 60 — cream-family grounds */ --c-paper: #faf5e0; /* lightest ground */ --c-cream: #f6ecc9; /* deeper ground + mountain-divider sky */ --c-cream-dark: #e8ddb5; /* nav-pill hover on the tan header */ --c-panel: #fffdf4; /* warm white — chunk-panel fill (cream-family; sits lighter than paper) */ /* 30 — green: zones, controls, ink */ --c-green: #2d4e4f; /* canonical green — hero/CTA fill, ink on cream */ --c-green-750: #264243; /* depth step: footer, accordion/category bars, dropdowns */ --c-green-dark: #1f3536; /* opened bars, dusk-button text */ --c-green-mid: #3b6566; /* softer ink on cream (AA), bar hover */ /* 10 — warm accents */ --c-orange: #f79245; --c-orange-dark: #e07d2e; --c-yellow: #ffd566; --c-white: #ffffff; --c-ink-deep: #16292a; /* v4.1 Meridian v2: body text on orange (~6.2:1) */ /* Warm-neutral near-black for the print stylesheet */ --c-ink-950: #1a1817; --c-ink-800: #4a4744; /* RGB channels for alpha compositing */ --rgb-green: 45, 78, 79; --rgb-cream: 246, 236, 201; --rgb-paper: 250, 245, 224; --rgb-ink: 26, 24, 23; /* ============================================================ SEMANTIC TOKENS ============================================================ */ /* ---------- Grounds (the 60) ---------- */ --paper: var(--c-paper); /* body ground + paper bands */ --cream: var(--c-cream); /* cream bands + band above the divider */ --ground-header: var(--c-cream); /* tan chrome header */ /* Chunk panel (v3.1): legal ONLY as a fill on cream-family grounds, ALWAYS framed, never on green, never nested in another panel. --panel-frame is one site-wide choice. */ --panel: var(--c-panel); --panel-frame: 1px solid var(--hairline); /* ---------- Green (the 30) ---------- */ --green: var(--c-green); /* hero / CTA band fill + ink */ --green-750: var(--c-green-750); /* footer + control bars */ --green-dark: var(--c-green-dark); --green-mid: var(--c-green-mid); /* ---------- Ink ---------- */ --ink: var(--c-green); /* body + headings on cream grounds */ --ink-soft: var(--c-green-mid); /* secondary ink on cream (AA) */ --ink-invert: var(--c-paper); /* text in a green zone */ --ink-invert-soft: rgba(var(--rgb-paper), 0.82); /* ---------- Accents (the 10) ---------- */ --accent: var(--c-orange); --accent-dark: var(--c-orange-dark); --highlight: var(--c-yellow); /* highlight ON green */ /* ============================================================ MERIDIAN v2 SURFACE ROLES (Pass 10 / WS1) — tan is BACKGROUND-ONLY; yellow + orange are promoted to active surfaces. on yellow → --ink (headings + body, ~6.5:1) on orange → --ink for headings/large-bold (~3.9 AA-large); body → --ink-deep (~6.2) (cream text on orange is FORBIDDEN, ~2.1) on green → --paper text; --highlight (yellow) accents/links Dosage: max ONE solid orange band-scale surface per page; solid orange and solid yellow bands are never adjacent (a neutral band must separate them). ============================================================ */ --surface-paper: var(--c-paper); /* page/band background only */ --surface-tan: var(--c-cream); /* header chrome + band background only — never on cards/chips */ --surface-green: var(--c-green); /* structural dark surface (bands, footer, accordion heads) */ --surface-yellow: var(--c-yellow); /* workhorse highlight surface (intro panels, trust strip, tiles) */ --surface-orange: var(--c-orange); /* high-energy accent (primary CTA, chips, ≤1 band/pg) */ --ink-deep: var(--c-ink-deep);/* body text on orange */ /* Sanctioned "alpenglow fade" — the ONLY gradient (arch CTA + optional hero scrims) */ --alpenglow-fade: linear-gradient(180deg, var(--c-yellow) 0%, var(--c-orange) 100%); /* ---------- Links ---------- */ --link: var(--c-green); /* on cream: green + orange underline */ --link-hover: var(--c-orange-dark); --link-on-green: var(--c-yellow); /* in a green zone */ --link-on-green-hover: var(--c-orange); /* ---------- Hairlines (separators only, never boxes) ---------- */ --hairline: rgba(var(--rgb-green), 0.15); /* green hairline on cream grounds */ --hairline-strong: rgba(var(--rgb-green), 0.28); --hairline-on-green: rgba(var(--rgb-paper), 0.20); /* light hairline inside green depth */ /* ---------- Focus ---------- */ --focus-ring: var(--c-orange); /* ---------- Alpenglow horizon (hard-edged, zero blur) ---------- */ --horizon: inset 0 3px 0 0 var(--c-yellow), inset 0 6px 0 0 var(--c-orange); --horizon-below: 0 3px 0 0 var(--c-yellow), 0 6px 0 0 var(--c-orange); /* beneath the header */ /* ---------- Typography (self-hosted Nunito Sans, single family) ---------- */ --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-display: var(--font-sans); --font-body: var(--font-sans); --fw-normal: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem); --text-base: clamp(1rem, 0.965rem + 0.18vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.2rem); --text-xl: clamp(1.2rem, 1.12rem + 0.4vw, 1.35rem); --text-2xl: clamp(1.35rem, 1.22rem + 0.7vw, 1.6rem); --text-3xl: clamp(1.6rem, 1.42rem + 1.0vw, 1.95rem); --text-4xl: clamp(1.9rem, 1.62rem + 1.5vw, 2.5rem); --text-5xl: clamp(2.2rem, 1.85rem + 2.0vw, 3.0rem); /* WS5/WS8 display scale */ --fs-h1: clamp(2.5rem, 6vw, 5rem); /* homepage full-screen tagline only */ --fs-hero: clamp(1.9rem, 4.5vw, 3.5rem); /* interior page-hero h1 — elevated, mobile-safe */ --fs-h2: clamp(1.9rem, 3.5vw, 2.75rem); --leading-tight: 1.08; --leading-snug: 1.28; --leading-normal: 1.6; --leading-relaxed: 1.72; --tracking-tight: -0.015em; --tracking-caps: 0.12em; /* ---------- Spacing (4/8) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --section-py: clamp(3.5rem, 6vw, 6.5rem); --gutter: clamp(1.5rem, 4vw, 3rem); /* canvas gutter: >=24px mobile / >=48px desktop */ --anchor-offset: 6.25rem; /* sticky header + horizon clearance for deep links */ /* ---------- Vertical rhythm ladder (v4.0 — exact, tokenised) ---------- */ --rhythm-heading-rule: 0.75rem; /* heading -> orange rule = 12px */ --rhythm-rule-intro: 1.25rem; /* rule -> intro = 20px */ --rhythm-intro-content: 2rem; /* intro -> content = 32px */ --rhythm-section: clamp(4rem, 8vw, 6rem); /* content -> next section = 64px mobile / 96px desktop */ /* WS4 (Pass 10) — band rhythm */ --space-band: clamp(4rem, 8vw, 7rem); /* vertical padding on every .band */ --space-header-gap: 2rem; /* band-header -> intro-panel */ --space-intro-gap: 3rem; /* intro-panel -> grid */ /* WS-E (Addendum C) — breathing room */ --space-hero-gap: clamp(2.5rem, 5vw, 4rem); /* page-hero card -> first content block */ --space-stack: clamp(2rem, 3.5vw, 3rem); /* generic gap between top-level blocks in a band */ --box-label-list: 1rem; /* box label -> list = 16px */ --box-list-gap: 0.625rem; /* list item gap = 10px */ --box-pad: 1.75rem; /* box internal padding = 28px */ --card-pad: clamp(2rem, 5vw, 4rem); /* hero / CTA card internal padding */ /* ---------- Layout widths + measures ---------- */ --container: 1150px; --container-narrow: 760px; --container-wide: 1280px; --measure-prose: 70ch; --measure-box: 60ch; --measure-lede: 55ch; /* ---------- Geometry: rounded radius scale (v4.0) ---------- */ --radius-sm: 8px; /* inputs, small tiles (avatars, badges) */ --radius: 12px; /* boxes, buttons, accordion bars, callouts */ --radius-nav: 6px; /* compact header navigation controls */ --radius-lg: 20px; /* hero card + CTA card (WS8 elevation) */ --radius-arch: clamp(120px, 22vw, 260px); /* alpenglow-lookback arch top (WS8) — big sweep */ --radius-round: 50%; /* logo + sun discs + eyebrow marker only */ /* ---------- Motion (<=150ms UI transitions) ---------- */ --transition-fast: 0.12s ease; --transition-base: 0.15s ease; /* ---------- WS6 Alpenglow Rise (scroll-reveal) ---------- */ --motion-distance: 24px; --motion-duration: 550ms; --motion-duration-hero: 380ms; /* hero entrance runs faster so last settle ≤700ms from nav (≈130ms JS-parse latency + 120ms line-2 delay + this) */ --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-stagger: 70ms; /* ---------- Z-index scale (Pass 10 / WS1) — all layered UI uses these ---------- content under the action bar + menus; nothing ever covers the skip link. (--z-trail-index / --z-bottom-sheet retired with the Trail Index in WS-F.) */ --z-content: 1; --z-action-bar: 50; --z-header: 60; --z-dropdown: 65; /* nav dropdown menu, just above the header nav */ --z-mobile-menu: 70; --z-skip-link: 100; /* legacy alias kept so existing rules keep working until remapped */ --z-overlay: var(--z-mobile-menu); --z-skip: var(--z-skip-link); }