/* variables.css — Herb & House Brand Identity System v1.1 -------------------------------------------------------------------------- Canonical source of truth for colour, typography, spacing, and radius. Loaded BEFORE all other site CSS (see front/layout/default.blade.php). Every other CSS file MUST consume these tokens — never hard-code hex values or font-family strings. v1.1 CHANGES (supersedes v1.0): • Brand primary: #0A3323 → #0D4A31 (brighter, clearly reads as green) • Body font: Inter 13px/400 → DM Sans 16px/500 (bigger, bolder, friendlier) • Display font: Playfair 500/700 → Playfair 700/900 only (weight 500 deprecated) • Supporting palette refreshed to harmonise with brighter forest: Teal #105666 → #1A6580 Sage #839958 → #94B26B Clay #C78B6E → #D49A75 Parch #F7F4D5 → #F9F5DC Cream #FDFCF4 → (unchanged) • CTAs unified on Forest (was Teal in v1.0) • DM Serif Display dropped (was loaded but never used) -------------------------------------------------------------------------- */ :root { /* ====================================================================== 1. COLOUR — Primary palette (6 core colours) ====================================================================== */ /* Forest — brand primary, headings, nav, footer, CTAs */ --forest: #0D4A31; --forest-90: #11613E; /* one step lighter — hover on dark */ --forest-80: #157A4E; /* two steps lighter — illustration midtone */ --forest-800: #0A3D27; /* darker — footer depth */ --forest-900: #072B1B; /* deepest shade */ /* Teal Pine — links, subtle interactive accents, focus rings */ --teal: #1A6580; --teal-mid: #2A7A95; --teal-800: #144A5E; --teal-900: #0B2E3D; /* Sage — borders, dividers, category tags, support */ --sage: #94B26B; --sage-lt: #B0C98A; --sage-text: #4F6B2A; /* dark sage for text on cream */ /* Terracotta Clay — warmth, promo badges, hover accents, stars */ --clay: #D49A75; --clay-lt: #E2B59A; --clay-text: #7A3E20; /* dark clay for text on cream */ /* Parchment — page backgrounds, section fills */ --parchment: #F9F5DC; /* Cream White — card surfaces, modals, form inputs */ --cream: #FDFCF4; /* ---------------------------------------------------------------------- Extended forest tints (from v1.1 brand doc section 03) 50 / 100 / 200 / 400 / 600 (★=forest) / 800 / 900 ---------------------------------------------------------------------- */ --forest-50: #EBF2EE; --forest-100: #D0E2D8; --forest-200: #A8C5B5; --forest-400: #5C8B73; --forest-600: #0D4A31; /* = --forest */ /* Extended teal tints */ --teal-50: #E3EEF1; --teal-100: #B8D5DE; --teal-200: #6AAABA; --teal-400: #2D809A; --teal-600: #1A6580; /* = --teal */ /* ====================================================================== 2. NEUTRALS — utility / surface fills ====================================================================== */ --offwhite: #F2EFE0; /* input bg, tag bg */ --linen: #EAE6CC; /* hover bg, section alt */ /* ====================================================================== 3. TEXT ====================================================================== */ --text-body: #1C2B1E; --text-muted: #4A5E4D; --text-faint: #7A8C7D; /* ====================================================================== 4. BORDERS (forest-derived, low alpha) ====================================================================== */ --border: rgba(13, 74, 49, 0.12); --border-md: rgba(13, 74, 49, 0.20); /* ====================================================================== 5. SEMANTIC — feedback colours ====================================================================== */ --success: #2D7A4F; --success-bg: #d1fae5; --success-text: #065f46; --error: #C0392B; --error-bg: #fee2e2; --error-text: #991b1b; --warning-bg: #fef3c7; --warning-text: #92400e; --star: #D49A75; /* same as clay — rating stars */ /* ====================================================================== 6. RADIUS — border-radius scale ====================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 50px; /* ====================================================================== 7. SPACING — base-8 scale ====================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-16: 64px; /* ====================================================================== 8. TYPOGRAPHY — font tokens --font-display → Playfair Display (headings, titles, brand moments) --font-body → DM Sans (body copy, UI, labels, nav, descriptions) --font-mono → system monospace Loaded asynchronously in front/layout/default.blade.php — do NOT re-import these in any other CSS file. ====================================================================== */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ====================================================================== 9. TYPE SCALE — v1.1 (base body 16px, was 13px in v1.0) ====================================================================== */ --fs-display: 48px; --lh-display: 1.1; /* Playfair 900 — Hero/brand */ --fs-h1: 36px; --lh-h1: 1.2; /* Playfair 700 — Page title */ --fs-h2: 28px; --lh-h2: 1.25; /* Playfair 700 — Section */ --fs-h3: 22px; --lh-h3: 1.3; /* Playfair 700 — Card title */ --fs-lead: 18px; --lh-lead: 1.5; /* DM Sans 500 — Lead/subtitle */ --fs-body: 16px; --lh-body: 1.65; /* DM Sans 500 — BODY DEFAULT */ --fs-label: 13px; --lh-label: 1.4; /* DM Sans 600 — UI label */ --fs-caption: 12px; --lh-caption: 1.5; /* DM Sans 500 — Caption/fine */ --fs-price: 28px; --lh-price: 1.0; /* DM Sans 700 — Price/metric */ /* ====================================================================== 10. BRAND LEGACY ALIASES — for backward compatibility with older CSS Maps the previous "brand-*" token names to the new canonical tokens so old CSS keeps working without a big-bang rewrite. New code should use --forest / --teal / --sage / --clay directly. ====================================================================== */ --brand-primary: var(--forest); --brand-primary-hover: var(--forest-90); --brand-dark: var(--forest); --brand-darker: var(--forest-800); --brand-deep: var(--forest-900); --brand-mid: var(--forest-80); --brand-tint-light: var(--forest-50); --brand-tint-lighter: var(--offwhite); --brand-tint-pale: var(--forest-100); --brand-muted: var(--sage); --brand-muted-border: var(--border-md); --brand-gold: var(--clay); --brand-gold-dark: var(--clay-text); --brand-gold-light: var(--offwhite); --brand-accent: var(--clay); --brand-accent-hot: var(--clay-lt); --brand-bg: var(--cream); --brand-bg-section: var(--parchment); --brand-text-dark: var(--text-body); --brand-text-mid: var(--text-muted); --brand-text-muted: var(--text-faint); --brand-border: var(--border); --brand-border-mid: var(--border-md); --brand-danger: var(--error); --brand-danger-light: var(--error-bg); --brand-danger-pale: var(--error-bg); --brand-warning: var(--warning-text); --brand-success: var(--success); --brand-info: var(--teal); /* product-detail.css legacy aliases */ --green: var(--forest); --green-dk: var(--forest-900); --green-lt: var(--forest-50); --gold: var(--clay); --gold-lt: var(--offwhite); --dark: var(--text-body); --mid: var(--text-muted); --muted: var(--text-faint); --border-l: var(--border); --bg: var(--cream); /* common.css legacy aliases */ --color1: var(--text-body); --color2: var(--clay-text); --color3: var(--text-muted); --color4: var(--clay); --color5: var(--offwhite); } /* ====================================================================== GLOBAL TYPOGRAPHY BASELINE — v1.1 Applied at the document root so every page inherits the same stack. ====================================================================== */ html, body { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings default to Playfair Display, weight 700 minimum */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--forest); line-height: 1.2; } /* Pre / code / kbd default to mono */ pre, code, kbd, samp { font-family: var(--font-mono); } /* Form elements inherit the body font by default */ button, input, select, textarea { font-family: var(--font-body); } /* Links: Teal Pine — reserved for inline links per v1.1 brand doc */ a { color: var(--teal); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--forest); }