/* ============================================
   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
     Clean neutrals, no color tint
     ---------------------------------------- */
  --bg: #ffffff;
  --bg-subtle: #f8f8fa;
  --bg-secondary: #f1f1f4;
  --card: #ffffff;
  --card-hover: #f8f8fa;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.05);

  /* ----------------------------------------
     TEXT COLORS
     ---------------------------------------- */
  --text: #1a1a2e;
  --text-muted: rgba(26, 26, 46, 0.58);
  --text-dimmed: rgba(26, 26, 46, 0.38);

  /* ----------------------------------------
     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;

  /* ----------------------------------------
     ELEVATION - Clean neutral shadows
     ---------------------------------------- */
  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  --surface-elevated: rgba(255, 255, 255, 0.95);

  /* ----------------------------------------
     ALIASES (backward compatibility)
     ---------------------------------------- */
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-dimmed);
  --surface: var(--card);
}

/* ----------------------------------------
   PRO MODE - Dark premium theme
   for logged-in users with credits/subscription
   ---------------------------------------- */
.app.pro-mode,
html.pro-mode-hint {
  --bg: #0a0a0f;
  --bg-subtle: #111118;
  --bg-secondary: #141420;
  --card: #111118;
  --card-hover: #181822;
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text: #e8e8ec;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-dimmed: rgba(255, 255, 255, 0.35);
  --primary-hover: #9B8DF7;
  --glow: rgba(139, 124, 246, 0.25);
  --marker-bg: rgba(249, 112, 102, 0.2);
  --shadow-color: 139, 124, 246;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(139, 124, 246, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(139, 124, 246, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(139, 124, 246, 0.15);
  --surface-elevated: rgba(20, 20, 32, 0.85);
}

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