/* =========================================
   FloView Design Tokens & CSS Variables
   ========================================= */

:root {
  /* ---- Dark Theme (Default) ---- */
  --bg-primary: #06060f;
  --bg-secondary: #0d0d1f;
  --bg-tertiary: #14142b;
  --bg-card: #161632;
  --bg-card-hover: #1c1c3e;
  --bg-elevated: #1a1a3a;
  --bg-input: #12122a;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #eef0ff;
  --text-secondary: #9a9bbe;
  --text-muted: #5f6080;
  --text-inverse: #06060f;

  --accent: #2d7aff;
  --accent-hover: #4d94ff;
  --accent-glow: rgba(45, 122, 255, 0.35);
  --accent-subtle: rgba(45, 122, 255, 0.1);
  --accent-gradient: linear-gradient(135deg, #2d7aff 0%, #6c5ce7 100%);

  --danger: #ff4757;
  --success: #2ed573;
  --warning: #ffa502;

  --border-color: rgba(255, 255, 255, 0.06);
  --border-color-hover: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  --glass-bg: rgba(22, 22, 50, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  /* ---- Typography ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 0.925rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.6rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-theme: 350ms ease;

  /* ---- Layout ---- */
  --header-height: 64px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;
}

/* =========================================
   Light Theme Overrides
   ========================================= */
body.light-theme {
  --bg-primary: #f0f4ff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8edf8;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f4ff;
  --bg-elevated: #ffffff;
  --bg-input: #e8edf8;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  --text-primary: #0d1030;
  --text-secondary: #4a4d6e;
  --text-muted: #8e90a6;
  --text-inverse: #ffffff;

  --accent: #1a5ccc;
  --accent-hover: #2d7aff;
  --accent-glow: rgba(26, 92, 204, 0.2);
  --accent-subtle: rgba(26, 92, 204, 0.06);

  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.15);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px var(--accent-glow);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
}