/* ============================================================ BLOOM & BREW CAFÉ — brand tokens + recolorable logo Sourced verbatim from the brand system (_bloom_brand_src/assets/brand.css). Do not fork the palette here — this is the single source of truth for the site. Fonts are loaded via in each page's (not @import) to avoid a render-blocking request chain — see the head of index.html / menu / visit / privacy. ============================================================ */ :root { /* core palette (sampled from the logo) */ --cream: #FBF2EC; --ivory: #FDF9F5; --charcoal: #241914; --burgundy: #6B4341; --blush: #E7BEB2; --sage: #9DA890; /* tints */ --blush-tint: #F4E0D9; --sage-tint: #DCE0D2; --line-soft: rgba(36,25,20,0.14); --line-hair: rgba(36,25,20,0.10); /* type */ --serif: 'Cormorant Garamond', Georgia, serif; --script: 'Pinyon Script', cursive; --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; /* logo default channels (full color) */ --logo-bg: var(--cream); --logo-ring: var(--burgundy); --logo-text: var(--charcoal); --logo-script: var(--charcoal); --logo-line: var(--charcoal); --logo-flower: var(--blush); --logo-flower-stroke: #D69A8C; --logo-core: #E7B96A; --logo-pollen: #B8852F; } /* recolorable logo (channels swap via the variants below) */ .lg { width: 100%; height: 100%; display: block; } .lg .lg-bg { fill: var(--logo-bg); } .lg .lg-ring { stroke: var(--logo-ring); stroke-width: 1.4; } .lg .lg-text { fill: var(--logo-text); font-family: var(--serif); font-weight: 500; } .lg .lg-monogram { fill: var(--logo-script); font-family: var(--script); } .lg .lg-script-b path { fill: none; stroke: var(--logo-script); stroke-linecap: round; stroke-linejoin: round; } .lg .lg-lines path { stroke: var(--logo-line); stroke-width: 1.1; } .lg .lg-dot { fill: var(--logo-line); } .lg .lg-rule { stroke: var(--logo-text); stroke-width: 1; } .lg .lg-petal { fill: var(--logo-flower); stroke: var(--logo-flower-stroke); stroke-width: 0.7; } .lg .lg-petal-core { fill: var(--logo-core); } .lg .lg-petal-pollen { fill: var(--logo-pollen); } .lg-full { } .lg-reversed { --logo-bg: var(--charcoal); --logo-ring: var(--cream); --logo-text: var(--cream); --logo-script: var(--cream); --logo-line: var(--cream); --logo-flower: var(--blush); --logo-flower-stroke: var(--blush); --logo-core: var(--cream); --logo-pollen: var(--charcoal); } .lg-plain { --logo-bg: transparent; } .lg-plain .lg-ring { stroke: transparent; }