/* Copyright (c) 2026 Dow Furniture. Burl Home. All rights reserved. Proprietary and confidential: see LICENSE. */
/* ==========================================================================
   Burl Home theme · v1.0
   Website + POS. Light by default; dark follows the OS, or force it with
   <html data-theme="dark"> / <html data-theme="light">.
   Fonts: Sora (display) + Figtree (body). Load them with the <link> in the
   README, or self-host (POS / offline): npm i @fontsource/sora @fontsource/figtree
   ========================================================================== */

:root {
  /* Brand palette (fixed) */
  --bh-ink: #18222E;
  --bh-bone: #F6F2EA;
  --bh-paper: #FFFFFF;
  --bh-sand: #E4DCCF;
  --bh-amber: #C07A2C;
  --bh-amber-deep: #96571A;
  --bh-honey: #E9B262;
  --bh-slate-gray: #5E6670;
  --bh-night: #233142;

  /* Status colors (order pipeline) */
  --bh-quote-bg: #FBEEDB;     --bh-quote-fg: #7A4510;
  --bh-ordered-bg: #E2ECF5;   --bh-ordered-fg: #24507A;   --bh-ordered: #3B6E99;
  --bh-ready-bg: #E4EDE2;     --bh-ready-fg: #34513A;     --bh-ready: #4E6B4A;
  --bh-delivered-bg: #ECE8E1; --bh-delivered-fg: #18222E;
  --bh-delayed-bg: #FDE7E5;   --bh-delayed-fg: #9B1C12;   --bh-delayed: #B42318;

  /* Semantic (light) — use these in components */
  --bh-bg: var(--bh-bone);
  --bh-surface: var(--bh-paper);
  --bh-surface-muted: #ECE5DA;
  --bh-border: var(--bh-sand);
  --bh-text: var(--bh-ink);
  --bh-text-muted: var(--bh-slate-gray);
  --bh-primary: var(--bh-amber-deep);
  --bh-primary-hover: #7E4813;
  --bh-on-primary: #FFFFFF;
  --bh-link: var(--bh-amber-deep);
  --bh-focus: #3B6E99;
  --bh-topbar: var(--bh-ink);
  --bh-topbar-text: var(--bh-bone);
  --bh-topbar-field: var(--bh-night);

  /* Type */
  --bh-font-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --bh-font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --bh-text-caption: 14px;
  --bh-text-body: 17px;
  --bh-text-section: 20px;
  --bh-text-title: 28px;
  --bh-text-display: 40px;

  /* Shape & space */
  --bh-radius-sm: 8px;
  --bh-radius-md: 12px;
  --bh-radius-lg: 16px;
  --bh-radius-xl: 20px;
  --bh-radius-pill: 999px;
  --bh-control-h: 52px;
  --bh-control-h-lg: 56px;
  --bh-touch-min: 48px;
  --bh-shadow-card: 0 1px 2px rgba(24, 34, 46, .06);
  --bh-shadow-raised: 0 8px 24px rgba(24, 34, 46, .12);

  color-scheme: light;
}

