/* ============================================================================
   Zeshan Haider — design tokens, v2 "Console"

   Direction: the page is typeset like a working terminal, but on paper.
   Security's real material is text — logs, diffs, exit codes — so the site
   uses that vernacular literally rather than the usual glowing-dark-dashboard
   metaphor. Light ground, monospace-led, ink-on-paper contrast.

     1. PRIMITIVES   raw values, never referenced by components
     2. SEMANTIC     roles components actually use
     3. THEMES       night mode re-points the same roles
   ========================================================================= */

:root{
  /* ---- 1. PRIMITIVES ------------------------------------------------- */

  /* paper: warm off-white, the colour of a printed man page */
  --c-paper:#FBFAF7;  --c-paper-2:#F3F1EC;  --c-paper-3:#E8E5DE;
  --c-rule:#D9D5CB;

  /* ink: not black — a very dark green-grey, like a phosphor terminal
     printed rather than glowing */
  --c-ink:#12211C;  --c-ink-2:#3B4A44;  --c-ink-3:#6B7A73;

  /* signal: a single saturated green. Terminal green, but deepened so it
     works as ink on paper rather than glow on black. */
  --c-signal:#00875A;  --c-signal-2:#00A86B;  --c-signal-wash:#E3F2EB;

  /* alarm: for the "before" state — a hacked site, a failure line */
  --c-alarm:#C0362C;  --c-alarm-wash:#FBEAE8;
  --c-warn:#B06E00;   --c-warn-wash:#FBF2E0;

  /* night */
  --c-night:#0C1512;  --c-night-2:#132019;  --c-night-3:#1B2C24;
  --c-night-rule:#26382F;
  --c-glow:#3DDC97;

  /* ---- 2. SEMANTIC ---------------------------------------------------- */
  --bg:var(--c-paper);
  --bg-2:var(--c-paper-2);
  --surface:#FFFFFF;
  --rule:var(--c-rule);
  --rule-strong:#C4BFB3;

  --text-1:var(--c-ink);
  --text-2:var(--c-ink-2);
  --text-3:var(--c-ink-3);

  --signal:var(--c-signal);
  --signal-2:var(--c-signal-2);
  --signal-wash:var(--c-signal-wash);
  --on-signal:#FFFFFF;

  --alarm:var(--c-alarm);
  --alarm-wash:var(--c-alarm-wash);
  --warn:var(--c-warn);
  --warn-wash:var(--c-warn-wash);

  /* Type. The display face is the monospace — that is the whole idea.
     Body is a humanist sans that sits quietly underneath it. */
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  /* Shape: near-square. Terminals do not have rounded corners. */
  --r:3px; --r-2:6px;

  --shadow:rgba(18,33,28,.10);
  --shadow-2:rgba(18,33,28,.16);

  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1140px;
  --gutter:clamp(20px,5vw,44px);
}

html[data-theme="night"]{
  --bg:var(--c-night);
  --bg-2:var(--c-night-2);
  --surface:var(--c-night-3);
  --rule:var(--c-night-rule);
  --rule-strong:#33493D;

  --text-1:#E6F0EA;
  --text-2:#A9BDB3;
  --text-3:#71877D;

  --signal:var(--c-glow);
  --signal-2:#6BE8B4;
  --signal-wash:rgba(61,220,151,.10);
  --on-signal:#04170F;

  --alarm:#FF7A6E;  --alarm-wash:rgba(255,122,110,.12);
  --warn:#F0B849;   --warn-wash:rgba(240,184,73,.12);

  --shadow:rgba(0,0,0,.5);
  --shadow-2:rgba(0,0,0,.7);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}