/* Vega TV — forked from SelectVPN tokens, accent re-themed to violet */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --sv-bg:        #08080b;
  --sv-surface-1: #0e0e12;
  --sv-surface-2: #131319;
  --sv-surface-3: #1a1a22;
  --sv-surface-4: #23232e;

  /* Borders */
  --sv-border:        #1f1f2a;
  --sv-border-strong: #2a2a38;
  --sv-border-focus:  var(--sv-accent);

  /* Foreground */
  --sv-fg:       #ededf0;
  --sv-fg-muted: #a1a1aa;
  --sv-fg-dim:   #71717a;
  --sv-fg-faint: #52525b;

  /* Accent — violet for Vega */
  --sv-accent:        #a855f7;
  --sv-accent-hover:  #c084fc;
  --sv-accent-press:  #9333ea;
  --sv-accent-soft:   rgba(168,85,247,0.12);
  --sv-accent-softer: rgba(168,85,247,0.04);

  --sv-success:      #10b981;
  --sv-success-soft: rgba(16,185,129,0.10);
  --sv-warn:         #f59e0b;
  --sv-warn-soft:    rgba(245,158,11,0.10);
  --sv-danger:       #ef4444;
  --sv-danger-soft:  rgba(239,68,68,0.10);
  --sv-info:         #3b82f6;
  --sv-info-soft:    rgba(59,130,246,0.10);

  /* Type */
  --sv-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sv-font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', ui-monospace, monospace;

  --sv-text-xs:   11px;
  --sv-text-sm:   12px;
  --sv-text-base: 13px;
  --sv-text-md:   14px;
  --sv-text-lg:   16px;
  --sv-text-xl:   20px;
  --sv-text-2xl:  26px;
  --sv-text-3xl:  34px;

  --sv-leading-tight:  1.05;
  --sv-leading-normal: 1.4;
  --sv-leading-loose:  1.6;

  --sv-tracking-tight: -0.02em;
  --sv-tracking-wide:  0.06em;
  --sv-tracking-caps:  0.12em;

  --sv-weight-regular: 400;
  --sv-weight-medium:  500;
  --sv-weight-semibold: 600;
  --sv-weight-bold:    700;

  /* Spacing */
  --sv-space-1: 4px;
  --sv-space-2: 8px;
  --sv-space-3: 12px;
  --sv-space-4: 16px;
  --sv-space-5: 20px;
  --sv-space-6: 24px;
  --sv-space-8: 32px;
  --sv-space-10: 40px;
  --sv-space-12: 48px;

  /* Radii */
  --sv-radius-none: 0;
  --sv-radius-sm:   4px;
  --sv-radius-md:   6px;
  --sv-radius-lg:   8px;
  --sv-radius-xl:   12px;

  --sv-shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4);
  --sv-shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 12px rgba(0,0,0,0.5);
  --sv-shadow-glow: 0 0 0 3px rgba(168,85,247,0.22);

  --sv-sidebar-w: 220px;
  --sv-topbar-h:  48px;
  --sv-row-h:     40px;

  --sv-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --sv-duration-fast:   120ms;
  --sv-duration-normal: 200ms;
}

html, body {
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-fg);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-base);
  line-height: var(--sv-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss02", "cv11";
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5 {
  font-family: var(--sv-font-sans);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: var(--sv-tracking-tight);
  line-height: var(--sv-leading-tight);
  color: var(--sv-fg);
  margin: 0;
}

p { margin: 0; }

.mono, code, kbd, samp {
  font-family: var(--sv-font-mono);
  font-feature-settings: "zero", "ss01";
}

.label-caps {
  font-size: var(--sv-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--sv-tracking-caps);
  color: var(--sv-fg-faint);
  font-weight: var(--sv-weight-medium);
  font-family: var(--sv-font-mono);
}

::selection { background: rgba(168,85,247,0.32); color: var(--sv-fg); }

*:focus-visible {
  outline: none;
  box-shadow: var(--sv-shadow-glow);
  border-radius: var(--sv-radius-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sv-border); border-radius: 5px; border: 2px solid var(--sv-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--sv-border-strong); }