/* ─────────────────────────────────────────────────────────────────────────────
   MECHANICUS BRAND LAYER — mechanicusins.com identity over the vendored
   DriveSmart design system. Loaded AFTER drivesmart.css + style.css/login.css
   so removing this one <link> (or reverting the branding PR) restores the old
   look 1:1. Charts inherit automatically: chart-theme.js reads these tokens.

   Palette (sampled from the site + logo, 2026-07-06):
     brand green  #2e7d32 (headlines/wordmark)   deep green  #256d2a
     gear gold    #f0b000 (accents)              readable gold on white #c8900a
     canvas       #f6f5f1 (site background)      ink #1f2a20
   Tagline: "Designed for Risk · Built for Results"
   ──────────────────────────────────────────────────────────────────────────── */

/* ── tokens: dark theme (accent swap only — surfaces stay neutral dark) ────── */
:root {
  --primary:           #7cb970;   /* readable green on dark */
  --primary-container: #2e7d32;
  --primary-fixed:     #a5d69a;
  --on-primary:        #0b1a0d;
  --success:           #58b85c;
  --warning:           #f0b000;   /* gear gold */
  --idle:              #9ab694;
  --accent:            var(--primary);
}

/* ── tokens: light theme (the primary brand look) ──────────────────────────── */
:root[data-theme="light"] {
  --primary:           #2e7d32;
  --primary-container: #256d2a;
  --primary-fixed:     #7cb970;
  --on-primary:        #ffffff;
  --success:           #3d8b37;
  --warning:           #c8900a;   /* gold, darkened for white backgrounds */
  --danger:            #c0392b;
  --idle:              #6b8f6a;
  --accent:            var(--primary);

  --surface-lowest:    #f6f5f1;   /* the site's warm off-white canvas */
  --surface:           #ffffff;
  --surface-low:       #f2f1ec;
  --surface-container: #ffffff;
  --surface-high:      #efeee8;
  --surface-variant:   #e7e5dd;
  --on-surface:        #1f2a20;
  --on-surface-variant:#49584b;
  --outline:           #8a9789;
  --outline-variant:   #c2c9be;

  --glass-border:      rgba(26, 42, 28, 0.08);
  --glass-border-hi:   rgba(26, 42, 28, 0.14);
  --hairline:          rgba(26, 42, 28, 0.10);
  --hairline-soft:     rgba(26, 42, 28, 0.06);
  --fill-1:            rgba(26, 42, 28, 0.04);
  --fill-2:            rgba(26, 42, 28, 0.08);
  --nav-bg:            rgba(255, 255, 255, 0.72);
  --sidebar-bg:        rgba(255, 255, 255, 0.55);
  --grid-line:         rgba(26, 42, 28, 0.05);
}

/* ── typography: match the site's clean Helvetica look ─────────────────────── */
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ── brand tile: lightbulb logo on a white tile (dashboard + login) ────────── */
.logo, .login-brand .logo {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(31, 42, 32, 0.14);
  border: 1px solid rgba(31, 42, 32, 0.10);
}
.logo img, .login-brand .logo img {
  width: 34px; height: 38px; object-fit: contain; display: block;
}

/* ── wordmark: uppercase letterspaced green, gold product line ─────────────── */
.brand h1, .login-brand h1 {
  color: #2e7d32;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 700;
  font-size: 17px;
}
.sidebar .brand p, .login-brand p { color: var(--warning); font-weight: 600; }
:root:not([data-theme="light"]) .brand h1,
:root:not([data-theme="light"]) .login-brand h1 { color: #7cb970; }

/* ── footer tagline ─────────────────────────────────────────────────────────── */
.brand-tagline { color: var(--primary); font-weight: 600; }