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

:root {
  --font-size: 18px;

  /* ---------- Color ---------- */
  --bg-void: #0d0f12;
  --bg-panel: #16191d;
  --bg-raised: #1e2227;
  --border-hairline: #2a2f36;
  --text-primary: #e8eaed;
  --text-muted: #8b92a0;
  --accent-brand: #5b8def;
  --accent-live: #3ecf8e;
  --accent-down: #ff5c5c;
  --accent-connecting: #f5a623;

  /* ---------- Type ---------- */
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Font ---------- */
  --font-xxs: 0.66rem;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;

  /* ---------- Typography ---------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---------- Spacing Scale ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Border ---------- */
  --border-width: 1px;
  --border-width-active: 2px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);

  /* ---------- Animation ---------- */
  --transition-fast: 120ms;
  --transition-base: 180ms;

  /* ---------- Header ---------- */
  --header-height: 50px;
  --font-size-header: 1rem;

  --tab-height: calc(var(--header-height) * 0.75);

  /* ---------- Card ---------- */
  --card-width: 500px;
  --card-control-height: 36px;

  /* ---------- Button ---------- */
  --disabled-opacity: 0.45;

  /* ---------- SideBar ---------- */
  --sidebar-width-collapsed: calc(var(--header-height) * 0.85 + 2 * var(--space-3));
  --sidebar-width-expanded: 200px;

  /* ---------- DSP ---------- */
  --dsp-control-heigth: 40vh;
}