/* Dark: follows the OS unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bh-bg: #121A24;
    --bh-surface: #1B2531;
    --bh-surface-muted: var(--bh-night);
    --bh-border: #2E3B4C;
    --bh-text: #F1EDE6;
    --bh-text-muted: #AEB7C2;
    --bh-primary: var(--bh-amber);
    --bh-primary-hover: #D08B3A;
    --bh-on-primary: var(--bh-ink);
    --bh-link: var(--bh-honey);
    --bh-focus: #8FB8DD;
    --bh-topbar: #0E141C;
    --bh-topbar-field: #1B2531;
    --bh-quote-bg: #3A2A16;     --bh-quote-fg: #F3C98D;
    --bh-ordered-bg: #1D3247;   --bh-ordered-fg: #A9CBEA;
    --bh-ready-bg: #213326;     --bh-ready-fg: #A9CFA4;
    --bh-delivered-bg: #2A3441; --bh-delivered-fg: #E6E1D9;
    --bh-delayed-bg: #3E1E1B;   --bh-delayed-fg: #F4AAA2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bh-bg: #121A24;
  --bh-surface: #1B2531;
  --bh-surface-muted: var(--bh-night);
  --bh-border: #2E3B4C;
  --bh-text: #F1EDE6;
  --bh-text-muted: #AEB7C2;
  --bh-primary: var(--bh-amber);
  --bh-primary-hover: #D08B3A;
  --bh-on-primary: var(--bh-ink);
  --bh-link: var(--bh-honey);
  --bh-focus: #8FB8DD;
  --bh-topbar: #0E141C;
  --bh-topbar-field: #1B2531;
  --bh-quote-bg: #3A2A16;     --bh-quote-fg: #F3C98D;
  --bh-ordered-bg: #1D3247;   --bh-ordered-fg: #A9CBEA;
  --bh-ready-bg: #213326;     --bh-ready-fg: #A9CFA4;
  --bh-delivered-bg: #2A3441; --bh-delivered-fg: #E6E1D9;
  --bh-delayed-bg: #3E1E1B;   --bh-delayed-fg: #F4AAA2;
  color-scheme: dark;
}

/* ---------- Base ---------- */
.bh, body.bh {
  margin: 0;
  background: var(--bh-bg);
  color: var(--bh-text);
  font-family: var(--bh-font-body);
  font-size: var(--bh-text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.bh h1, .bh h2, .bh h3, .bh-display {
  font-family: var(--bh-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.bh h1 { font-size: var(--bh-text-display); }
.bh h2 { font-size: var(--bh-text-title); }
.bh h3 { font-size: var(--bh-text-section); font-weight: 600; letter-spacing: -0.01em; }
.bh a { color: var(--bh-link); }
.bh-muted { color: var(--bh-text-muted); }
.bh-caption { font-size: var(--bh-text-caption); color: var(--bh-text-muted); }
.bh-eyebrow {
  font-family: var(--bh-font-display); font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bh-text-muted);
}
.bh-price { font-family: var(--bh-font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.bh :focus-visible { outline: 3px solid var(--bh-focus); outline-offset: 2px; }

/* ---------- Buttons (min 48px tall for touch) ---------- */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--bh-control-h); padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--bh-radius-md);
  font: 600 17px/1 var(--bh-font-body); text-decoration: none; cursor: pointer;
  background: var(--bh-primary); color: var(--bh-on-primary);
  transition: background-color .15s ease, border-color .15s ease;
}
.bh-btn:hover { background: var(--bh-primary-hover); }
.bh-btn:disabled, .bh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bh-btn--secondary { background: transparent; color: var(--bh-text); border-color: var(--bh-text); }
.bh-btn--secondary:hover { background: var(--bh-surface-muted); }
.bh-btn--quiet { background: var(--bh-surface-muted); color: var(--bh-text); font-weight: 500; }
.bh-btn--quiet:hover { background: var(--bh-border); }
.bh-btn--danger { background: var(--bh-delayed); color: #fff; }
.bh-btn--icon { width: var(--bh-touch-min); min-height: var(--bh-touch-min); padding: 0; background: var(--bh-surface-muted); color: var(--bh-text); }
.bh-btn--lg { min-height: var(--bh-control-h-lg); padding: 0 28px; font-size: 18px; }
.bh-btn--block { display: flex; width: 100%; }

/* ---------- Inputs ---------- */
.bh-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.bh-input, .bh-select, .bh-textarea {
  box-sizing: border-box; width: 100%;
  min-height: var(--bh-control-h-lg); padding: 0 16px;
  background: var(--bh-surface); color: var(--bh-text);
  border: 1.5px solid var(--bh-border); border-radius: var(--bh-radius-md);
  font: 400 17px/1.4 var(--bh-font-body);
}
.bh-textarea { padding: 14px 16px; min-height: 120px; }
.bh-input::placeholder, .bh-textarea::placeholder { color: var(--bh-text-muted); }
.bh-input:focus, .bh-select:focus, .bh-textarea:focus { outline: none; border-color: var(--bh-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-focus) 25%, transparent); }
.bh-search { position: relative; }
.bh-search .bh-input { padding-left: 46px; }
.bh-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--bh-text-muted); }

/* ---------- Cards & lists ---------- */
.bh-card {
  background: var(--bh-surface); border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius-lg); padding: 20px; box-shadow: var(--bh-shadow-card);
}
.bh-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bh-border); }
.bh-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--bh-quote-bg); color: var(--bh-quote-fg); font: 600 17px var(--bh-font-display);
}

/* ---------- Status pills ---------- */
.bh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--bh-radius-pill); font-size: 14px; font-weight: 600; white-space: nowrap; }
.bh-pill--quote     { background: var(--bh-quote-bg);     color: var(--bh-quote-fg); }
.bh-pill--ordered   { background: var(--bh-ordered-bg);   color: var(--bh-ordered-fg); }
.bh-pill--ready     { background: var(--bh-ready-bg);     color: var(--bh-ready-fg); }
.bh-pill--delivered { background: var(--bh-delivered-bg); color: var(--bh-delivered-fg); }
.bh-pill--delayed   { background: var(--bh-delayed-bg);   color: var(--bh-delayed-fg); }

/* ---------- App shell (POS) ---------- */
.bh-topbar {
  display: flex; align-items: center; gap: 20px; min-height: 72px; padding: 0 24px;
  background: var(--bh-topbar); color: var(--bh-topbar-text);
}
.bh-topbar .bh-input { background: var(--bh-topbar-field); border-color: transparent; color: var(--bh-topbar-text); min-height: 48px; }
.bh-topbar .bh-btn { min-height: 48px; background: var(--bh-amber); color: var(--bh-ink); font-weight: 700; }
.bh-topbar .bh-btn:hover { background: #D08B3A; }
.bh-tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: 72px; background: var(--bh-surface); border-top: 1px solid var(--bh-border);
}
.bh-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--bh-text-muted);
}
.bh-tabbar a[aria-current="page"] { color: var(--bh-primary); font-weight: 600; }

/* ---------- Logo lockup in HTML (crisp at any size) ---------- */
.bh-logo { display: inline-flex; align-items: center; gap: .35em; font-family: var(--bh-font-display); letter-spacing: -0.03em; line-height: 1; color: inherit; text-decoration: none; }
.bh-logo img, .bh-logo svg { height: 1.25em; width: auto; }
.bh-logo b { font-weight: 700; }
.bh-logo span { font-weight: 300; }