/* ============================================================================
   RhinoCrete Works — central colour theme for RhinoCrete OS · BN22
   ONE palette, inherited by every module. Loaded AFTER styles.css so these
   :root token values win. Industrial: construction-orange accent on charcoal /
   concrete, white cards. Semantic colours kept: green=Completed/Paid,
   red=Attention/errors, amber=Pending Verification, grey=inactive.
   Interactive orange = #c84f00 (white text on it passes WCAG AA ~4.6:1);
   bright #f26500 reserved for large progress fills. No logo assets needed.
   ============================================================================ */
:root{
  /* RhinoCrete source palette (from the Rhino Crete Works identity) */
  --rc-orange:#f26500; --rc-orange-dark:#c84f00; --rc-charcoal:#242424; --rc-graphite:#4d4947;
  --rc-concrete-grey:#89827e; --rc-concrete-light:#f3f3f2; --rc-surface:#ffffff; --rc-border:#d5d2cf;
  --rc-text:#242424; --rc-text-muted:#66615e;
  /* remap the app's design tokens (LIGHT) */
  --paper:#f3f3f2; --panel:#ffffff; --frame:#e9e7e4; --line:#d5d2cf;
  --ink:#242424; --ink2:#66615e; --mut:#89827e;
  --accent:#c84f00; --brand:#242424; --on-accent:#ffffff;
  --grey:#9a938d; --yellow:#c07f00; --orange:#c25e18; --blue:#4d6b86; --green:#238a4e; --red:#c8402f;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1b1a19; --panel:#242322; --frame:#302e2c; --line:#3a3735;
  --ink:#f0ede9; --ink2:#b7b0aa; --mut:#8a827c;
  --accent:#ff7a2e; --brand:#f0ede9; --on-accent:#1b1a19;
  --grey:#7e7770; --yellow:#e4b33c; --orange:#e08a48; --blue:#7fa0bd; --green:#4fb779; --red:#e0604f;
}}
:root[data-theme="dark"]{
  --paper:#1b1a19; --panel:#242322; --frame:#302e2c; --line:#3a3735;
  --ink:#f0ede9; --ink2:#b7b0aa; --mut:#8a827c;
  --accent:#ff7a2e; --brand:#f0ede9; --on-accent:#1b1a19;
  --grey:#7e7770; --yellow:#e4b33c; --orange:#e08a48; --blue:#7fa0bd; --green:#4fb779; --red:#e0604f;
}
:root[data-theme="light"]{
  --paper:#f3f3f2; --panel:#ffffff; --frame:#e9e7e4; --line:#d5d2cf;
  --ink:#242424; --ink2:#66615e; --mut:#89827e;
  --accent:#c84f00; --brand:#242424; --on-accent:#ffffff;
  --grey:#9a938d; --yellow:#c07f00; --orange:#c25e18; --blue:#4d6b86; --green:#238a4e; --red:#c8402f;
}

/* ---- targeted brand touches (colour only; no layout/logic change) ---- */
/* §5 charcoal navigation, light labels, bright-orange active — same in light & dark */
.tabbar{ background:#242424; border-top-color:#000; }
.tabbar .tab{ color:#c9c3bd; }
.tabbar .tab.on{ color:#ff7a2e; }
/* progress + sliders use the bright brand orange (large fills read fine) */
.bar .fill{ background:var(--rc-orange); }
.segsl::-webkit-slider-thumb{ background:var(--rc-orange); }
.segsl::-moz-range-thumb{ background:var(--rc-orange); }
/* primary buttons stay orange even if a module defined its own .btn.primary colour.
   Label uses --on-accent (white in light, near-black in dark) so it clears WCAG AA in BOTH modes
   (white on #ff7a2e was only 2.6:1; near-black on #ff7a2e is ~8:1). */
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn.solid{ background:var(--accent); color:var(--on-accent); }
/* dark-mode: any badge/label that hardcodes a dark amber ink becomes unreadable on a dark chip → lift it */
:root[data-theme="dark"] .badge.partial, :root[data-theme="dark"] .badge.pending{ color:#ffca7a; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge.partial, :root:not([data-theme="light"]) .badge.pending{ color:#ffca7a; } }