/* ═══════════════════════════════════════════════════════ SUGARY GENESIS — SHARED DESIGN TOKENS One recipe book every Meyerz property reads from. v2 — strengthened foundation (Dec 2025 lockdown) ═══════════════════════════════════════════════════════ */ :root { /* ─── SURFACES ─── */ --bg: #0b0b0b; /* page */ --bg2: #111111; /* card / elevated */ --bg3: #161616; /* inset / pressed well */ --border: #222222; /* hairline */ --border2: #2a2a2a; /* stronger border */ /* ─── INK ─── */ --text: #ede9e3; /* main copy — warm off-white */ --text-2: #c8c4c0; /* secondary body */ --muted: #7a7268; /* labels / meta */ --dim: #5a5450; /* receipt-grade quiet */ /* ─── PRIMARY — MEYERZ ORANGE (action color, used across all properties) ─── */ --orange: #ff5a1f; --orange-hot: #ff7a3f; --orange-dim: rgba(255, 90, 31, 0.10); --orange-glow: rgba(255, 90, 31, 0.22); /* ─── FLAVOR PALETTE (Recognition Flavors) ─── */ /* Each flavor has: hot (text/icon), soft (backgrounds/bars), bg (deep surface) */ --sweet: #ff4d8d; --sweet-soft: #f08ab3; --sweet-bg: #130810; --zesty: #7ed940; --zesty-soft: #a8e27e; --zesty-bg: #0a1208; --salty: #3ec9d6; --salty-soft: #7ed8e2; --salty-bg: #060e10; --spicy: #e83416; --spicy-soft: #d87060; --spicy-bg: #130605; /* shifted redder so it doesn't collide with brand orange */ --plain: #b0a89e; --plain-soft: #c4bdb3; --plain-bg: #0e0e0d; --glazed: #d4a020; --glazed-soft: #dfb858; --glazed-bg: #110e06; /* ─── SECONDARY BRAND RED (wordmark, TM) ─── */ --red: #e03020; /* ─── STATE COLORS ─── */ --focus-ring: rgba(255, 90, 31, 0.55); --selected-bg: var(--orange-dim); --success: #7ed940; --error: #e83416; --warning: #d4a020; --info: #3ec9d6; /* ─── SEMANTIC ALIASES ─── Use these in new components instead of raw tokens. They let future brand tweaks flow through without find-replace. */ --action: var(--orange); --action-hover: var(--orange-hot); --action-tint: var(--orange-dim); --surface: var(--bg2); --surface-deep: var(--bg); --surface-inset: var(--bg3); --divider: var(--border); --divider-bold: var(--border2); /* ─── TYPE FAMILIES ─── */ --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif; --font-body: 'DM Sans', 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace; /* ─── FONT WEIGHTS ─── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* ─── TYPE SCALE ─── Built on a 1.250 (major third) modular scale, anchored at 17px body. Minimums: 16px body, 14px secondary, 12px label. NEVER go smaller. Line-heights: headlines 1.05–1.15 / body 1.55–1.7 / long-form 1.75. ────────────────── */ --fs-display-xl: clamp(4rem, 9vw, 8.5rem); /* hero billboard */ --fs-display-l: clamp(3rem, 5.5vw, 5rem); /* page hero */ --fs-display-m: clamp(2rem, 3.5vw, 3rem); /* section H2 */ --fs-display-s: 1.625rem; /* 26px — card title */ --fs-h3: 1.3125rem; /* 21px — sub-head */ --fs-body-l: 1.1875rem; /* 19px — lede paragraph */ --fs-body: 1.0625rem; /* 17px — default body */ --fs-body-s: 0.9375rem; /* 15px — secondary */ --fs-caption: 0.8125rem; /* 13px — captions */ --fs-label: 0.75rem; /* 12px — MIN for UI labels */ --fs-micro: 0.6875rem; /* 11px — mono eyebrows only, never sentence copy */ --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.22em; --leading-tight: 1.1; --leading-snug: 1.35; --leading-body: 1.6; --leading-loose: 1.75; /* ─── RADII (square-first) ─── */ --r-hairline: 1px; --r-s: 2px; --r-m: 3px; --r-l: 6px; --r-xl: 10px; /* ─── SPACING (4px base) ─── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 56px; --s-12: 72px; /* ─── SHADOWS ─── */ --shadow-chunk: 0 3px 0 0 #555, 0 4px 12px rgba(255,255,255,0.1); --shadow-orange: 0 4px 0 0 #7a2800, 0 6px 20px rgba(255, 90, 31, 0.15), 0 0 0 1px rgba(255, 90, 31, 0.08); --shadow-card: 0 4px 16px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset; --shadow-focus: 0 0 0 3px var(--focus-ring); /* ─── MOTION ─── */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 400ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 0.8, 0.2); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* ─── BREAKPOINTS (reference — use in @media) ─── */ --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1200px; --bp-xl: 1400px; /* ─── LAYOUT ─── */ --container-max: 1300px; --nav-height: 52px; } /* ─── GRAIN OVERLAY — scoped to dark surfaces only ─── */ body.sg-grain { position: relative; } body.sg-grain::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.35; mix-blend-mode: overlay; } /* ─── BASELINE ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--leading-body); overflow-x: hidden; } /* ─── FOCUS — consistent across all interactive elements ─── */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-s); } /* ─── TYPOGRAPHY UTILITIES ─── */ .sg-display { font-family: var(--font-display); letter-spacing: 0.02em; line-height: var(--leading-tight); } .sg-mono { font-family: var(--font-mono); } .sg-light { font-weight: var(--fw-light); } .sg-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--action); line-height: 1; } .sg-eyebrow::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--action); margin-right: 10px; vertical-align: middle; } .sg-kicker { font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1; } .sg-tm { font-size: 0.45em; vertical-align: super; color: var(--red); opacity: 0.7; font-weight: var(--fw-regular); } /* ─── BUTTONS ─── */ .sg-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--action); color: #000; font-family: var(--font-display); font-size: 1rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; border: none; padding: 18px 32px; cursor: pointer; border-radius: var(--r-hairline); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); text-decoration: none; line-height: 1; } .sg-btn-primary:hover { background: var(--action-hover); transform: translateY(-1px); } .sg-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: var(--tracking-wider); text-transform: uppercase; border: 1px solid var(--divider-bold); padding: 14px 24px; cursor: pointer; border-radius: var(--r-hairline); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); text-decoration: none; line-height: 1; } .sg-btn-secondary:hover { border-color: var(--text); color: var(--text); } .sg-btn-chunk { display: inline-flex; align-items: center; gap: 8px; background: #e0dbd8; color: #111; font-family: var(--font-mono); font-size: 0.7rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid #e0dbd8; padding: 14px 28px; cursor: pointer; border-radius: var(--r-m); box-shadow: 0 3px 0 0 #a09890; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); line-height: 1; } .sg-btn-chunk:hover { transform: translateY(-1px); box-shadow: 0 4px 0 0 #a09890, 0 6px 16px rgba(255,255,255,0.1); background: #fff; } .sg-btn-chunk:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #a09890; }