/* ==========================================
   CSS Variables - JuiceTeam Design System
   ========================================== */

:root {
   /* ==========================================
       Colors - Light Theme
       ========================================== */
   --color-white: #ffffff;
   --color-black: #000000;

   /* Primary Colors */
   --color-primary: #1A73E8;
   --color-primary-hover: #1557b0;
   --color-primary-light: #4285F4;
   --color-primary-bg: rgba(26, 115, 232, 0.1);

   /* Background Colors */
   --color-bg: #ffffff;
   --color-bg-elevated: #f8f9fa;
   --color-bg-alt: #f1f3f4;
   --color-bg-hover: rgba(0, 0, 0, 0.04);

   /* Text Colors */
   --color-text-primary: #1f1f1f;
   --color-text-secondary: #5f6368;
   --color-text-tertiary: #80868b;

   /* Border Colors */
   --color-border: #dadce0;
   --color-border-light: #e8eaed;

   /* Navbar */
   --navbar-bg: rgba(255, 255, 255, 0.8);

   /* ==========================================
       Spacing System
       ========================================== */
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */
   --space-40: 10rem;
   /* 160px */
   --space-48: 12rem;
   /* 192px */

   /* ==========================================
       Typography
       ========================================== */
   --font-sans: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'Unbounded', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

   /* Font Sizes */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 1.875rem;
   /* 30px */
   --text-4xl: 2.25rem;
   /* 36px */
   --text-5xl: 3rem;
   /* 48px */
   --text-6xl: 4rem;
   /* 64px */

   /* ==========================================
       Border Radius
       ========================================== */
   --radius-sm: 0.25rem;
   /* 4px */
   --radius-md: 0.5rem;
   /* 8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.5rem;
   /* 24px */
   --radius-3xl: 2rem;
   /* 32px */
   --radius-full: 9999px;

   /* ==========================================
       Shadows
       ========================================== */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

   /* ==========================================
       Transitions
       ========================================== */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

   /* ==========================================
       Z-Index Scale
       ========================================== */
   --z-dropdown: 1000;
   --z-sticky: 1100;
   --z-fixed: 1200;
   --z-modal-backdrop: 1300;
   --z-modal: 1400;
   --z-popover: 1500;
   --z-tooltip: 1600;
}

/* ==========================================
   Dark Theme
   ========================================== */
[data-theme="dark"] {
   /* Primary Colors */
   --color-primary: #8AB4F8;
   --color-primary-hover: #AECBFA;
   --color-primary-light: #AECBFA;
   --color-primary-bg: rgba(138, 180, 248, 0.15);

   /* Background Colors */
   --color-bg: #1f1f1f;
   --color-bg-elevated: #2d2d2d;
   --color-bg-alt: #292929;
   --color-bg-hover: rgba(255, 255, 255, 0.08);

   /* Text Colors */
   --color-text-primary: #e3e3e3;
   --color-text-secondary: #9aa0a6;
   --color-text-tertiary: #80868b;

   /* Border Colors */
   --color-border: #3c4043;
   --color-border-light: #35363a;

   /* Navbar */
   --navbar-bg: rgba(31, 31, 31, 0.8);
}

/* ==========================================
   Media Queries for Responsive Typography
   ========================================== */
@media (max-width: 768px) {
   :root {
      --text-5xl: 2.5rem;
      /* 40px on mobile */
      --text-6xl: 3rem;
      /* 48px on mobile */
   }
}