/* ==========================================================================
   QueTogether — Design Tokens
   Central plats för färger, typografi, spacing, radius och skuggor.
   ========================================================================== */

:root {
  /* --- Färg: bakgrund & ytor --- */
  --bg: #0a0a0f;
  --bg-2: #0d0d14;
  --surface: #14141c;
  --surface-2: #1a1a24;
  --surface-3: #20202c;
  --surface-hover: #23232f;

  /* --- Färg: kanter & linjer --- */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* --- Färg: primär (violett) --- */
  --primary: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-soft: rgba(139, 92, 246, 0.14);
  --primary-glow: rgba(139, 92, 246, 0.45);
  --gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  --gradient-text: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 55%, #7c3aed 100%);

  /* --- Färg: statusfärger --- */
  --online: #22c55e;
  --away: #f59e0b;
  --busy: #ef4444;
  --info: #38bdf8;

  /* --- Färg: text --- */
  --text: #f5f5f7;
  --text-muted: #a1a1b0;
  --text-dim: #6b6b7b;

  /* --- Typografi --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Spacing --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Skuggor --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 30px rgba(124, 58, 237, 0.35);

  /* --- Layout-mått --- */
  --topbar-h: 72px;
  --sidebar-w: 250px;
  --container: 1400px;
}