/* ========================================================================== EXTRACT LABS — DESIGN TOKENS -------------------------------------------------------------------------- The single source of truth. Every component stylesheet references these --el-* variables and never hard-codes a hex, radius, or size. To retune the whole site, change a value here. To retune one component, override the relevant --el-* var inside that component's scope. Palette sampled from the approved navigation + category references: pine #274a47 (primary action), warm cream + cool mist backgrounds, sage neutrals, true-black type, crisp corners, flat surfaces. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND COLOR — raw values (rarely referenced directly; use roles) --------------------------------------------------------------------- */ --el-pine: #274a47; /* primary action: buttons, active states */ --el-pine-deep: #1f3d3a; /* hover / pressed pine */ --el-pine-tint: #e8eeec; /* cool mist — section background */ --el-sage: #788e8c; /* muted secondary: icons, meta */ --el-sage-soft: #a3b6b3; /* hairline rules, disabled */ --el-cream: #f8f6f3; /* warm background — section background */ --el-cream-deep: #efece6; /* warm card / inset on cream */ --el-black: #1a1a1a; /* true-black type (the "fresh" choice) */ --el-ink-2: #45504c; /* secondary text */ --el-ink-3: #6c7873; /* tertiary / captions */ --el-white: #ffffff; --el-line: rgba(26, 26, 26, 0.10); /* subtle border */ --el-line-strong: rgba(26, 26, 26, 0.16); /* offset border */ --el-coral: #ee8a5f; /* sparingly: promo accents only */ --el-star: #e0922f; /* review stars */ /* feedback */ --el-danger: #b23b2e; --el-success: var(--el-pine); /* --------------------------------------------------------------------- 2. SEMANTIC ROLES — what components should actually reference --------------------------------------------------------------------- */ --el-color-action: var(--el-pine); /* primary buttons */ --el-color-action-hover: var(--el-pine-deep); --el-color-on-action: var(--el-white); /* commerce: Add to cart is intentionally black, distinct from pine primary */ --el-color-cart: var(--el-black); --el-color-cart-hover: #000000; --el-color-on-cart: var(--el-white); --el-color-text: var(--el-black); --el-color-text-soft: var(--el-ink-2); --el-color-text-muted: var(--el-ink-3); --el-color-bg: var(--el-white); --el-color-bg-warm: var(--el-cream); --el-color-bg-cool: var(--el-pine-tint); --el-color-surface: var(--el-white); /* card face */ --el-color-surface-warm: var(--el-cream-deep); --el-color-border: var(--el-line); --el-color-border-offset: var(--el-line-strong); --el-color-rule: var(--el-sage-soft); /* hairline dividers / eyebrows */ /* --------------------------------------------------------------------- 3. TYPOGRAPHY — sans workhorse (display/body) + serif accent + mono. Swap a real face by changing one stack; everything inherits. ADOBE FONTS: the first family in each stack is the Adobe Fonts (Typekit) slug. Confirm the exact slug in your kit's CSS panel and swap if needed — the system fallbacks keep the site readable until the kit loads. --------------------------------------------------------------------- */ --el-font-display: "neue-haas-grotesk-display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --el-font-body: "neue-haas-grotesk-text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --el-font-serif: "freight-display-pro", Georgia, "Times New Roman", serif; /* editorial accent only */ --el-font-mono: "ibm-plex-mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* type scale — rebased so body = 1rem = 16px (clean rem math) */ --el-text-xs: 0.75rem; /* 12 — eyebrows, meta */ --el-text-sm: 0.875rem; /* 14 — fine print */ --el-text-base: 1rem; /* 16 — body default */ --el-text-md: 1.125rem; /* 18 — lead/intro */ --el-text-lg: clamp(1.25rem, 2vw, 1.5rem); /* card / sub headings */ --el-text-xl: clamp(1.5rem, 3vw, 2rem); /* section headings */ --el-text-2xl: clamp(2rem, 5vw, 3.25rem); /* hero */ --el-weight-normal: 400; --el-weight-medium: 500; --el-weight-semibold: 600; --el-weight-bold: 700; --el-leading-tight: 1.15; --el-leading-snug: 1.35; --el-leading-body: 1.6; --el-tracking-eyebrow: 0.12em; /* the uppercase letterspaced labels */ --el-tracking-tight: -0.015em; /* large headings */ /* --------------------------------------------------------------------- 4. RADIUS — crisp by default (the agreed move away from 28px) --------------------------------------------------------------------- */ --el-radius-sm: 6px; /* chips, inputs, small controls */ --el-radius: 8px; /* cards, buttons — the baseline */ --el-radius-lg: 14px; /* media panels, feature cards */ --el-radius-pill: 999px; /* nav, filter chips, CTAs */ /* --------------------------------------------------------------------- 5. ELEVATION — subtle. Light depth, optional offset borders. --------------------------------------------------------------------- */ --el-shadow-none: none; --el-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 1px 1px rgba(26, 26, 26, 0.04); --el-shadow: 0 2px 6px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.05); --el-shadow-hover: 0 8px 20px rgba(26, 26, 26, 0.09); /* default resting treatment for a card: choose shadow OR border via these */ --el-card-shadow: var(--el-shadow-sm); --el-card-border: 1px solid var(--el-color-border); /* --------------------------------------------------------------------- 6. SPACING — one scale, drives section padding + gaps everywhere --------------------------------------------------------------------- */ --el-space-1: 0.25rem; /* 4 */ --el-space-2: 0.5rem; /* 8 */ --el-space-3: 0.75rem; /* 12 */ --el-space-4: 1rem; /* 16 */ --el-space-5: 1.5rem; /* 24 */ --el-space-6: 2rem; /* 32 */ --el-space-7: 3rem; /* 48 */ --el-space-8: 4.5rem; /* 72 — section vertical rhythm */ --el-section-y: clamp(2.5rem, 6vw, 4.5rem); --el-gap: var(--el-space-4); --el-container: 1180px; /* --------------------------------------------------------------------- 7. MOTION --------------------------------------------------------------------- */ --el-ease: cubic-bezier(0.4, 0, 0.2, 1); --el-duration: 0.18s; --el-lift: translateY(-3px); /* focus ring — consistent, visible, brand-colored */ --el-focus-ring: 3px solid var(--el-pine); --el-focus-offset: 2px; } @media (prefers-reduced-motion: reduce) { :root { --el-duration: 0s; --el-lift: none; } }