/* =========================================================
   NEWVILLAIN — DESIGN TOKENS
   Shared between /public-site and /onion-site.
   Both frontends import this file. Variants override below.
   ========================================================= */

:root {
  /* --- Core palette --- */
  --nv-black:        #0a0a0a;
  --nv-black-pure:   #000000;
  --nv-off-white:    #e8e6e1;
  --nv-bone:         #c9c5bd;
  --nv-grey-900:     #141414;
  --nv-grey-800:     #1c1c1c;
  --nv-grey-700:     #242424;
  --nv-grey-600:     #2e2e2e;
  --nv-grey-500:     #3a3a3a;
  --nv-grey-400:     #555555;
  --nv-grey-300:     #7a7a7a;
  --nv-grey-200:     #9a9a9a;
  --nv-grey-100:     #b8b6b0;

  /* Signal red — used sparingly, as alert, never decorative */
  --nv-signal:       #ff2a1f;
  --nv-signal-dim:   #8a1612;

  /* =========================================================
     THEME TOKENS — dynamically swapped on product hover.
     Default = light warm paper. Accent = acid yellow-green
     (#e7f537). Hover themes in themes.css flip into loud combos.
     Valley + Surface override to near-black via main.css.
     ========================================================= */
  --nv-bg:           #ebe5d4;   /* light warm paper / cream */
  --nv-bg-elev:      #ddd5be;   /* slightly deeper paper */
  --nv-bg-panel:     #f4efdd;   /* even lighter for cards/modal */
  --nv-fg:           #0a0a0a;   /* black ink */
  --nv-fg-dim:       #4a4a45;
  --nv-fg-dimmer:    #8a8579;
  --nv-line:         #c0b8a4;
  --nv-line-strong:  #6a6258;
  --nv-accent:       #e7f537;   /* acid yellow-green */
  --nv-accent-dim:   #9aa522;

  /* Cube-grid surfaces — visible greys on the cream paper base */
  --nv-cube-top:     #d6cdb6;
  --nv-cube-left:    #beb59c;
  --nv-cube-right:   #9d9582;
  --nv-cube-edge:    #5e5648;
  --nv-cube-accent:  #e7f537;

  /* --- Typography --- */
  --nv-font-mono:    "IBM Plex Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --nv-font-sans:    "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --nv-font-display: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --nv-fs-xs:        11px;
  --nv-fs-sm:        12px;
  --nv-fs-base:      14px;
  --nv-fs-md:        16px;
  --nv-fs-lg:        20px;
  --nv-fs-xl:        28px;
  --nv-fs-2xl:       44px;
  --nv-fs-3xl:       72px;
  --nv-fs-display:   clamp(48px, 11vw, 180px);

  --nv-tracking-wide:   0.18em;
  --nv-tracking-wider:  0.32em;
  --nv-tracking-tight:  -0.02em;

  --nv-leading-tight:   1.05;
  --nv-leading-normal:  1.45;

  /* --- Layout --- */
  --nv-gutter:       24px;
  --nv-gutter-lg:    48px;
  --nv-max-width:    1440px;
  --nv-border:       1px solid var(--nv-line-strong);
  --nv-border-dim:   1px solid var(--nv-line);
  --nv-border-loud:  1px solid var(--nv-fg);

  /* --- Motion --- */
  --nv-ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --nv-ease-soft:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --nv-dur-fast:     120ms;
  --nv-dur:          240ms;
  --nv-dur-slow:     520ms;
  /* Theme color transitions get their own slower duration — feels like
     a swell rather than a snap when the page flips palette. */
  --nv-dur-theme:    480ms;

  /* --- Surfaces / effects --- */
  --nv-scanline:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 3px
    );

  --nv-noise:
    radial-gradient(rgba(255,255,255,0.012) 1px, transparent 1px) 0 0/3px 3px;
}

/* =========================================================
   GLOBAL RESET / BASE — used by both sites.
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--nv-bg);
  color: var(--nv-fg);
  font-family: var(--nv-font-sans);
  font-size: var(--nv-fs-base);
  line-height: var(--nv-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Theme-swap transition. Slower, softer ease — feels like a wash,
   not a snap. Only color-ish properties animate (never layout). */
html {
  transition:
    background-color var(--nv-dur-theme) var(--nv-ease-soft),
    color            var(--nv-dur-theme) var(--nv-ease-soft);
}
body, .nv-topbar, .nv-strip, .nv-access, .nv-foot,
.nv-card, .nv-card__frame, .nv-card__title, .nv-card__sub,
.nv-access__input, .nv-access__submit {
  transition:
    background-color var(--nv-dur-theme) var(--nv-ease-soft),
    border-color     var(--nv-dur-theme) var(--nv-ease-soft),
    color            var(--nv-dur-theme) var(--nv-ease-soft);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

::selection {
  background: var(--nv-signal);
  color: var(--nv-black);
}

/* Utility primitives shared across both sites */

.nv-mono       { font-family: var(--nv-font-mono); }
.nv-upper      { text-transform: uppercase; letter-spacing: var(--nv-tracking-wide); }
.nv-dim        { color: var(--nv-grey-200); }
.nv-dimmer     { color: var(--nv-grey-400); }
.nv-signal     { color: var(--nv-signal); }

.nv-tag {
  display: inline-block;
  font-family: var(--nv-font-mono);
  font-size: var(--nv-fs-xs);
  letter-spacing: var(--nv-tracking-wide);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
  color: var(--nv-grey-100);
}

.nv-tag--alert { color: var(--nv-signal); }

.nv-rule {
  border: 0;
  border-top: var(--nv-border-dim);
  height: 0;
}

.nv-scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--nv-scanline);
  z-index: 999;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Tabular numbers everywhere by default — feels like a system log */
.nv-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}