/* theme-kraft-forest.css — the "Kraft Forest" visual theme: an earthy kraft/forest/orange
   palette. Loaded after app.css + custom.css whenever this theme is active (body.theme-kraft-forest),
   regardless of brand -- either Skipper or Rabino can pick it, so Skipper is NOT untouched.
   Strategy: (1) redefine the design tokens to an earthy kraft/forest/orange palette — most
   components recolor for free because they read var()s; (2) neutralize the handful of neon
   glows that are hardcoded (not tokenised). Forest green is the hero, burnt orange the accent,
   warm kraft the ground. (Rabino's dino logo icon lives separately, in identity-rabino.css —
   that's brand identity, not this file's visual theme.) */

/* 1. Palette ---------------------------------------------------------------- */
body.theme-kraft-forest {
  --color-paper:      #E3D5B0;   /* kraft ground */
  --color-night-2:    #EFE7CF;   /* lighter kraft (page bg gradient top) */
  --color-card:       #FBF5E6;   /* cream panel */
  --color-card-2:     #F2E9D2;   /* input fill */
  --color-ink:        #34301F;   /* bark (body text) */
  --color-muted:      #877B5B;   /* khaki */
  --color-line:       #D9C8A2;   /* tan border */
  --color-cyan:       #2E5D34;   /* PRIMARY — forest green (links, buttons, titles) */
  --color-pink:       #C2571F;   /* SECONDARY — burnt orange (eyebrows, accents) */
  --color-nightbar:   #26492B;   /* deep forest topnav */
  --color-pine:       #2E5D34;
  --color-pine-50:    #2e5d3420;
  --color-tape-050:   #c2571f20;
  --color-fresh:      #5E7D2E;   /* olive success */
  --color-fresh-050:  #5e7d2e20;
  --color-sky:        #5F7E9B;   /* muted slate info */
  --color-sky-050:    #5f7e9b20;
  --color-alert:      #B23A2E;   /* rust error */
  --color-alert-050:  #b23a2e20;
}

