/* ═══════════════════════════════════════════════════════════════════════════
   VOLEX FORGE — DESIGN SYSTEM (Phase 1: Global Visual Style)
   The ONE canonical token source for every page (home, Studio, marketplace,
   landing, admin). Rules of the system:
   · ONE accent across the app: CAD blue (--vf-accent). Nothing else is brand.
   · Green is NOT an accent — it is the VERIFIED/proof semantic, reserved.
   · Amber = warning semantic, red = danger semantic. Semantics ≠ accents.
   · Neutral base palette: white / grey / charcoal, both themes.
   · One font family: Inter (UI) + IBM Plex Mono (values/code) + Space
     Grotesk (logo only). Titles medium, labels regular, values heavier,
     units light grey.
   · Hairline separators only (--vf-border) — no heavy borders.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Neutral base (light) ─────────────────────────────────────────────── */
  --vf-bg:        #f4f4f4;
  --vf-card:      #ffffff;
  --vf-raised:    #fafafa;
  --vf-input:     #fafafa;
  --vf-fg:        #111111;
  --vf-muted:     #616770;
  --vf-faint:     #9aa0a6;
  --vf-border:    #e0e0e0;
  --vf-subtle:    #d0d0d0;

  /* ── The one accent ───────────────────────────────────────────────────── */
  --vf-accent:       #4d8dff;   /* CAD viewport blue — the app's only brand color */
  --vf-accent-deep:  #2f6fe0;
  --vf-accent-ink:   #04101f;   /* text on accent fills */

  /* ── Semantic status (reserved meanings, never decorative) ────────────── */
  --vf-verified:  #3ecf8e;      /* proof passed / validated / owned */
  --vf-warn:      #e8a33d;      /* caution / approximate / contact */
  --vf-danger:    #ef4444;      /* failure / separation / decline */

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --vf-font:      'Inter', system-ui, -apple-system, sans-serif;
  --vf-mono:      'IBM Plex Mono', ui-monospace, monospace;
  --vf-logo:      'Space Grotesk', var(--vf-font);
  --vf-w-title:   600;          /* titles: medium/semibold */
  --vf-w-label:   400;          /* labels: regular */
  --vf-w-value:   500;          /* values: slightly heavier */

  /* ── Space & shape ────────────────────────────────────────────────────── */
  --vf-r-sm: 6px;  --vf-r-md: 8px;  --vf-r-lg: 12px;
  --vf-gap-1: 6px; --vf-gap-2: 10px; --vf-gap-3: 16px; --vf-gap-4: 24px;
  --vf-hairline: 1px solid var(--vf-border);
}

html[data-vf-theme="dark"] {
  /* ── Neutral base (charcoal) ──────────────────────────────────────────── */
  --vf-bg:        #08090a;
  --vf-card:      #0e1011;
  --vf-raised:    #141618;
  --vf-input:     #141618;
  --vf-fg:        #f7f8f8;
  --vf-muted:     #9ca2a8;
  --vf-faint:     #5c6166;
  --vf-border:    #1f2224;
  --vf-subtle:    #2a2e31;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body { font-family: var(--vf-font); }
.vf-mono   { font-family: var(--vf-mono); }
.vf-unit   { color: var(--vf-faint); font-weight: 300; }   /* units: light grey */

/* Slim instrument scrollbars everywhere — fat grey bars break the panel look */
* { scrollbar-width: thin; scrollbar-color: var(--vf-subtle) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--vf-border); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--vf-subtle); }

/* Smooth, no-jump interactions (spec §5): colors/borders ease, layout doesn't */
button, a, input, select { transition: background-color .13s, border-color .13s, color .13s; }

/* Projects gallery — cards lift subtly on hover (spec §5: motion, no layout jump) */
.vf-proj-card:hover { border-color: var(--vf-accent) !important; transform: translateY(-2px); }