/* ============================================================================ Theme: havebien — full brand design. Loaded AFTER css/base.css (see base.html), so these :root declarations win over base's defaults. A theme file contains ONLY token overrides — never a component/layout rule (those live once in base.css and are shared by every shop; havebien's design just re-points the tokens they read). This is a warm, editorial look: layered creams, forest green, honey gold; serif body copy (Crimson Pro), a sans-serif for small uppercase labels (DM Sans), and square corners. Ported from Kristina's WordPress/WooCommerce theme design (see docs/dev — the reference bundle is not in git). The storefront markup hardcodes , and this design has no dark variant, so only the light :root scope is overridden here. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Love+Light&display=swap'); :root { /* ── Fonts ── */ --font-display: 'Crimson Pro', Georgia, serif; /* headings + marketing accents */ --font-body: 'Crimson Pro', Georgia, serif; /* storefront body copy (serif) */ --font-eyebrow: 'DM Sans', sans-serif; /* small uppercase labels */ --font-script: 'Love Light', cursive; /* the "Havebien" wordmark */ --font: 'Crimson Pro', Georgia, serif; /* general UI type follows body */ /* ── Square corners everywhere the storefront reads a radius token ── */ --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; --radius-card: 0px; /* ── Roomier sections than the neutral default ── */ --section-pad: 5rem; /* ── Palette — cream / forest / honey ── */ --bg: #F7F2E8; /* cream page background */ --surface: #F7F2E8; /* cards sit on cream; borders separate them */ --surface-alt: #EDE8DA; /* alternating section background (cream2) */ --surface-warm: #EDE8DA; /* inset panels (value rows) */ --border: #DDD8C8; /* cream3 */ --border-strong: #DDD8C8; --border-focus: #C4980A; /* honey, for input focus */ --text: #3A2A14; /* brown */ --text-muted: #6B5030; /* brown2 */ --accent: #3A5C3A; /* forest green — buttons, links, accents */ --accent-hover: #2A4A2A; /* forest2 */ --accent-fg: #F7F2E8; /* cream text on the green */ --danger: #C0392B; --danger-hover: #A63125; --success: #3A5C3A; --warning: #C4980A; /* honey */ --hover-row: rgba(58, 92, 58, .05); --shadow: 0 10px 28px rgba(26, 58, 26, .12); /* ── Header / trust bar bar-color ── The design's header sits on cream (not a dark bar). Point the topbar tokens at the cream palette so the shared .site-header/.trust-bar rules render the design's light header with forest-green links and a honey accent border. */ --topbar-bg: #F7F2E8; /* cream header */ --topbar-text: #2A4A2A; /* forest links */ --topbar-fg: #2A4A2A; /* brand + active/hover link (forest) */ --topbar-border: #1A3A1A; /* dark forest rule */ --topbar-border-width: 4px; /* the design's heavy top+bottom rule */ /* Big Love Light wordmark. The header's tightened padding-block keeps the bar height ~constant as the script grows (see .site-header-inner). */ --brand-size: 2.9rem; /* Trust bar: dark forest with forest-light labels and a honey-gold accent. */ --trust-bg: #2A4A2A; /* forest2 */ --trust-text: #C8D8C0; /* forest-l */ --trust-accent: #C4980A; /* honey — dots + bottom rule */ /* ── Footer — dark forest with cream text and a honey top rule ── */ --footer-bg: #1A3A1A; /* forest3 */ --footer-text: #C8D8C0; /* forest-l */ --footer-fg: #F7F2E8; /* cream (logo + hover) */ --footer-border: #C4980A; /* honey top rule */ }