/* ─── Standout Tradesman — App theme tokens ──────────────────────────
   Light (default) + dark theme for all logged-in pages.
   Loaded by views/partials/_app_nav_full.ejs.

   USAGE
     Backgrounds/surfaces : --bg, --surface, --surface-elev
     Text                 : --text (primary), --text-body, --text-muted
     Borders              : --border
     Hover surfaces       : --hover-bg
     Shadows              : --shadow, --shadow-lg

   Brand colours (--navy, --accent, --white, --green, --red) are FIXED —
   they don't flip with the theme so amber CTAs always have navy text, etc.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Fixed brand tokens (same in both themes) ── */
  --navy:        #1B2B4B;
  --navy-mid:    #243558;
  --navy-light:  #344F7A;
  --navy-deep:   #0A101D;     /* nav bar — always dark */
  --accent:      #E8A020;
  --accent-dark: #C98A18;
  --accent-dk:   #C98A18;     /* alias used by some pages */
  --amber:       #E8A020;
  --white:       #ffffff;
  --green:       #669900;
  --red:         #DC2626;
  --cream:       #FAFAF7;

  /* ── LIGHT theme (default) ── */
  --bg:           #ffffff;
  --surface:      #F7F8FB;   /* subtle tint — gives cards a soft fill against the white page */
  --surface-elev: #EEF1F6;
  --surface-sunk: #E4E8EF;
  --text:         #1B2B4B;
  --text-body:    #1B2B4B;
  --text-muted:   #64748B;
  --text-subtle:  #94A3B8;
  --border:       #E5E7EB;
  --border-strong:#CBD5E1;
  --hover-bg:     rgba(15,23,42,0.04);
  --divider:      rgba(15,23,42,0.06);
  --shadow:       0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg:    0 12px 32px rgba(15,23,42,0.12);
  --on-accent:    #1B2B4B;     /* text colour on amber buttons */
}

[data-theme="dark"] {
  --bg:           #0f172a;
  --surface:      #1e293b;
  --surface-elev: #334155;
  --surface-sunk: #111827;
  --text:         #ffffff;
  --text-body:    #e2e8f0;
  --text-muted:   #94a3b8;
  --text-subtle:  #64748B;
  --border:       #334155;
  --border-strong:#475569;
  --hover-bg:     rgba(255,255,255,0.05);
  --divider:      rgba(255,255,255,0.06);
  --shadow:       0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.45);
  --on-accent:    #1B2B4B;
}

/* ── Form controls inherit the page font (Plus Jakarta Sans) ── */
button, input, select, textarea {
  font-family: inherit;
}

/* ── Smooth theme transitions (skip for reduced motion) ── */
@media (prefers-reduced-motion: no-preference) {
  body,
  body * {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.12s ease;
  }
  /* Don't transition transforms or interactive hovers */
  body *:hover {
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease, box-shadow 0.15s ease;
  }
}