/* ============================================
   CSS VARIABLES - Design System Tokens
   ============================================ */

:root {
  /* ----------------------------------------
     PRIMARY COLORS
     Muted violet (softer, less stark)
     ---------------------------------------- */
  --primary: #8B7CF6;
  --primary-rgb: 139, 124, 246;
  --primary-hover: #7B6CE6;
  --primary-light: #B4A8F8;

  /* ----------------------------------------
     BACKGROUNDS - Light mode
     ---------------------------------------- */
  --bg: #fff;
  --bg-subtle: #fafafa;
  --card: #fafafa;
  --card-hover: #f5f5f5;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border: #e8e8e8;
  --border-subtle: #f0f0f0;

  /* ----------------------------------------
     TEXT COLORS
     ---------------------------------------- */
  --text: #1a1a1a;
  --text-muted: #666;
  --text-dimmed: #767676;

  /* ----------------------------------------
     ACCENT COLOR
     ---------------------------------------- */
  --accent: #38BDF8;

  /* ----------------------------------------
     MARKERS
     Warm coral (softer than pure orange)
     ---------------------------------------- */
  --marker: #F97066;
  --marker-bg: rgba(249, 112, 102, 0.15);

  /* ----------------------------------------
     STATUS COLORS
     ---------------------------------------- */
  --success: #34D399;
  --error: #F87171;

  /* ----------------------------------------
     EFFECTS
     ---------------------------------------- */
  --glow: rgba(139, 124, 246, 0.15);

  /* ----------------------------------------
     SAFE AREAS (iOS notch, etc.)
     ---------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ----------------------------------------
     SPACING SCALE
     ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ----------------------------------------
     BORDER RADIUS SCALE
     ---------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ----------------------------------------
     ADDITIONAL SEMANTIC COLORS
     ---------------------------------------- */
  --warning: #f59e0b;
  --info: #3b82f6;
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}