/* ==========================================================================
   NexStudio theme (owner 2026-10-18): the look the home page was refreshed to,
   shared by every page, so the whole site reads as one.
   - Surfaces: near-black and neutral greys, no colour tint.
   - Text: a softer white, lower contrast.
   - Red only where it means something: the main button, errors, the odd
     highlight. Everything that used to be red for decoration is neutral.
   - Crimson's muted harmony instead: brass for credits and prices, dusty rose
     for small marks.
   - No glows and no coloured washes behind things.
   Load it after the page's own stylesheets. The React app (dashboard, admin)
   gets the same values from src/components/v34/styles/theme.css.
   ========================================================================== */
:root {
  /* surfaces */
  --ink: #0a0a0a;
  --ink-2: #0e0e0e;
  --panel: #101010;
  --panel-2: #151515;
  --panel-3: #1c1c1c;
  --line: #232323;
  --line-2: #313131;

  /* text */
  --bone: #eeeae7;
  --dust: #b8b0aa;
  --dim: #948c86;

  /* the accent is neutral: focus rings, active items and links stop being red */
  --accent: #d2c8c2;
  --accent-glow: rgba(210, 200, 194, .14);

  /* the one red: a calmer crimson for the main button */
  --accent-fill: #b5121b;
  --accent-fill-hover: #cc1622;
  --on-accent: #f4ebe7;
  --crimson: #a30f1a;

  /* crimson's muted harmony */
  --brass: #c4a06a;
  --rose: #b98a86;
  --sage: #7fa197;
}

body { background: var(--ink); }
::selection { background: #4a2a2e; color: var(--bone); }

/* buttons: flat, no glow */
.btn-accent, .btn-accent:hover { box-shadow: none; }
.btn-accent:hover { transform: none; }

/* labels: quiet, no red squares */
.eyebrow::before { display: none; }
.eyebrow, .px.y, .y { color: var(--dim); }

/* credits and prices in brass, not red */
.rate, .plan-credits .doto, .calc-eq b { color: var(--brass); }
.plan li::before { background: var(--dim); }
.plan.featured { background: var(--panel); border-color: var(--line-2); }
.plan-badge { background: var(--panel-3); color: var(--bone); border: 1px solid var(--line-2); }
.switch-pill { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--dust) var(--fill, 50%), var(--panel-3) var(--fill, 50%)); }
input[type="range"]::-moz-range-progress { background: var(--dust); }

/* no coloured washes behind headers, cards and art (site pages, auth, app shell) */
.site-body .page-hero::before { background: none; }
.device-demo, .dev-card, .side-plan { background: var(--panel); }
.ref-hero { background: var(--ink-2); }
.about-art::before, .nf-art::before, .ref-art::before { box-shadow: none; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .05), transparent 70%); }
.auth-form-side::before { background: none; animation: none; }
.auth-art { background: var(--ink-2); }
.auth-art .vox-stage::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .05), transparent); }
.auth-art .vox-stage { inset: 12% 22% 40%; } /* the NexNode mark sits smaller than the old grandma did */
.auth-mark.red, .dev-client .li-icon { background: rgba(255, 255, 255, .06); }
.about-split { background: var(--panel); }
.about-art::before { border-color: var(--line); box-shadow: none; }
.about-art .vox { transform: scale(.72); }
.plan-card.featured { border-color: var(--line-2); background: var(--panel); box-shadow: none; }
.drop-zone:hover, .drop.over .drop-zone { background: rgba(255, 255, 255, .03); }
.release.is-latest .when::before, .tk-subj .dot { box-shadow: none; }

/* danger keeps its red: it means something */
.btn-danger { border-color: rgba(220, 70, 78, .5); }

/* the NexNode mark in voxels (home, sign-in pages): without WebGL a flat copy of the mark stands in */
.vox[data-voxel="nexnode"]:not([data-vox-on]) { background: url(/assets/brand/nexnode-mark.svg) center / 70% no-repeat; }

/* the balance card (dashboard): a dark card with a faint crimson corner, the number in brass,
   instead of a full red block */
.hero-card { color: var(--bone); border: 1px solid var(--line-2); background: radial-gradient(120% 140% at 0% 0%, rgba(156, 38, 48, .3), transparent 58%), var(--panel-2); }
.hero-card.gold { color: var(--bone); background: radial-gradient(120% 140% at 0% 0%, rgba(196, 160, 106, .2), transparent 58%), var(--panel-2); }
.hero-card.brown { background: radial-gradient(120% 140% at 0% 0%, rgba(176, 106, 44, .22), transparent 58%), var(--panel-2); }
.hero-card .over { color: var(--dust); opacity: 1; }
.hero-bal { color: var(--brass); }

/* Bars take the page colour, so the top never reads darker than the page. */
.nav, .topbar { background: color-mix(in srgb, var(--ink) 74%, transparent); }

/* Neutral, not warm (owner 2026-11-01: the big footer word read red on some pages).
   The design's warm near-blacks (#1e1618, #171112, rgba(14,11,12)) become the theme's greys. */
.footer-mark { color: #151515; }
.buckets i { background: #121212; }
.views .regen .v-img { background: repeating-linear-gradient(45deg, #121212 0 6px, #171717 6px 12px); }
.site-body .docs-nav { background: color-mix(in srgb, var(--ink) 92%, transparent); }
@media (max-width: 1100px) { header.nav .nav-links { background: var(--ink); } }