/* ============================================================================ Mirelis Food Systems — Brand Tokens ---------------------------------------------------------------------------- Single source of truth for palette, typography, spacing, and component rules across mirelisfood.com. Grounded in: - 10_Entity/14_Brand/Brand_Standards.md (palette §8, typography §9) - 10_Entity/14_Brand/Design_Standards.md (layout §3, motion §7, buttons/cards §9, icons §6, focus rings §12, anti-patterns §13) Loaded from every page's as: Updated: 2026-04-18 (v2 — A10 redesign: navy+slate palette, bento grid, subtle editorial shadow allowance, layered-offset hero-image pattern, grain texture utility) ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Design tokens — CSS custom properties -------------------------------------------------------------------------- */ :root { /* === Palette (Brand_Standards §8, Stitch-locked 2026-04-18 pm) == The warm cream/espresso/bark palette was retired in favor of a cooler technical-infrastructure palette: off-white + deep navy + gold + white cards. Variable names retained so existing markup continues to resolve correctly; token *values* updated. See Brand_Standards §8 for palette narrative. */ /* Primary surfaces */ --brand-cream: #FAFAFA; /* primary page background (off-white) */ --brand-cream-warm: #F1F5F9; /* subtle darker surface, hairlines (slate-100) */ --brand-white: #FFFFFF; /* pure white — card pop on off-white pages */ --brand-slate-50: #F8FAFC; /* flagship-card contrast (between white and slate-100) */ /* Text / dark anchor */ --brand-espresso: #0F172A; /* primary body text + dark sections (deep navy) */ --brand-bark: #475569; /* secondary text (slate-600) */ --brand-gray-soft: #64748B; /* tertiary/meta text (slate-500) — 2026-05-30 audit M3: bumped from slate-400 #94A3B8 to pass WCAG AA on light surfaces (~4.6:1). Navy surfaces keep slate-400 via explicit overrides below. */ /* Navy dark-section palette (converged with espresso — same #0F172A now) */ --brand-navy: #0F172A; /* dark sections (Stats, Final CTA, feature blocks) */ --brand-navy-soft: #1E293B; /* navy secondary / hover within navy (slate-800) */ --brand-slate: #64748B; /* secondary accent (slate-500) */ --brand-slate-light: #E2E8F0; /* outline-variant / subtle divider surfaces (slate-200) */ /* Gold accent (unchanged) */ --brand-gold: #B4975A; --brand-gold-deep: #8F7644; --brand-gold-light: #D9C08A; --brand-gold-logo: #C9A961; /* LOGO FILES ONLY */ /* UI-only signal colors (never marketing) */ --brand-alert: #B4482F; --brand-forest: #3F5E3B; /* Alpha-safe mixes (recomputed for new palette) */ --espresso-04: rgba(15, 23, 42, 0.04); --espresso-08: rgba(15, 23, 42, 0.08); --navy-04: rgba(15, 23, 42, 0.04); --navy-08: rgba(15, 23, 42, 0.08); --navy-20: rgba(15, 23, 42, 0.20); --cream-80: rgba(250, 250, 250, 0.95); /* off-white 95% for glass nav */ --gold-20: rgba(180, 151, 90, 0.20); --gold-40: rgba(180, 151, 90, 0.40); /* === Fluid type scale — Stitch-rebalance 2026-04-19 late pm ===== Prior pass (2026-04-18/19 am) pushed the ceilings too high: at wide viewports card titles were rendering at 64px and the About hero `hero-display` at 108px, which dwarfed section h2s and broke visual hierarchy. New ladder preserves Stitch weight but restores h1 > h2 > card-title > sub-heading ordering at every breakpoint. Targets at 1280px CSS viewport: hero-display 65 > h1 51 > h2 45 > card-title 37 > sub 26 Targets at 375px CSS viewport: hero-display 48 > h1 40 > h2 36 > card-title 30 > sub 22 */ --step--1: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-3: clamp(1.375rem, 1.2rem + 0.55vw, 1.875rem); /* h4, sub-card h3, 22-30px */ --step-4: clamp(1.875rem, 1.55rem + 0.95vw, 2.75rem); /* card-title scale, 30-44px */ --step-5: clamp(2.25rem, 1.85rem + 1.2vw, 3.25rem); /* h2 — section headlines, 36-52px */ --step-6: clamp(2.5rem, 2rem + 1.5vw, 3.75rem); /* h1 — page titles, 40-60px */ --step-7: clamp(3rem, 2.25rem + 2.25vw, 4.5rem); /* hero-display peak, 48-72px */ /* === Spacing scale (Design_Standards §3 — 8px base) ============ */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 5rem; --space-8: 6rem; /* === Radii ===================================================== */ --radius-sm: 4px; --radius: 6px; /* buttons */ --radius-lg: 8px; /* cards */ /* === Shadows (Design_Standards §9 — subtle editorial only) ===== */ --shadow-rest: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-hover: 0 20px 40px -10px rgba(15, 23, 42, 0.08); --shadow-editorial: 0 32px 64px -12px rgba(15, 23, 42, 0.20); --shadow-ink: 0 4px 24px -2px rgba(15, 23, 42, 0.04); /* === Typography families (Brand_Standards §9, Stitch-locked 2026-04-18 pm) == Display face updated from Newsreader to Noto Serif to match Stitch reference aesthetic — Alex explicit preference. Noto Serif is slightly larger-set and more newspaper-weight than Newsreader at the same pt size, which is what gives the Stitch design its visual impact. */ --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* === Motion (Design_Standards §7) ============================== */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --transition-hover: 150ms ease-out; --transition-card: 500ms var(--ease-premium); --transition-image: 700ms var(--ease-premium); /* === Layout constraints ======================================== */ --content-max: 75rem; /* 1200px */ --content-wide: 90rem; /* 1440px — for wide bento-grid layouts */ --prose-max: 72ch; } /* ---------------------------------------------------------------------------- 2. Base — html/body reset + typographic defaults -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; font-size: 16px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--brand-espresso); background: var(--brand-cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; } ::selection { background: var(--brand-gold); color: var(--brand-espresso); } img, svg, video { max-width: 100%; display: block; height: auto; } /* ---------------------------------------------------------------------------- 3. Typography (Brand_Standards §9) -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--brand-espresso); text-wrap: balance; hanging-punctuation: first last; font-feature-settings: "ss01", "onum", "calt"; } /* Specificity bump — 2026-04-19 late pm. brand-tokens.css loads via BEFORE the Tailwind Play CDN