/* ============================================================ CS Butcher — Colors & Type ------------------------------------------------------------ The single source of truth for color, typography, spacing, radius, shadow and motion tokens. Load this BEFORE any product-specific stylesheet. The token names below stay close to the originals in styles.css (--red, --cream, --tan, --charcoal) so existing code keeps working, but a richer set of semantic aliases has been layered on top (--brand, --bg, --fg-1, --fg-2, --border, --surface, etc). NOTE ON FONTS We have UPGRADED from the original system-serif/system-sans pairing to a curated webfont stack. Substitutions are flagged in README.md — swap them out if you ever get the "official" CS Butcher specimen files. ============================================================ */ /* fonts/fonts.css is now loaded as a parallel tag in each HTML page */ :root { /* ───────── Brand palette ───────── */ --red: #8b1a1a; /* primary — Maltese-butcher red */ --red-dark: #6b1010; /* hover / press */ --red-light: #a52020; /* hilights, accents */ --red-tint: #fdf6ec; /* warmest cream — same as --cream */ --cream: #fdf6ec; /* page background */ --tan: #e8d5b7; /* warm neutral, dividers, callouts */ --tan-dark: #c9b48a; /* tan border / muted accent */ --tan-tint: #fdf1e4; /* lightest tan, used in soft gradients */ --charcoal: #1c1c1c; /* ink / dark surfaces */ --charcoal-2: #2d1010; /* warm-charcoal used in hero gradient */ --grey: #555555; /* secondary text */ --grey-2: #888888; /* tertiary text */ --grey-light: #f5f5f5; /* alt section background */ --white: #ffffff; /* ───────── Status / semantic ───────── */ --success: #2e7d32; /* green — order completed, "added" */ --success-bg: #f0fdf4; --success-border:#a7f3d0; --success-ink: #166534; --warning: #92400e; --warning-bg: #fffbeb; --warning-border:#fde68a; --danger: #b91c1c; --danger-bg: #fff0f0; --danger-border: #f5c0c0; --info: #1d4ed8; --info-bg: #eff6ff; --info-border: #bfdbfe; /* ───────── Channel colors ───────── */ --whatsapp: #25d366; --whatsapp-dark: #1eb955; --facebook: #1877f2; /* ───────── Category accents ───────── Used as fallback dots / chip backgrounds when a category photograph isn't available. NEVER use as primary brand accents. */ --cat-beef: #a83232; --cat-lamb: #c98765; --cat-pork: #e9b8a6; --cat-chicken: #d4a85e; --cat-special: #8b1a1a; /* ───────── Semantic aliases ───────── */ --brand: var(--red); --brand-hover: var(--red-dark); --bg: var(--cream); --bg-alt: var(--grey-light); --bg-dark: var(--charcoal); --surface: var(--white); --fg-1: var(--charcoal); /* headings, primary text */ --fg-2: var(--grey); /* body copy */ --fg-3: var(--grey-2); /* meta, captions */ --fg-inverse: var(--white); --border: var(--tan); --border-strong: var(--tan-dark); --divider: rgba(0,0,0,0.06); /* ───────── Typography — families ───────── */ --font-display: 'Playfair Display', Georgia, 'Iowan Old Style', serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ───────── Type — sizes ───────── */ --fs-display: clamp(2.5rem, 5.5vw, 4rem); /* 40 → 64 */ --fs-h1: clamp(2rem, 5vw, 3.5rem); /* 32 → 56 */ --fs-h2: clamp(1.5rem, 3vw, 2.2rem); /* 24 → 35 */ --fs-h3: 1.2rem; /* 19.2 */ --fs-h4: 1rem; /* 16 */ --fs-lead: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.78rem; /* 12.5 */ --fs-eyebrow: 0.78rem; /* uppercase tracking */ /* ───────── Type — weights & leading ───────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 700; --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.65; --lh-loose: 1.75; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; /* used on all .eyebrow / hero-badge etc */ /* ───────── Spacing scale (rem-based, 4px grid) ───────── */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ /* ───────── Radius ───────── */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; /* default — buttons, inputs */ --radius-md: 12px; /* cards */ --radius-lg: 14px; /* large surfaces, modals */ --radius-xl: 16px; /* hero photo, drawers */ --radius-pill: 999px; /* ───────── Shadows ───────── */ --shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-hover: 0 8px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.07); --shadow-lg: 0 24px 64px rgba(0,0,0,0.20); --shadow-brand: 0 6px 20px rgba(139,26,26,0.30); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* ───────── Motion ───────── */ --transition: 0.2s ease; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ───────── Z-index ───────── */ --z-nav: 100; --z-sticky: 50; --z-cart-bar: 150; --z-overlay: 200; --z-toast: 300; --z-modal: 500; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply default look-and-feel anywhere this file is imported. ============================================================ */ html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { font-family: var(--font-body); color: var(--fg-2); line-height: var(--lh-base); } small { font-size: var(--fs-xs); color: var(--fg-3); } code, kbd, pre, samp { font-family: var(--font-mono); } /* Eyebrow / kicker label */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand); }