@import url("./fonts.css");

/* ============================================================================
   BLUE·WIRE — Design tokens (single source of truth)
   Import this FIRST on every page:  <link rel="stylesheet" href="/assets/bluewire-tokens.css">
   Then page CSS only references var(--…). Do not hard-code hex anywhere else.
   ============================================================================ */
:root{
  /* ---- ink / surface (Paper system — used on every page except the two bi-color ones) ---- */
  --ink:#16202d;        /* primary text */
  --ink-2:#2c3947;      /* secondary text */
  --muted:#586472;      /* tertiary text */
  --muted-2:#8b95a1;    /* mono labels, hints */
  --paper:#f2f1ec;      /* page background (warm) */
  --paper-2:#e9e8e1;    /* hover / sunken */
  --panel:#ffffff;      /* cards, inputs */
  --rail:#f7f6f1;       /* side rails, table headers */
  --line:#d9d8cf;       /* primary border */
  --line-2:#e7e6de;     /* hairline / dashed rows */

  /* ---- brand ---- */
  --accent:#1b50d0;     /* Wire Blue — primary CTA, selection */
  --accent-hi:#173fa6;  /* hover / pressed */
  --accent-soft:#e6ecfb;/* tint fills, soft chips */
  --copper:#b3713a;     /* hardware warmth, warnings, secondary accent */
  --copper-soft:#f1e6da;
  --ok:#1f7a4d; --ok-soft:#e2f1e9;
  --bad:#b42318;

  /* ---- conductor palette (configurator + diagrams ONLY — mirrors app.html wCol) ---- */
  --pos:#c83232;        /* DC positive — red */
  --neg:#181e27;        /* DC negative — black */
  --dc-alt:#dab800;     /* DC neg (alt) — yellow */
  --dc-any:#8899b0;     /* DC unspecified — grey */
  --ac-live:#7a3a18;    /* AC live — brown */
  --ac-neu:#1a4ec0;     /* AC neutral — blue */
  --ac-gnd:#0a7048;     /* AC earth / PE & bonding — green */
  --ignition:#5b2090;   /* ignition / accessories — purple */
  --comms:#64748b;      /* data / VE.Can / VE.Direct / BMS-CAN — slate (dashed stroke) */
  --canvas-bg:#fbfaf7;  /* configurator canvas (light, so black neg reads) */

  /* ---- type ---- */
  --font-display:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Schibsted Grotesk', system-ui, sans-serif;
  --font-serif:'Newsreader', Georgia, serif;   /* italic "Wire" in the wordmark + editorial pull-quotes */
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* technical labels, specs */

  /* ---- shape ---- */
  --radius:8px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(22,32,45,.05), 0 6px 20px -10px rgba(22,32,45,.12);
  --shadow-hover:0 18px 38px -22px rgba(22,32,45,.4);
  --maxw:1280px;
}

/* Google Fonts (or self-host these three for production):
   https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap */

/* ---- wordmark (reuse everywhere the logo appears) ---- */
.bw-mark{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;display:inline-flex;align-items:baseline;color:var(--ink)}
.bw-mark .dot{color:var(--accent);margin:0 .08em}
.bw-mark .wire{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:0}

/* ---- mono micro-label helper ---- */
.bw-mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:11px}