/* nx-tokens.css — NETRECX DESIGN TOKENS (v1.4 003). The one place colour, type,
   spacing, radius and shadow are defined for every public page. Loaded after
   styles.css (whose old :root it overrides) and before nx-layout.css.

   PALETTE. Netrecx is industrial: graphite, warm paper and a copper/amber
   accent. It must never read as Infrecx (navy / blue / green). Status colours
   (success green, error red, warning amber) are semantic and stay as they are.
   Fonts: Archivo (display), Inter (text), IBM Plex Mono (codes) — self-hosted,
   SIL OFL (assets/fonts/OFL-*.txt). No third-party font request. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{
  /* colour — brand */
  --nx-graphite:#17191e; --nx-graphite-2:#24272f; --nx-steel:#3a3f4a;
  --nx-acc:#ea580c;          /* copper, buttons and highlights */
  --nx-acc-strong:#c2410c;   /* links and text on white (AA contrast) */
  --nx-acc-deep:#9a3412;     /* hover, pressed */
  --nx-acc-bright:#f59e0b;   /* amber, highlights on dark */
  --nx-acc-wash:#fff4ec;     /* tinted backgrounds */
  --nx-acc-line:#fdd3b4;     /* tinted borders */
  --nx-grad:linear-gradient(90deg,#f59e0b 0%,#ea580c 55%,#9a3412 100%);
  /* colour — neutrals (warm) */
  --nx-paper:#f6f4f0; --nx-paper-2:#efece6; --nx-card:#ffffff;
  --nx-ink:#17191e; --nx-ink-2:#2a2d35; --nx-mute:#555b67; --nx-mute-2:#6b7180;
  --nx-line:#e4e0d8; --nx-line-2:#d1cbc0;
  /* colour — status (semantic, unchanged) */
  --nx-ok:#15803d; --nx-ok-wash:#ecfdf3; --nx-err:#b42318; --nx-err-wash:#fef3f2; --nx-warn:#b45309; --nx-warn-wash:#fffaeb;
  /* type */
  --nx-font-display:'Archivo',system-ui,sans-serif; --nx-font-body:'Inter',system-ui,sans-serif; --nx-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --nx-t-xs:.75rem; --nx-t-sm:.875rem; --nx-t-md:1rem; --nx-t-lg:1.125rem; --nx-t-xl:1.375rem;
  --nx-t-2xl:clamp(1.55rem,1.1rem + 1.4vw,2.2rem); --nx-t-3xl:clamp(2rem,1.2rem + 2.6vw,3rem);
  /* spacing, radius, shadow */
  --nx-s1:4px; --nx-s2:8px; --nx-s3:12px; --nx-s4:16px; --nx-s5:24px; --nx-s6:32px; --nx-s7:48px; --nx-s8:64px;
  --nx-r-sm:8px; --nx-r:14px; --nx-r-lg:20px;
  --nx-sh-1:0 1px 2px rgba(23,25,30,.06);
  --nx-sh-2:0 10px 24px -12px rgba(23,25,30,.18),0 4px 10px -6px rgba(23,25,30,.10);
  --nx-sh-3:0 30px 60px -30px rgba(23,25,30,.28),0 15px 30px -15px rgba(23,25,30,.14);

  /* the names styles.css already uses, pointed at the tokens */
  --paper:var(--nx-paper); --paper-2:var(--nx-paper-2); --card:var(--nx-card);
  --ink:var(--nx-ink); --ink-2:var(--nx-ink-2); --slate:var(--nx-mute); --slate-2:var(--nx-mute-2);
  --line:var(--nx-line); --line-2:var(--nx-line-2);
  --blue:var(--nx-acc); --blue-strong:var(--nx-acc-strong); --blue-deep:var(--nx-acc-deep); --blue-wash:var(--nx-acc-wash);
  --display:var(--nx-font-display); --body:var(--nx-font-body); --mono:var(--nx-font-mono);
  --gradient-primary:linear-gradient(135deg,#ea580c 0%,#f59e0b 100%);
  --gradient-hero:linear-gradient(135deg,#17191e 0%,#2a2d35 50%,#17191e 100%);
  --shadow-lg:var(--nx-sh-2); --shadow-xl:var(--nx-sh-3);
  --shadow-glow:0 0 0 1px rgba(234,88,12,.12),0 8px 24px -8px rgba(234,88,12,.28);
  --r-sm:var(--nx-r-sm); --r-md:var(--nx-r); --r-lg:var(--nx-r-lg); --radius:var(--nx-r);
}
body{background:var(--nx-paper);color:var(--nx-ink)}
body::before{background-image:linear-gradient(to right,rgba(23,25,30,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(23,25,30,.03) 1px,transparent 1px)}
body::after{background:radial-gradient(900px 600px at 78% -8%,rgba(245,158,11,.10),transparent 60%),radial-gradient(800px 700px at -10% 110%,rgba(234,88,12,.05),transparent 60%)}
::selection{background:#fed7aa;color:var(--nx-ink)}
.btn-cta{background:var(--nx-acc);border-color:var(--nx-acc);color:#fff}
.btn-cta:hover{background:var(--nx-acc-deep);border-color:var(--nx-acc-deep)}
.hero .g,.h1-long .g{color:var(--nx-acc-strong)}
:focus-visible{outline-color:var(--nx-acc)}