/* Kora Kitchens — the consumer-facing brand theme. Scoped under [data-brand="kora-kitchens"] (set once, server-side, on in webapp/templates/base.html — see webapp/app.py's brand_for_path()) so it never has to be remembered per-template. Applies to the marketing site and the client role's own views (Setup wizard, /settings, /estimate, /beta-chatbot, /view/client) — see brand_for_path()'s own prefix table for the exact routing. Token overrides ONLY — no new component classes and no structural (box-model) overrides live here. These are exactly webapp/static/ default.css's own former :root values verbatim (this palette used to BE that file's un-overridable default, before the base/theme split — see that file's own header comment for why that coupling was removed), so this is a pure rename/relocation for every value already in real use: zero visual change for any currently-existing Kora page. Load order is load-bearing: this file's must come after default.css's own (see base.html) — :root and [data-brand="..."] both target the same element with identical (0,1,0) specificity, so whichever loads last wins the tie for any token both declare. */ [data-brand="kora-kitchens"] { /* Palette — mapped 1:1 from landing.html's --bg/--surface/--raised/ --text/--muted/--divider (all either identical or a few hex steps off already, since this palette's original warm-cream direction was never far from the brand kit that came later). */ --color-bg: #f7f3ec; --color-bg-panel: #efe7d8; --color-bg-raised: #fdfbf6; --color-text: #33302a; --color-text-muted: #6f6656; --color-text-faint: #b3aa9c; --color-border: #ddd2bd; --color-border-strong: #c9bb9f; /* Brand accent — Kora Kitchens clay/terracotta (landing.html's --clay/--clay-100/--clay-ink). */ --color-accent: #c67139; --color-accent-soft: #f3e6dc; --color-accent-ink: #201e1d; /* Kora sage — landing.html's --sage. */ --color-positive: #7a8a5e; --color-negative: #a1583f; --color-negative-bg: #f6ece5; /* A 9-step neutral ramp, reusing Kora's own 9 already-distinct hex values above in light->dark order — nothing invented, just the same named tokens repackaged into ramp shape for components that expect one (e.g. .pricing-tag-neutral). */ --color-neutral-100: #fdfbf6; /* = --color-bg-raised */ --color-neutral-200: #f7f3ec; /* = --color-bg */ --color-neutral-300: #efe7d8; /* = --color-bg-panel */ --color-neutral-400: #ddd2bd; /* = --color-border */ --color-neutral-500: #c9bb9f; /* = --color-border-strong */ --color-neutral-600: #b3aa9c; /* = --color-text-faint */ --color-neutral-700: #6f6656; /* = --color-text-muted */ --color-neutral-800: #33302a; /* = --color-text */ --color-neutral-900: #201e1d; /* = --color-accent-ink */ /* An accent ramp anchored at the two existing real Kora accent tokens (100 = --color-accent-soft, 500 = --color-accent exactly); the 7 in-between steps are an interpolated tint/shade of the same clay hue, not a value from the real brand kit. PLACEHOLDER pending real design-system sign-off — flag before this ships for real, consistent with every other value in this codebase's CSS being placeholder today. */ --color-accent-100: #f3e6dc; /* = --color-accent-soft */ --color-accent-200: #e9d0bb; --color-accent-300: #dcb495; --color-accent-400: #d0996e; --color-accent-500: #c67139; /* = --color-accent */ --color-accent-600: #a85c2c; --color-accent-700: #85481f; --color-accent-800: #5e3316; --color-accent-900: #3a1f0d; /* Type — same three families as landing.html's own stack: Hanken Grotesk for body/UI text (loaded from Bunny Fonts, see default.css's own @import — only weight 400 is loaded, so heavier CSS font-weights on this family render as the browser's own synthesized/faux bold), Figtree for small-caps/eyebrow labels, Caprasimo for display headings (both loaded from Google Fonts in base.html). */ --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-strapline: "Figtree", var(--font-sans); --font-display: "Caprasimo", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif; /* Only ever consumed on always-Datum+Grain pages today (pricing admin's quote builder) — this is a real value nonetheless, not a dead one, for the day a Kora-branded surface needs a heading font: aliases to this brand's own dense/UI font, matching default.css's own existing unscoped `h1,h2,h3,h4 { font-family: var(--font-sans) }` rule, not the decorative --font-display (Caprasimo) reserved for large marketing headings. */ --font-heading: var(--font-sans); /* Softened from the original 3px/6px to read closer to landing.html's own much rounder cards/buttons, without going as far as its 24-48px card radii — this app's rows/fields are far denser than a marketing page's sections and stay legible at a moderate radius, not a fully rounded one. Buttons (.btn) go further and match landing's fully-pill buttons directly, since that's the brand's most recognisable, safely-copyable shape regardless of surrounding density — .btn's own pill shape is default.css's own unscoped default, so no override is needed here for that. */ --radius: 8px; --radius-lg: 14px; /* A light theme wants a soft rgba blur, not a hairline-ring technique (see theme-datum-grain.css's own comment on why it uses one) — tinted with this brand's own --color-text rather than plain black, the same choice theme-datum-grain.css makes with its own neutral tones. */ --shadow-sm: 0 1px 2px rgba(51, 48, 42, 0.10); --shadow-md: 0 6px 18px rgba(51, 48, 42, 0.14); --shadow-lg: 0 16px 40px rgba(51, 48, 42, 0.20); }