/* VelarIQ site tokens: the NRS app's titanium system (dark), carried to the web.
   Layout concept: machined titanium. Raised panels on a graphite ground, recessed wells
   for anything you type into, raised keys for anything you press, chrome on the figures
   that matter, and the logo cyan only where something is live.
   One committed dark look, as in the app; colour-scheme stays dark. */
:root{
  /* Ground and surfaces */
  --bg:#262A31;            /* app ground */
  --bg-2:#1D2127;          /* recessed well */
  --bg-3:#15181C;          /* deepest: intro doors, behind wells */
  --card:#35393F;          /* solid stand-in for the raised panel */
  --card-hi:#3B4048;
  --panel-a:#3A3F48;       /* raised panel, top */
  --panel-b:#32373F;       /* raised panel, bottom */
  --hero-a:#3C434D;        /* hero panel, top */
  --hero-b:#2D333B;        /* hero panel, bottom */
  --key-a:#454B54;         /* titanium key, top */
  --key-b:#393E46;         /* titanium key, bottom */
  --chip:rgba(29,33,39,.88);
  --door:#1D2127;

  /* Ink: contrast on ground, panel and well */
  --fg:#F4F6F8;            /* primary, 9.8:1 */
  --fg-2:#C8CED6;          /* secondary, 6.7:1 */
  --muted:#A8B1BB;         /* tertiary, 4.9:1 */
  --dim:#A8B1BB;

  /* Signal and status, from the app */
  --signal:#62E1EF;        /* cyan: live, selected, sending, connected */
  --signal-hi:#84EAF4;
  --signal-lo:#2CC6DF;
  --signal-ink:#04161A;
  --verified:#83E0A6;
  --restricted:#F6BC4A;
  --guarded:#FF8597;
  --destructive:#FFA8B5;

  /* Layer colours, mapped onto the app's meanings:
     thermal is titanium with amber heat, cognition is the live cyan, proof is verified green. */
  --steel:#C8CED6;
  --sage:#62E1EF;
  --teal:#83E0A6;
  --sea:#62E1EF;
  --deep:#2CC6DF;
  --warm:#F6BC4A;
  --alert:#FF8597;

  /* Chrome and silver */
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#E8ECF0 55%,#B4BDC8 100%);
  --silver:linear-gradient(180deg,#FFFFFF 0%,#EDF0F3 48%,#D4DAE1 100%);
  --silver-edge:#A7B0BA;
  --silver-ink:#101317;

  /* Rules */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.10);
  --line-3:rgba(255,255,255,.14);
  --line-4:rgba(255,255,255,.22);
  --edge:rgba(0,0,0,.55);
  --sage-line:rgba(98,225,239,.28);
  --sage-line-2:rgba(98,225,239,.45);
  --teal-line:rgba(131,224,166,.45);
  --warm-line:rgba(255,133,151,.55);
  --grid:transparent;

  /* Depth */
  --sh-panel:inset 0 1px 0 rgba(255,255,255,.10),0 2px 0 rgba(0,0,0,.34),0 22px 38px -20px rgba(0,0,0,.92),0 5px 12px -5px rgba(0,0,0,.55);
  --sh-hero:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(98,225,239,.10),0 0 34px -10px rgba(38,195,224,.70),0 2px 0 rgba(0,0,0,.34),0 22px 38px -20px rgba(0,0,0,.92),0 5px 12px -5px rgba(0,0,0,.55);
  --sh-key:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.30),0 2px 0 #1A1D22,0 3px 2px rgba(0,0,0,.30),0 11px 18px -8px rgba(0,0,0,.85);
  --sh-key-down:inset 0 1px 0 rgba(255,255,255,.10),inset 0 1px 3px rgba(0,0,0,.35),0 1px 0 #1A1D22;
  --sh-silver:inset 0 1px 0 #FFFFFF,inset 0 -2px 0 rgba(16,24,40,.16),0 2px 0 #7C8590,0 3px 2px rgba(0,0,0,.32),0 13px 22px -10px rgba(0,0,0,.88);
  --sh-well:inset 0 3px 6px rgba(0,0,0,.52),inset 0 1px 1px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.06);
  --sh-bar:inset 0 -1px 0 rgba(255,255,255,.10),0 2px 0 rgba(0,0,0,.30),0 14px 26px -14px rgba(0,0,0,.95);

  /* Type: Archivo set wide for titles and chrome figures, normal width for reading;
     IBM Plex Mono for hashes, keys, addresses and code only. */
  --f-sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:125%;
  --fs-label:13px;
  --fs-small:14px;
  --fs-body:16px;
  --fs-lede:clamp(16px,1.3vw,19px);
  --fs-h3:clamp(20px,1.8vw,26px);
  --fs-h2:clamp(30px,3.3vw,46px);
  --fs-hero:clamp(42px,5.4vw,76px);

  /* Space and shape */
  --max:1360px;
  --pad:clamp(16px,5vw,72px);
  --sect:clamp(64px,7.6vw,112px);
  --hdr-h:76px;
  --radius:16px;
  --radius-key:13px;

  color-scheme:dark;
}