/* ═══════════════════════════════════════════════════════════════
   WAAS Services Theme System
   ─────────────────────────────────────────────────────────────
   Each theme sets the full token set as CSS custom properties
   on [data-theme="..."]. Components (nav, promo banner, AI chat,
   emergency CTA) read these variables only — no hard-coded values.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300..800&family=Archivo+Narrow:wght@400..700&family=Bebas+Neue&family=DM+Sans:wght@300..700&family=IBM+Plex+Mono:wght@400..600&family=IBM+Plex+Sans:wght@300..700&family=IBM+Plex+Sans+Condensed:wght@400..700&family=Inter+Tight:wght@300..800&family=JetBrains+Mono:wght@400..600&family=Libre+Franklin:wght@400..900&family=Manrope:wght@300..800&family=Oswald:wght@300..700&family=Rubik:wght@300..800&family=Space+Grotesk:wght@300..700&family=Work+Sans:wght@300..700&display=swap');

/* ── Default & Heritage Blue (Trusted classic) ── */
:root,
[data-theme="heritage"] {
  --brand:        #1f3a63;
  --brand-dk:     #15294a;
  --brand-light:  #e6ecf5;
  --bg:           #f5f3ee;
  --surface:      #ffffff;
  --surface-2:    #ebe6da;
  --text:         #0e1624;
  --text-dim:     #4a5566;
  --muted:        #8a8f98;
  --border:       #d8d2c4;
  --accent:       #c04a2b;

  --font-display: "Libre Franklin", "Helvetica Neue", sans-serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius:       4px;
  --radius-lg:    8px;
  --theme-name:   "Heritage Blue";
  --theme-kind:   "trusted · classic";
}

/* ── Safety Red (Urgent, bold) ── */
[data-theme="safety"] {
  --brand:        #d62828;
  --brand-dk:     #9f1d1d;
  --brand-light:  #fde4e4;
  --bg:           #f4f1eb;
  --surface:      #ffffff;
  --surface-2:    #ebe5d7;
  --text:         #0a0a0a;
  --text-dim:     #3c3a36;
  --muted:        #8a867c;
  --border:       #d8d0bd;
  --accent:       #111111;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius:       2px;
  --radius-lg:    4px;
  --theme-name:   "Safety Red";
  --theme-kind:   "bold · urgent";
}

/* ── Shop Floor (Charcoal + safety yellow) ── */
[data-theme="shopfloor"] {
  --brand:        #f2c029;
  --brand-dk:     #c99a14;
  --brand-light:  #2a2a2a;
  --bg:           #1a1a1a;
  --surface:      #242424;
  --surface-2:    #2e2e2e;
  --text:         #f2f0eb;
  --text-dim:     #a8a49c;
  --muted:        #6a665e;
  --border:       #3a3a3a;
  --accent:       #f2c029;

  --font-display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       2px;
  --radius-lg:    4px;
  --theme-name:   "Shop Floor";
  --theme-kind:   "industrial · yellow";
}

/* ── Blueprint (Technical, cyan on graph) ── */
[data-theme="blueprint"] {
  --brand:        #0a73a6;
  --brand-dk:     #06557a;
  --brand-light:  #dbeef7;
  --bg:           #f3f4ec;
  --surface:      #ffffff;
  --surface-2:    #e5e8d9;
  --text:         #0c1b26;
  --text-dim:     #456072;
  --muted:        #8a9098;
  --border:       #c6cdb8;
  --accent:       #e85d1f;

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius:       0px;
  --radius-lg:    0px;
  --theme-name:   "Blueprint";
  --theme-kind:   "technical · schematic";
}

/* ── Copper Pipe (Warm metal + slate) ── */
[data-theme="copper"] {
  --brand:        #b85a27;
  --brand-dk:     #8c4219;
  --brand-light:  #f6e7d8;
  --bg:           #f5f1ea;
  --surface:      #ffffff;
  --surface-2:    #ebe3d4;
  --text:         #241c16;
  --text-dim:     #5a4e42;
  --muted:        #8c8174;
  --border:       #d9cdb7;
  --accent:       #375163;

  --font-display: "Rubik", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       8px;
  --radius-lg:    14px;
  --theme-name:   "Copper Pipe";
  --theme-kind:   "warm · plumbing";
}

/* ── Forest Green (Landscaping, eco) ── */
[data-theme="forest"] {
  --brand:        #2d5a3d;
  --brand-dk:     #1e4029;
  --brand-light:  #dce8df;
  --bg:           #f2f1ea;
  --surface:      #ffffff;
  --surface-2:    #e4e7dc;
  --text:         #152019;
  --text-dim:     #4a5850;
  --muted:        #868f84;
  --border:       #cfd4c4;
  --accent:       #c89a3a;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       10px;
  --radius-lg:    18px;
  --theme-name:   "Forest Green";
  --theme-kind:   "landscaping · eco";
}

/* ── Garage White (Modern clean auto/dealership) ── */
[data-theme="garage"] {
  --brand:        #e63946;
  --brand-dk:     #b82a36;
  --brand-light:  #fde4e6;
  --bg:           #fafaf9;
  --surface:      #ffffff;
  --surface-2:    #f0efed;
  --text:         #101213;
  --text-dim:     #4a4d52;
  --muted:        #8a8d92;
  --border:       #e0ded9;
  --accent:       #101213;

  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       4px;
  --radius-lg:    8px;
  --theme-name:   "Garage White";
  --theme-kind:   "modern · auto";
}

/* ── Midnight Dispatch (Dark mode 24-7) ── */
[data-theme="midnight"] {
  --brand:        #f25c05;
  --brand-dk:     #c14400;
  --brand-light:  #2a1f17;
  --bg:           #0d1117;
  --surface:      #161c24;
  --surface-2:    #1f2832;
  --text:         #ecedef;
  --text-dim:     #9aa3af;
  --muted:        #5d6673;
  --border:       #28313c;
  --accent:       #3fb68b;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius:       6px;
  --radius-lg:    10px;
  --theme-name:   "Midnight Dispatch";
  --theme-kind:   "24/7 · emergency";
}