/* Kora Kitchens — the consumer-facing brand theme. Scoped under
   [data-brand="kora-kitchens"] (set once, server-side, on <html> 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.

   Re-based on the 9 Oct 2026 brand system handoff (webapp/static/
   brand-tokens.css is the source of truth for the palette): Chalk/Flint/
   Oak, Instrument Sans, square corners, no shadows. Token overrides, plus
   a short flat-shape block at the bottom for the few components whose
   pill/rounded shape is hard-coded in default.css rather than driven by
   --radius.

   Load order is load-bearing: this file's <link> must come after
   default.css's own (see base.html) — :root and [data-brand="..."] both
   target the same <html> 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: #F4F0E8; /* Chalk */
  --color-bg-panel: #E8E1D4; /* Chalk 200 */
  --color-bg-raised: #FBF9F5; /* Chalk 50 */
  --color-text: #22201C; /* Flint */
  --color-text-muted: #5A554C;
  --color-text-faint: #8A8274; /* darkened from the old faint tone for contrast on Chalk */
  --color-border: #D9D1C2; /* soft rule */
  --color-border-strong: #22201C; /* Flint 1px rule */

  /* Brand accent — Kora Kitchens clay/terracotta (landing.html's
     --clay/--clay-100/--clay-ink). */
  --color-accent: #7E5420; /* Oak 700 — primary fills and accent text (Chalk label 5.8:1) */
  --color-accent-soft: #E8E1D4;
  --color-accent-ink: #22201C;

  /* Kora sage — landing.html's --sage. */
  --color-positive: #5F6E45;
  --color-negative: #b84a00;
  --color-negative-bg: #f8ebdd;

  /* 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: #FBF9F5;
  --color-neutral-200: #F4F0E8;
  --color-neutral-300: #E8E1D4;
  --color-neutral-400: #D9D1C2;
  --color-neutral-500: #C9C0B0;
  --color-neutral-600: #8A8274;
  --color-neutral-700: #5A554C;
  --color-neutral-800: #3A3732;
  --color-neutral-900: #22201C;

  /* 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: #F1E6D5;
  --color-accent-200: #E3CFAE;
  --color-accent-300: #D5B685;
  --color-accent-400: #C99558; /* Oak on dark */
  --color-accent-500: #B07A3C; /* Oak — the colour shared by both brands */
  --color-accent-600: #8E6230; /* Oak 700 hover */
  --color-accent-700: #7E5420; /* Oak 700 */
  --color-accent-800: #6A4518; /* Oak 700 active */
  --color-accent-900: #3F2910;

  /* 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: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-strapline: var(--font-sans);
  --font-display: var(--font-sans);
  /* 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: 0;
  --radius-lg: 0;

  /* 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: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* Flat shapes: default.css hard-codes pill/rounded shapes on these, which
   the handoff's "radius 0 everywhere, no shadows" rule rules out for Kora. */
[data-brand="kora-kitchens"] .btn,
[data-brand="kora-kitchens"] .tag,
[data-brand="kora-kitchens"] .pricing-tag,
[data-brand="kora-kitchens"] input,
[data-brand="kora-kitchens"] select,
[data-brand="kora-kitchens"] textarea {
  border-radius: 0;
}
[data-brand="kora-kitchens"] :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Setup + estimate wizards -------------------------------------------
   Extrapolated from the 9 Oct 2026 handoff: its page grammar (brand bar with
   a 1px Flint rule, kicker + large H1 in sentence case, Chalk 50 surfaces with
   1px Flint rules, flat tiles, label-left buttons with a trailing arrow, a
   Flint "total bar" for the headline figure) applied to the wizard
   components. Only wizard-scoped selectors: the configurator keeps its own
   chrome. */

[data-brand="kora-kitchens"] .wizard-brand-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--color-border-strong);
}
[data-brand="kora-kitchens"] .wizard-brand-logo { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
[data-brand="kora-kitchens"] .wizard-brand-logo span { font-size: 20px; font-weight: 550; letter-spacing: -0.02em; line-height: 1; }
[data-brand="kora-kitchens"] .wizard-brand-back { font-size: 15px; color: var(--color-text); text-decoration: none; }
[data-brand="kora-kitchens"] .wizard-brand-back:hover { color: var(--color-accent); }

[data-brand="kora-kitchens"] .wizard-page {
  min-height: calc(100vh - 66px);
  align-items: flex-start;
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 56px);
}
[data-brand="kora-kitchens"] .wizard-card {
  width: min(100%, 640px);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  padding: clamp(24px, 3vw, 40px);
  gap: 28px;
  font-size: 16px;
}
[data-brand="kora-kitchens"] .wizard-card-start { width: min(100%, 880px); }
[data-brand="kora-kitchens"] .wizard-card-shape { width: min(100%, 960px); }
[data-brand="kora-kitchens"] .wizard-card-options { width: min(100%, 960px); }

