/* ══════════════════════════════════════════════════════════
   Vegangster Internal — shared tokens

   The brief and the dashboard are two screens of one tool, so the
   palette, the radius scale and the focus ring live in one file
   instead of drifting apart in two.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --vgi-bg:              #0b0818;
  --vgi-bg-soft:         #120d24;
  --vgi-surface:         rgba(255, 255, 255, 0.055);
  --vgi-surface-strong:  rgba(255, 255, 255, 0.09);
  --vgi-border:          rgba(255, 255, 255, 0.12);
  /* Hover and dashed outlines, where the resting border is too faint to read */
  --vgi-border-strong:   rgba(255, 255, 255, 0.22);

  /* Inherited brand purple — the link back to the main product */
  --vgi-purple:          #8352FF;
  --vgi-purple-light:    #A888F7;

  /* Signature Internal accent — this is what says "not the live site" */
  --vgi-pink:            #FF3DA8;
  --vgi-violet-accent:   #A855F7;
  --vgi-accent-gradient: linear-gradient(135deg, var(--vgi-pink) 0%, var(--vgi-violet-accent) 100%);
  --vgi-glow:            rgba(217, 70, 239, 0.55);

  /* Text */
  --vgi-text:            #faf8ff;
  --vgi-text-muted:      #b3a6d6;
  /* Third tier for timestamps and counts: greyer than muted, so it reads as
     background information next to the muted labels */
  --vgi-text-faint:      #8b849e;

  /* Status */
  --vgi-success:         #57e6a6;
  --vgi-error:           #F53B5D;
  --vgi-warning:         #E5DD38;
  --vgi-info:            #36BCF2;

  /* Radius scale — 14 / 20 / 28 / pill, nothing in between */
  --vgi-radius-s:        14px;
  --vgi-radius:          20px;
  --vgi-radius-lg:       28px;
  --vgi-radius-pill:     999px;

  /* Two tiers: depth for resting surfaces, glow for active ones only */
  --vgi-shadow-depth:    0 24px 60px rgba(0, 0, 0, 0.45);
  --vgi-shadow-glow:     0 10px 32px -8px var(--vgi-glow);

  --vgi-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --panel-w:     460px;
  --splitter-w:  7px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--vgi-bg);
  color: var(--vgi-text);
  font: 15px/1.55 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The glow is decoration, not a focus ring */
:focus-visible {
  outline: 2px solid var(--vgi-purple-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Scrollbars ──
   In the tool's own colours on every screen of it — the brief, the
   dashboard, the doors. Without these a browser that keeps its scrollbars
   on screen — Windows, or macOS set to always show them — draws a white
   rail down a dark panel. `color-scheme` covers whatever is
   not styled below; Chrome and Firefox read `scrollbar-color`, Safari only
   the -webkit- rules. */
:root { color-scheme: dark; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--vgi-radius-pill);
  background: rgba(168, 85, 247, 0.4) padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: rgba(168, 85, 247, 0.65); }