/* Levai Energy Systems — design tokens
   Instrument Panel system: deep graphite/navy foundation, off-white content
   surfaces, one restrained signal-blue accent for interaction. */

@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/IBMPlexSans-Variable.woff2') format('woff2-variations'),
      url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

:root{
  /* ---------- chrome (nav / footer / hero bands) — fixed dark foundation ---------- */
  --graphite-950:#0B0F14;
  --graphite-800:#1A212B;
  --graphite-line: rgba(255,255,255,0.10);
  --graphite-line-strong: rgba(255,255,255,0.18);
  --graphite-ink:#EDEFF2;
  --graphite-ink-dim:#99A2AC;
  --graphite-accent:#5B8FEF;

  /* ---------- content surfaces (light) ---------- */
  --bg:#F4F5F6;
  --panel:#E8EAEC;
  --line:#D7DBDE;
  --line-strong:#B7BEC4;
  --ink:#12161B;
  --ink-dim:#545C64;
  --nav-bg: rgba(11,15,20,0.97);
  --card-bg-top:#FAFBFB;
  --card-shadow-1: rgba(18,22,27,0.06);
  --card-shadow-2: rgba(18,22,27,0.16);
  --card-shadow-1-hover: rgba(18,22,27,0.08);
  --card-shadow-2-hover: rgba(18,22,27,0.22);
  --stat-bg: rgba(18,22,27,0.045);
  --band-bg: rgba(18,22,27,0.035);
  --icon-wash: rgba(59,111,209,0.10);
  --ghost-bg: rgba(18,22,27,0.03);
  --flagship-a: rgba(59,111,209,0.08);
  --flagship-b: rgba(59,111,209,0.04);
  --btn-shadow: rgba(30,60,120,0.28);
  --card-hover-border: rgba(59,111,209,0.35);
  --flagship-border: rgba(59,111,209,0.25);
  --glass-bg: rgba(18,22,27,0.05);
  --glass-border: rgba(18,22,27,0.12);

  /* ---------- signal blue — the one interactive accent ---------- */
  --blue-accent:#3B6FD1;
  --blue-solid:#3B6FD1;
  --on-blue-solid:#F5F7FA;
  --on-accent:#F5F7FA;

  /* ---------- semantic status (kept separate from the brand accent) ---------- */
  --status-live:#2BB673;
  --status-warn:#C08A2E;
  --status-critical:#D64545;

  /* ---------- type ---------- */
  --display:'IBM Plex Sans', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --text-display: clamp(2.75rem, 5vw, 4.5rem);
  --text-h1: clamp(2rem, 3.2vw, 3rem);
  --text-h2: 1.875rem;
  --text-h3: 1.375rem;
  --text-body-lg: 1.0625rem;
  --text-body: 0.9375rem;
  --text-body-sm: 0.84375rem;
  --text-label: 0.6875rem;

  /* ---------- spacing (8px-based) ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:72px; --space-10:96px; --space-11:128px;

  /* ---------- radius ---------- */
  --radius-sm:2px;
  --radius-md:4px;

  /* ---------- containers / measure ---------- */
  --container:1280px;
  --measure-sm:480px;
  --measure:640px;
  --measure-lg:800px;

  /* ---------- breakpoints (reference values — media queries can't read
     custom properties, kept here as the documented source of truth) ---------- */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-in-out: cubic-bezier(0.77,0,0.175,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1216;
    --panel:#171B21;
    --line: rgba(237,239,242,0.10);
    --line-strong: rgba(237,239,242,0.18);
    --ink:#EDEFF2;
    --ink-dim:#9BA1AE;
    --nav-bg: rgba(11,15,20,0.90);
    --card-bg-top:#181D24;
    --card-shadow-1: rgba(0,0,0,0.35);
    --card-shadow-2: rgba(0,0,0,0.55);
    --card-shadow-1-hover: rgba(0,0,0,0.4);
    --card-shadow-2-hover: rgba(0,0,0,0.65);
    --stat-bg: rgba(237,239,242,0.05);
    --band-bg: rgba(237,239,242,0.025);
    --icon-wash: rgba(91,143,239,0.16);
    --ghost-bg: rgba(237,239,242,0.035);
    --flagship-a: rgba(91,143,239,0.09);
    --flagship-b: rgba(91,143,239,0.04);
    --card-hover-border: rgba(91,143,239,0.32);
    --flagship-border: rgba(91,143,239,0.22);
    --glass-bg: rgba(237,239,242,0.05);
    --glass-border: rgba(237,239,242,0.12);

    --blue-accent:#5B8FEF;
    --blue-solid:#5B8FEF;
    --on-blue-solid:#0B0F14;
    --on-accent:#0B0F14;
  }
}