/* JARVIS OS — shared foundation: the typeface and the token scales.

   Split out of style.css so the public site can share them without
   inheriting the console's components. index.html had its own font stack,
   its own palette and its own spacing values — a second design system, and
   the one page a visitor sees first was the only one not set in the family
   the product already self-hosts and pays the bytes for.

   It cannot simply link style.css instead: both files define .btn, .stat,
   .stats, .vid and .empty for different components, so the whole point is
   that this file carries the foundation and nothing that paints a widget.

   Load order is tokens.css, then style.css. */

/* IBM Plex — self-hosted. The CSP declares no font-src, so it falls back to
   default-src 'self' and a Google Fonts link would simply be refused. Plex
   was drawn for technical and industrial interfaces and its figures are
   properly tabular, which matters on a screen that is mostly numbers. */
@font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Plex Mono"; src:url("fonts/plex-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Plex Mono"; src:url("fonts/plex-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  color-scheme:dark;

  /* --- ground and surfaces: Aurora ---------------------------------------
     A deep indigo ground with a slow mesh gradient drifting behind it (see
     aurora.js). The obvious way to build this look is translucent panels, and
     it is the wrong way: frosted glass takes its colour from whatever passes
     underneath, so panel contrast would move as the aurora drifted — which is
     exactly the bug that made these panels opaque in the first place.

     So the glass here is made of *light on the edges*, not transparency. Every
     panel keeps an opaque base, and reads as glass through a top sheen, a
     light-catching hairline and a soft shadow. Only the sidebar and the topbar
     blur, because they genuinely overlay scrolling content, and even they sit
     at 88% so the text on them never depends on what is behind. */
  /* Retuned to the logo art (2026-08-23): the identity is not lavender mist,
     it is a near-black stage with electric blue raking in from the left and
     violet from the right. Everything below got darker and cooler so those two
     lights are the only saturated colour on the page. */
  --bg0:#03050e;                              /* page ground — near black */
  --bg1:#080c1a;                              /* panel */
  --bg2:#0d1428;                              /* inset row, well */
  --glass:#080c1a; --glass-2:#111a33;         /* surface, surface-raised */
  --brd:rgba(140,180,255,.12);                /* hairline, cooled */
  --brd-2:rgba(150,190,255,.26);              /* emphasised edge */
  --well:#05070f;                             /* inputs, code blocks */

  /* --- the aurora itself ---
     Ambient only. These three never touch a control, a label or a status — the
     drifting ground is the one place the cyan is allowed to be decorative, and
     keeping it out of the chrome is what stops it competing with the data
     colours below. */
  --aur-1:#25b7ff; --aur-2:#b53cff; --aur-3:#1442d8;
  /* the two sides of the logo's lighting, for anything that needs to name them */
  --lite-b:#25b7ff; --lite-v:#b53cff;

  /* --- one accent ---
     A single indigo carries interaction. --violet is the fill (white text on it
     clears 5.4:1); --violet-2 is the same hue lifted for text and links on a
     panel (9:1). Everything else on this list is reserved: green means running,
     amber means look at me, red means broken. An accent that borrowed one of
     those would make the status colours ambiguous the moment it appeared on a
     button — which is why the aurora's cyan is not the accent, tempting as it
     looked in the mockup. */
  --violet:#7a3cf0; --violet-2:#c9a8ff;

  /* --- status: instrument lights, retuned to read on indigo --- */
  --green:#3ad6a0; --amber:#f0b543; --red:#ff6d7d;

  /* --- data: charts and category coding only, never chrome --- */
  --cyan:#42cfe8; --pink:#ee7fc4;

  /* --- text --- */
  --ink:#eef3ff; --ink-2:#b3c0e0; --dim:#8d9bc2;   /* 6.6:1 on a panel — the muted tone still has to be readable */

  /* --- type: 7 steps, tight at the small end because this is a dense console --- */
  --fs-1:10px;    /* overlines, badges — uppercase + tracked */
  --fs-2:11.5px;  /* captions, meta */
  --fs-3:13px;    /* body — the workhorse */
  --fs-4:15px;    /* emphasis, small headings */
  --fs-5:18px;    /* panel + section headings */
  --fs-6:24px;    /* KPI values */
  --fs-7:30px;    /* display */
  --lh-tight:1.25; --lh:1.5;
  --track:.06em; --track-wide:.14em;

  /* --- space: 4px ramp, used for gap and padding alike --- */
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px;
  --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;

  /* --- radius --- */
  /* Aurora is a softer geometry than the instrument this replaced. */
  --r-1:5px; --r-2:9px; --r-3:14px; --r-4:20px; --r-pill:999px;
  --r:var(--r-4); --r-sm:var(--r-3);          /* names the rest of the file already uses */

  /* --- elevation --- */
  --sh-1:0 3px 14px rgba(0,0,0,.42);
  --sh-2:0 10px 30px rgba(0,0,0,.48);
  --sh-3:0 24px 70px rgba(0,0,0,.58);
  /* the inset top line is the sheen that makes a panel read as glass without
     being transparent enough to let the drifting ground change its contrast */
  --sh-glass:0 12px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  --ring:0 0 0 3px rgba(122,60,240,.42);      /* focus + active field */
  --lift:0 10px 30px rgba(122,60,240,.40);    /* raised accent surface */
  --lift-2:0 14px 40px rgba(122,60,240,.55);  /* the same, hovered */

  /* --- motion: three durations, one curve --- */
  --dur-1:120ms;   /* colour / opacity */
  --dur-2:200ms;   /* transform, hover lift */
  --dur-3:320ms;   /* entrances */
  --ease:cubic-bezier(.22,1,.36,1);

  --sans:"Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
}