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

:root {
  /* ----------------------------------------
     PRIMARY COLORS
     ---------------------------------------- */
  --primary: #1a1a2e;
  --primary-rgb: 26, 26, 46;
  --primary-hover: #2d2d44;
  --primary-light: #4a4a66;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----------------------------------------
     BACKGROUNDS - Light mode
     Warm neutrals with subtle tonal hint
     ---------------------------------------- */
  --bg: #fafafb;
  --bg-warm: #fafafb;
  --bg-subtle: #f6f6f8;
  --bg-secondary: #f1f1f4;
  --card: #ffffff;
  --card-tonal: #F4F6FB;
  --card-hover: #f8f8fa;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --hairline: rgba(26, 26, 46, 0.07);

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

  /* ----------------------------------------
     ACCENT COLOR
     ---------------------------------------- */
  --accent: #7C5CFC;

  /* ----------------------------------------
     TONAL PALETTE
     50 = subtle wash, 100 = chip bg, 700 = ink/text
     ---------------------------------------- */
  --tone-violet: #7C5CFC;
  --tone-violet-50: #EFEAFF;
  --tone-violet-100: #DDD3FF;
  --tone-violet-700: #4B2FB8;

  --tone-sky: #38BDF8;
  --tone-sky-50: #E6F6FE;
  --tone-sky-100: #C8ECFD;
  --tone-sky-700: #0c7eb3;

  --tone-emerald: #10B981;
  --tone-emerald-50: #D9F7EB;
  --tone-emerald-100: #B6EBD6;
  --tone-emerald-700: #047857;

  --tone-amber: #F59E0B;
  --tone-amber-50: #FFF4DD;
  --tone-amber-100: #FFE4B0;
  --tone-amber-700: #B45309;

  --tone-rose: #FB7185;
  --tone-rose-50: #FFE6EA;
  --tone-rose-100: #FFC9D2;
  --tone-rose-700: #B91D40;

  /* ----------------------------------------
     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(26, 26, 46, 0.1);

  /* ----------------------------------------
     ATMOSPHERE — Subtle depth tokens
     ---------------------------------------- */
  --tint-wash: rgba(var(--primary-rgb), 0.02);
  --tint-subtle: rgba(var(--primary-rgb), 0.05);
  --tint-focus: rgba(var(--primary-rgb), 0.1);
  --border-accent: rgba(var(--primary-rgb), 0.12);
  --shadow-accent-sm: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-accent-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-accent-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Legacy aliases — old tokens still referenced in code */
  --violet-wash: var(--tint-wash);
  --violet-tint: var(--tint-subtle);
  --violet-focus: var(--tint-focus);
  --border-violet: var(--border-accent);
  --shadow-violet-sm: var(--shadow-accent-sm);
  --shadow-violet-md: var(--shadow-accent-md);
  --shadow-violet-lg: var(--shadow-accent-lg);

  /* ----------------------------------------
     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
     Friendlier, bigger radii for the new design language.
     Legacy --radius-* names kept for back-compat with older CSS.
     ---------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.2s var(--ease-standard);
  --transition-slow: 0.3s var(--ease-standard);

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

  /* ----------------------------------------
     ELEVATION - Soft layered shadows
     ---------------------------------------- */
  --shadow-color: 20, 20, 40;
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.05), 0 1px 3px rgba(20, 20, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 40, 0.06), 0 2px 4px rgba(20, 20, 40, 0.04);
  --shadow-lg: 0 10px 30px rgba(20, 20, 40, 0.08), 0 4px 10px rgba(20, 20, 40, 0.04);
  --shadow-tonal-violet: 0 6px 20px rgba(124, 92, 252, 0.18);
  --shadow-tonal-violet-lg: 0 8px 24px rgba(124, 92, 252, 0.32);
  --shadow-tonal-sky: 0 6px 20px rgba(56, 189, 248, 0.18);
  --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-warm: #0a0a0f;
  --bg-subtle: #111118;
  --bg-secondary: #141420;
  --card: #141420;
  --card-tonal: #181828;
  --card-hover: #1c1c2c;
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --hairline: rgba(255, 255, 255, 0.06);
  --text: #e8e8ec;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-dimmed: rgba(255, 255, 255, 0.38);
  --primary: #f5f5fa;
  --primary-hover: #ffffff;

  /* Tonal palette — dark variants */
  --tone-violet: #a78bfc;
  --tone-violet-50: rgba(167, 139, 252, 0.10);
  --tone-violet-100: rgba(167, 139, 252, 0.20);
  --tone-violet-700: #c4b1ff;

  --tone-sky: #5fcdfc;
  --tone-sky-50: rgba(95, 205, 252, 0.10);
  --tone-sky-100: rgba(95, 205, 252, 0.20);
  --tone-sky-700: #9ce0ff;

  --tone-emerald: #34d399;
  --tone-emerald-50: rgba(52, 211, 153, 0.10);
  --tone-emerald-100: rgba(52, 211, 153, 0.20);
  --tone-emerald-700: #6ee7b7;

  --tone-amber: #fbbf24;
  --tone-amber-50: rgba(251, 191, 36, 0.10);
  --tone-amber-100: rgba(251, 191, 36, 0.20);
  --tone-amber-700: #fde68a;

  --tone-rose: #fb7185;
  --tone-rose-50: rgba(251, 113, 133, 0.10);
  --tone-rose-100: rgba(251, 113, 133, 0.20);
  --tone-rose-700: #fda4af;

  --accent: #a78bfc;
  --glow: rgba(167, 139, 252, 0.25);
  --marker-bg: rgba(249, 112, 102, 0.2);
  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.30);
  --shadow-tonal-violet: 0 6px 20px rgba(167, 139, 252, 0.30);
  --shadow-tonal-violet-lg: 0 8px 24px rgba(167, 139, 252, 0.42);
  --shadow-tonal-sky: 0 6px 20px rgba(95, 205, 252, 0.30);
  --surface-elevated: rgba(20, 20, 32, 0.85);
}

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