/* ree-source theme layer (v2, 2026-10-24).
   Light is the default. Dark is optional: html[data-theme="dark"] keeps the original dark palette
   from site.css. The saved choice lives in localStorage "ree-theme" ("dark" or "light").
   Accent is Texas burnt orange #BF5700. Best Practices is a plain nav link (no pill). */

/* ---------- Nav (v2): three plain links, no pill. site.css hides plain links on phones, so keep these. ---------- */
.nav .logo, .nav-links a { white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pulse); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  .nav-links a.nav-create, .nav-links a.nav-bp, .nav-links a.nav-connect { display: inline; font-size: 0.85rem; }
  .nav-links { gap: 12px; }
}
@media (max-width: 420px) {
  .nav-links { gap: 10px !important; }
  .nav-links a.nav-create, .nav-links a.nav-bp, .nav-links a.nav-connect { font-size: 0.8rem; }
  .nc-long { display: none; }
}

/* ---------- Theme toggle ---------- */
.nav-tools { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: transparent; color: var(--body); cursor: pointer; padding: 0;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); border-color: var(--mute); }
.theme-toggle:focus-visible { outline: 2px solid #BF5700; outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-moon { display: none; }
html:not([data-theme="dark"]) .theme-toggle .ico-sun { display: none; }
html:not([data-theme="dark"]) .theme-toggle .ico-moon { display: block; }
@media (max-width: 900px) {
  .nav-inner { width: calc(100% - 28px); gap: 10px; }
  .nav-tools { gap: 8px; }
  .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
}
@media (max-width: 400px) {
  .nav-inner { gap: 8px; }
  .nav .logo { font-size: 0.95rem; }
  .nav-links { gap: 8px !important; }
  .nav-links a.nav-connect { font-size: 0.78rem !important; }
  .theme-toggle { width: 32px; height: 32px; flex-basis: 32px; }
}

/* ---------- Light palette (default) ---------- */
html:not([data-theme="dark"]) {
  color-scheme: light;
  --void: #f7f5f2;
  --void-soft: #eeebe6;
  --card: #ffffff;
  --hairline: #d9d4cc;
  --ink: #15161a;
  --body: #3b3d43;
  --mute: #5c6067;
  --pulse: #BF5700;      /* Texas burnt orange; about 4.2:1 on the light page, 4.6:1 on white; small text uses --pulse-soft */
  --pulse-soft: #9c4700;
  --spark: #0f7a3d;
  --pill: rgba(20, 20, 20, 0.06);
  --hsf-global__color: #15161a;
  --hsf-heading__color: #15161a;
  --hsf-richtext__color: #15161a;
  --hsf-field-label__color: #15161a;
}
html:not([data-theme="dark"]) .nav { background: rgba(247, 245, 242, 0.88); }
/* Filled orange buttons: burnt orange with white text. */
html:not([data-theme="dark"]) .btn-pulse { background: #BF5700; color: #ffffff; }
html:not([data-theme="dark"]) .btn-pulse:hover { background: #a34a00; }
html:not([data-theme="dark"]) .btn-fill,
html:not([data-theme="dark"]) .btn-fill:hover { background: #15161a; color: #ffffff; }
html:not([data-theme="dark"]) .btn-ghost { border-color: rgba(20,20,20,0.2); }
html:not([data-theme="dark"]) .btn-ghost:hover { border-color: rgba(20,20,20,0.45); }

/* Light: fixed colors in site.css */
html:not([data-theme="dark"]) .hero::before,
html:not([data-theme="dark"]) .qf-section::before,
html:not([data-theme="dark"]) .qt-section::before { opacity: 0.45; }
html:not([data-theme="dark"]) .orb,
html:not([data-theme="dark"]) .callout .face { border-color: #2a2b2e; }
html:not([data-theme="dark"]) .lead-card { background: linear-gradient(180deg, #fff3ea, #ffffff); }
html:not([data-theme="dark"]) .status.err,
html:not([data-theme="dark"]) .qf-err { color: #b42318; }
html:not([data-theme="dark"]) .skip-link { background: #15161a; color: #ffffff; }
html:not([data-theme="dark"]) .hero-video { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); }
html:not([data-theme="dark"]) .form-slot input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html:not([data-theme="dark"]) .form-slot select,
html:not([data-theme="dark"]) .form-slot textarea { background: #ffffff; border-color: #b9b3aa; color: #15161a; }

/* Light: form (qual-flow.css) */
html:not([data-theme="dark"]) .qf .qf-field input[type="text"],
html:not([data-theme="dark"]) .qf .qf-field input[type="email"],
html:not([data-theme="dark"]) .qf .qf-field textarea { background: #ffffff; border-color: #b9b3aa; color: #15161a; }
html:not([data-theme="dark"]) .qf .qf-field input::placeholder,
html:not([data-theme="dark"]) .qf .qf-field textarea::placeholder { color: #6b6f76; }
html:not([data-theme="dark"]) .qf-field.is-invalid input[type="text"],
html:not([data-theme="dark"]) .qf-field.is-invalid input[type="email"],
html:not([data-theme="dark"]) .qf-field.is-invalid textarea { border-color: #b42318; }
html:not([data-theme="dark"]) .qf-chip { background: #ffffff; border-color: #c9c3ba; }
html:not([data-theme="dark"]) .qf-opt:hover .qf-chip { border-color: #8f8a83; }
html:not([data-theme="dark"]) .qf-opt input:checked + .qf-chip { background: #fff0e6; }
html:not([data-theme="dark"]) .qf-opt input[type="checkbox"] + .qf-chip::before,
html:not([data-theme="dark"]) .qf-options--list input[type="radio"] + .qf-chip::before { border-color: #8f8a83; }
html:not([data-theme="dark"]) .qf-status.is-err { background: #fdecea; border-color: #f1a49a; color: #8a1c12; }
html:not([data-theme="dark"]) .qv-btn { border-color: #c9c3ba; }
html:not([data-theme="dark"]) .qv-soon { background: linear-gradient(180deg, #fff3ea, #ffffff); }
html:not([data-theme="dark"]) .qt-card.hot { background: linear-gradient(180deg, #fff3ea, #ffffff); }
html:not([data-theme="dark"]) .qt-cover { background: linear-gradient(160deg, #ffffff, #f0ece6); box-shadow: 0 14px 30px rgba(0,0,0,.12), 6px 6px 0 -1px #ebe6df, 6px 6px 0 0 var(--hairline); }
html:not([data-theme="dark"]) .qf-pb { background: #fff6f0; }

/* Light: Best Practices (best-practices.css) */
html:not([data-theme="dark"]) .bp-bar { background: rgba(238, 235, 230, 0.96); }
html:not([data-theme="dark"]) .bp-tab:hover,
html:not([data-theme="dark"]) .bp-chip:hover,
html:not([data-theme="dark"]) .bp-vote:hover,
html:not([data-theme="dark"]) .bp-suggest-btn:not(.btn):hover { border-color: rgba(20,20,20,0.35); }
html:not([data-theme="dark"]) .bp-tab.is-active,
html:not([data-theme="dark"]) .bp-copy.is-done,
html:not([data-theme="dark"]) .bp-team-badge { color: #ffffff; }
html:not([data-theme="dark"]) .bp-tile,
html:not([data-theme="dark"]) .bp-case-tile,
html:not([data-theme="dark"]) .bp-card,
html:not([data-theme="dark"]) .bp-flagship { background: #ffffff; }
html:not([data-theme="dark"]) .bp-card[open] { background: #ffffff; }
html:not([data-theme="dark"]) .bp-tile:hover, html:not([data-theme="dark"]) .bp-tile:focus-visible,
html:not([data-theme="dark"]) .bp-case-tile:hover, html:not([data-theme="dark"]) .bp-case-tile:focus-visible,
html:not([data-theme="dark"]) .bp-case-tile.is-open,
html:not([data-theme="dark"]) .bp-chip.is-active { background: #fff0e6; }
html:not([data-theme="dark"]) .bp-prompt { background: #f3f1ed; color: #1f2024; }
html:not([data-theme="dark"]) .bp-section.bp-acc > .bp-acc-head,
html:not([data-theme="dark"]) .bp-table th, html:not([data-theme="dark"]) .bp-table td,
html:not([data-theme="dark"]) .bp-end { border-color: rgba(20,20,20,0.1); }
html:not([data-theme="dark"]) .bp-start,
html:not([data-theme="dark"]) .bp-top-stub { border-color: rgba(20,20,20,0.2); }

/* Light: industry pages (one-sheets.css and each page's own style block) */
html:not([data-theme="dark"]) .ix .card.dark,
html:not([data-theme="dark"]) .ix .card.hl,
html:not([data-theme="dark"]) .ix .card.pilot,
html:not([data-theme="dark"]) main.ixp .ixp-chips a:hover,
html:not([data-theme="dark"]) main.ixp .ixp-chips a:focus-visible { background: #fff0e6; }
html:not([data-theme="dark"]) main.ixp h1, html:not([data-theme="dark"]) main.ixp h2, html:not([data-theme="dark"]) main.ixp h3,
html:not([data-theme="dark"]) main.ixp .osp-card h2 a,
html:not([data-theme="dark"]) main.ixp .ix .sechead .tag { color: #15161a; }
html:not([data-theme="dark"]) main.ixp h1 em, html:not([data-theme="dark"]) main.ixp .ix-hero h1 em { color: #BF5700; }
html:not([data-theme="dark"]) main.ixp .osp-label, html:not([data-theme="dark"]) main.ixp .mono.pulse,
html:not([data-theme="dark"]) main.ixp .ix .sechead .ex,
html:not([data-theme="dark"]) main.ixp .ixp-pick-t,
html:not([data-theme="dark"]) main.ixp .ixp-flag { color: #9c4700; }
html:not([data-theme="dark"]) main.ixp .osp-book-lg, html:not([data-theme="dark"]) main.ixp .osp-book { color: #15161a; }

/* Very narrow phones (under 375px): no room for all four items, so "Let's connect" steps aside.
   The homepage hero button still goes to the form. */
@media (max-width: 374px) {
  .nav-links a.nav-connect { display: none !important; }
}

html:not([data-theme="dark"]) .mono.pulse{color:var(--pulse-soft)}