/* Type: kicker, H1/H2 and body per the Kora scale. */
[data-brand="kora-kitchens"] .wizard-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent);
}
[data-brand="kora-kitchens"] .wizard-heading { gap: 10px; }
[data-brand="kora-kitchens"] .wizard-title,
[data-brand="kora-kitchens"] .wizard-card-entry .wizard-title {
  font-family: var(--font-sans); font-size: clamp(30px, 3.2vw, 44px); font-weight: 550;
  line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
}
[data-brand="kora-kitchens"] .wizard-subtitle { font-size: 17px; line-height: 1.55; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .field-hint { font-size: 14px; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .wizard-card .link-button { font-size: 15px; font-weight: 600; color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-card .link-button:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Step nav: numbered text, current step carries an Oak 700 rule. */
[data-brand="kora-kitchens"] .wizard-step-nav { font-size: 14px; gap: 14px; }
[data-brand="kora-kitchens"] .wizard-step-nav-item { color: var(--color-text-muted); font-weight: 400; }
[data-brand="kora-kitchens"] .wizard-step-nav-item.current {
  color: var(--color-text); font-weight: 600; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid var(--color-accent);
}
[data-brand="kora-kitchens"] .wizard-step-nav-item.done { border-bottom: 0; color: var(--color-text); }
[data-brand="kora-kitchens"] .wizard-step-nav-item.upcoming { color: var(--color-text-faint); }
[data-brand="kora-kitchens"] .wizard-step-nav-sep { display: none; }

/* Buttons: label flush left, arrow pushed right. */
[data-brand="kora-kitchens"] .wizard-card .btn {
  padding: 15px 20px; font-size: 16px; font-weight: 600; justify-content: space-between; gap: 24px;
  border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text);
}
[data-brand="kora-kitchens"] .wizard-card .btn:hover { background: var(--color-bg-panel); border-color: var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-card .btn-primary {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); padding: 16px 20px; min-width: 240px;
}
[data-brand="kora-kitchens"] .wizard-card .btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
[data-brand="kora-kitchens"] .wizard-card .btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
[data-brand="kora-kitchens"] .wizard-entry-actions { align-items: flex-start; gap: 16px; }
[data-brand="kora-kitchens"] .wizard-entry-actions form { justify-content: flex-start; }
[data-brand="kora-kitchens"] .wizard-estimate-email-form .btn-primary { min-width: 0; }

/* Inputs: 1px Flint, Chalk 50, 16px; labels 14/600 sentence case. */
[data-brand="kora-kitchens"] .wizard-card input[type="text"],
[data-brand="kora-kitchens"] .wizard-card input[type="number"],
[data-brand="kora-kitchens"] .wizard-card input[type="email"],
[data-brand="kora-kitchens"] .wizard-card select {
  font-size: 16px; padding: 12px 14px; border: 1px solid var(--color-border-strong);
  background: var(--color-bg-raised); color: var(--color-text);
}
[data-brand="kora-kitchens"] .wizard-run-field label { font-size: 14px; font-weight: 600; color: var(--color-text); }
[data-brand="kora-kitchens"] .wizard-run-field.is-typical .wizard-run-field-row input { border-style: solid; color: var(--color-text-muted); background: var(--color-bg); }
[data-brand="kora-kitchens"] .wizard-run-field-chip { font-size: 13px; color: var(--color-text-muted); }

/* Tiles: flat, ruled; selection = 2px Flint border plus an Oak 700 square tick. */
[data-brand="kora-kitchens"] .wizard-tile-grid { gap: 20px; }
[data-brand="kora-kitchens"] .wizard-tile-grid-grid3 { gap: 16px; }
[data-brand="kora-kitchens"] .wizard-tile { gap: 10px; }
[data-brand="kora-kitchens"] .wizard-tile-image {
  background: var(--color-bg-panel); border: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted);
}
[data-brand="kora-kitchens"] .wizard-tile:hover .wizard-tile-image { border-color: var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-tile.selected .wizard-tile-image { border: 2px solid var(--color-text); outline: 0; }
[data-brand="kora-kitchens"] .wizard-tile-check { border-radius: 0; width: 22px; height: 22px; font-size: 13px; top: 8px; right: 8px; color: var(--color-bg); }
[data-brand="kora-kitchens"] .wizard-tile-label { font-size: 17px; font-weight: 550; letter-spacing: -0.01em; color: var(--color-text); }
[data-brand="kora-kitchens"] .wizard-tile.selected .wizard-tile-label { font-weight: 600; }
[data-brand="kora-kitchens"] .wizard-tile-sublabel { font-size: 15px; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .wizard-tile-description { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .wizard-tile-delta { font-size: 14px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
[data-brand="kora-kitchens"] .wizard-tile.selected .wizard-tile-delta { color: var(--color-accent); font-weight: 600; }

/* Shape step. */
[data-brand="kora-kitchens"] .wizard-shape-row {
  border: 1px solid var(--color-border); background: var(--color-bg-raised); padding: 12px 14px; font-size: 16px; font-weight: 550; color: var(--color-text);
}
[data-brand="kora-kitchens"] .wizard-shape-row:hover { border-color: var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-shape-row.selected { border: 2px solid var(--color-text); background: var(--color-bg-raised); padding: 11px 13px; }
[data-brand="kora-kitchens"] .wizard-shape-preview { border: 1px solid var(--color-border); background: var(--color-bg); padding: 24px; }

/* Price footer + result: figures are tabular; the headline figure sits on a
   Flint bar like the quote's Total. */
[data-brand="kora-kitchens"] .wizard-price-footer { border-top: 1px solid var(--color-border-strong); font-size: 16px; padding-top: 14px; }
[data-brand="kora-kitchens"] .wizard-price-label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .wizard-price-value { color: var(--color-text); font-weight: 600; }
[data-brand="kora-kitchens"] .wizard-estimate-result {
  align-items: flex-start; text-align: left; gap: 8px; padding: 24px 28px; border: 0; border-radius: 0;
  background: var(--color-text); color: var(--color-bg);
}
[data-brand="kora-kitchens"] .wizard-estimate-result .wizard-price-label,
[data-brand="kora-kitchens"] .wizard-estimate-result .field-hint { color: var(--color-text-on-dark-muted, #C9C0B0); }
[data-brand="kora-kitchens"] .wizard-estimate-result .wizard-price-label { color: var(--color-accent-400); }
[data-brand="kora-kitchens"] .wizard-estimate-price { font-size: clamp(34px, 4.5vw, 52px); font-weight: 550; letter-spacing: -0.03em; line-height: 1; color: var(--color-bg); }
[data-brand="kora-kitchens"] .wizard-estimate-email-form { margin-top: 0; }
[data-brand="kora-kitchens"] .wizard-breakdown summary { font-size: 15px; }
[data-brand="kora-kitchens"] .wizard-breakdown-row { font-size: 15px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
[data-brand="kora-kitchens"] .wizard-footer { border-top: 1px solid var(--color-border-strong); padding-top: 16px; }

/* Summary rows: solid soft rules, sentence-case labels. */
[data-brand="kora-kitchens"] .wizard-summary-row { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
[data-brand="kora-kitchens"] .wizard-summary-label { width: 140px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
[data-brand="kora-kitchens"] .wizard-summary-value { font-size: 16px; }
[data-brand="kora-kitchens"] .wizard-summary-assumed { font-size: 14px; }

/* Options step. */
[data-brand="kora-kitchens"] .wizard-options-group-label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent); }
[data-brand="kora-kitchens"] .wizard-option-row { border: 1px solid var(--color-border); background: var(--color-bg-raised); padding: 14px 16px; margin-bottom: 10px; border-radius: 0; }
[data-brand="kora-kitchens"] .wizard-option-row:hover { border-color: var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-option-checkbox { width: 20px; height: 20px; border-radius: 0; border: 1px solid var(--color-border-strong); }
[data-brand="kora-kitchens"] .wizard-option-row input[type="checkbox"]:checked + .wizard-option-checkbox { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
[data-brand="kora-kitchens"] .wizard-option-row-title { font-size: 16px; font-weight: 600; }
[data-brand="kora-kitchens"] .wizard-option-row-description { font-size: 14px; }
[data-brand="kora-kitchens"] .wizard-options-summary-card { border: 1px solid var(--color-border-strong); background: var(--color-bg-raised); border-radius: 0; }

/* Sticky summary/price footers span the card; section labels in the options
   side cards use the sentence-case kicker rather than small caps. */
[data-brand="kora-kitchens"] .wizard-sticky-footer { align-self: stretch; display: flex; flex-direction: column; gap: 14px; width: 100%; }
[data-brand="kora-kitchens"] .wizard-card .section-label {
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-accent);
}
[data-brand="kora-kitchens"] .wizard-options-unlocked-list { font-size: 15px; }
[data-brand="kora-kitchens"] .wizard-options-price-note { border: 1px solid var(--color-border); border-radius: 0; font-size: 15px; }
[data-brand="kora-kitchens"] .wizard-price-footer + .wizard-footer { border-top: 0; padding-top: 4px; }
[data-brand="kora-kitchens"] .wizard-options-actions { border-top: 1px solid var(--color-border-strong); padding-top: 20px; }
[data-brand="kora-kitchens"] .wizard-card .wizard-tile-grid-grid3 .wizard-tile:not(:has(.wizard-tile-image)) {
  border: 1px solid var(--color-border); padding: 16px; background: var(--color-bg-raised);
}
[data-brand="kora-kitchens"] .wizard-card .wizard-tile-grid-grid3 .wizard-tile:not(:has(.wizard-tile-image)):hover { border-color: var(--color-border-strong); }

@media (max-width: 640px) {
  [data-brand="kora-kitchens"] .wizard-shape-picker,
  [data-brand="kora-kitchens"] .wizard-options-layout { grid-template-columns: minmax(0, 1fr); }
  [data-brand="kora-kitchens"] .wizard-card .btn-primary { min-width: 0; width: 100%; }
  [data-brand="kora-kitchens"] .wizard-brand-back { display: none; }
}