/* 2. Topnav — a forest bar; wordmark reads light on it -----------------------*/
body.theme-kraft-forest .topnav {
  background: linear-gradient(180deg, #2E5D34 0%, #26492B 100%);
  box-shadow: 0 1px #ffffff14, 0 8px 22px -14px #14300f;
}
body.theme-kraft-forest .brand-word { text-shadow: none; }
body.theme-kraft-forest .brand-word .g1 { color: #F7F0DE; text-shadow: none; }   /* Rabino — cream */
body.theme-kraft-forest .brand-word .g2 { color: #E8843F; text-shadow: none; }   /* Ship — orange */
body.theme-kraft-forest .brand-word .cy { color: #F7F0DE; text-shadow: none; }
body.theme-kraft-forest .brand-word .pk { color: #E8843F; text-shadow: none; }
body.theme-kraft-forest .brand-badge {
  color: #F1E7CE; border-color: #F1E7CE99; text-shadow: none; box-shadow: none; background: none;
}
body.theme-kraft-forest .nav-link.is-active {
  color: #F7F0DE; background-color: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff40;
}
/* The staleness dot sits ON the forest bar, where the rust --color-alert (#B23A2E) measures
   1.3:1 against the bar's #2E5D34 top — invisible at 9px, and it is the one warning shown on
   every page. This is the bar's own accent orange (#E8843F, as used by the wordmark and the
   production pill), lifted just enough to clear the 3:1 non-text minimum against BOTH ends of
   the gradient: 3.7:1 on #2E5D34 and 4.9:1 on #26492B (#E8843F itself is only 2.86:1 on the
   lighter end). */
body.theme-kraft-forest .nav-dot { color: #F2A25C; }
body.theme-kraft-forest .mode-pill.is-prod {
  color: #FFE6D2; border-color: #E8843F; background: #e8843f24; box-shadow: none;
}
body.theme-kraft-forest .mode-pill.is-prod .mp-dot { background: #E8843F; box-shadow: none; }
body.theme-kraft-forest .mode-pill.is-test {
  color: #E7F0D8; border-color: #8FB05A; background: #8fb05a24; box-shadow: none;
}
body.theme-kraft-forest .mode-pill.is-test .mp-dot { background: #8FB05A; box-shadow: none; }

/* 3. Page — kill the neon text/box glows, keep the earthy tokens -------------*/
body.theme-kraft-forest .page-title { color: var(--color-cyan); text-shadow: none; }
body.theme-kraft-forest .eyebrow,
body.theme-kraft-forest .step-num { color: var(--color-pink); text-shadow: none; }
body.theme-kraft-forest .rates-head h3 { color: var(--color-cyan); }
body.theme-kraft-forest .mode-status.is-prod .ms-name,
body.theme-kraft-forest .rate-price { color: var(--color-cyan); text-shadow: none; }

/* Buttons: solid forest with cream text; no neon halo */
body.theme-kraft-forest .btn-primary {
  background: #2E5D34; color: #FBF5E6; box-shadow: 0 2px 0 #21421F;
}
body.theme-kraft-forest .btn-primary:hover { background: #356B3D; box-shadow: 0 2px 0 #21421F; }
body.theme-kraft-forest .btn-ghost { color: var(--color-cyan); border-color: #2E5D3466; }
body.theme-kraft-forest .btn-ghost:hover { background: #2e5d3414; border-color: var(--color-cyan); box-shadow: none; }
/* .btn-ghost's forest-green override above (2 classes + body) otherwise beats the recording
   state's alert-red (2 classes, no element) from custom.css — restore it explicitly here so the
   mic pulse still reads as "recording" (alert red) rather than brand primary on this theme. */
body.theme-kraft-forest .dictate-address-btn.is-recording { color: var(--color-alert); border-color: var(--color-alert); }
body.theme-kraft-forest .btn-warn { background: #C2571F; color: #FFF3E8; box-shadow: 0 2px 0 #8f3f16; }
body.theme-kraft-forest .btn-warn:hover { background: #D06627; box-shadow: 0 2px 0 #8f3f16; }

/* Inputs, chips, cards: forest focus + hover, no cyan glow */
body.theme-kraft-forest .field input:focus,
body.theme-kraft-forest .field select:focus,
body.theme-kraft-forest .grid-fields input:focus,
body.theme-kraft-forest .grid-fields select:focus,
body.theme-kraft-forest .stack-form input:focus {
  border-color: #2E5D34; box-shadow: 0 0 0 2px #2e5d3440; outline: none;
}
body.theme-kraft-forest .carrier-chip:has(input:checked) {
  border-color: #2E5D34; background-color: var(--color-pine-50); box-shadow: inset 0 0 0 1px #2E5D34;
}
body.theme-kraft-forest .rate-card::before { box-shadow: none; }
body.theme-kraft-forest .rate-card:hover { border-color: #2e5d3466; box-shadow: 0 18px 34px -26px #3a331eE6; }
body.theme-kraft-forest .status-pill { background: var(--color-pine-50); color: var(--color-cyan); box-shadow: inset 0 0 0 1px #2e5d3455; }
body.theme-kraft-forest .confirmation { box-shadow: 0 10px 26px -18px #3a331e99; }
body.theme-kraft-forest input:-webkit-autofill,
body.theme-kraft-forest input:autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: inset 0 0 0 1000px #F5EEDB; }
body.theme-kraft-forest ::selection { color: #34301F; background: #E8843F55; }
body.theme-kraft-forest :focus-visible { outline-color: #2E5D34; }

/* 4. Package preview — a kraft cardboard box with orange packing tape --------*/
body.theme-kraft-forest .viz-stage {
  background: repeating-linear-gradient(135deg, #EADDBE 0 14px, #E4D5B2 14px 28px);
  border-color: var(--color-line);
}
body.theme-kraft-forest .box3d .front { background: linear-gradient(150deg, #E7CE9C, #D9BC80); border-color: #B08F55; box-shadow: inset 0 0 18px #b08f5533; }
body.theme-kraft-forest .box3d .front::after { background: #C2571F33; border-inline: 1px dashed #C2571F99; }
body.theme-kraft-forest .box3d .top { background: linear-gradient(120deg, #F0DDB0, #E4CD97); border-color: #B08F55; }
body.theme-kraft-forest .box3d .top::after { background: #C2571F2e; border-inline: 1px dashed #C2571F80; }
body.theme-kraft-forest .box3d .side { background: linear-gradient(120deg, #CDAF77, #DBC08A); border-color: #B08F55; }
body.theme-kraft-forest .box3d .front::before { background: radial-gradient(60% 100% at 45%, #b08f5566, #b08f5500 72%); }
/* .scale-ref is now a brand-neutral 12 oz Hamm's-can SVG (see custom.css) — no per-brand recolor. */

/* 5. Plug the remaining hardcoded-hex leaks — fixed colors in app.css/custom.css that
   don't recolor on their own and would otherwise read as the Skipper (neon) brand. -------*/
/* the <select> caret glyph: was Skipper muted-purple (%23a49fce) -> khaki */
body.theme-kraft-forest .field select,
body.theme-kraft-forest .grid-fields select,
body.theme-kraft-forest .stack-form select,
body.theme-kraft-forest select.field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23877B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
}
/* active sort / estimate-format chips: dark ink (#06121a) -> cream on the forest accent */
body.theme-kraft-forest .sort-chip.is-active,
body.theme-kraft-forest .est-chip.is-active { color: #FBF5E6; }
/* same chips' neon glow -> no glow (was leaking through the color-only patch above) */
body.theme-kraft-forest .sort-chip.is-active,
body.theme-kraft-forest .est-chip.is-active { box-shadow: none; }
/* the printer-destination picker's selected state: dark ink on bright neon-cyan (custom.css)
   drops to ~2.5:1 contrast on the forest palette's dark green -- cream on forest, no glow */
body.theme-kraft-forest .dest-chip.is-selected { color: #FBF5E6; box-shadow: none; }
/* voice page's mic-orb CTA: same ink-on-cyan pattern, same fix, cream on a forest-tinted glow */
body.theme-kraft-forest .voice-cta-orb { color: #FBF5E6; box-shadow: 0 0 18px -4px #2e5d3499; }
/* debug trace box (error surface): was Skipper indigo (#17102a) -> dark bark on kraft */
body.theme-kraft-forest .debug-trace { background: #2A2416; color: #F0D9C6; border-color: #b23a2e59; }