/**
 * FM-NEXUS Design System
 * CSS Variables & Theme Configuration
 */

/* ============================================
   ROOT VARIABLES - LIGHT THEME (DEFAULT)
   ============================================ */
:root {
  /* Primary Colors */
  --primary: hsl(302, 99%, 45%);
  --primary-foreground: hsl(0, 0%, 100%);
  --primary-glow: #fe4cf8;
  --secondary: hsl(180, 87%, 57%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --secondary-glow: #58f3f3;

  /* Background Colors */
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222.2, 84%, 4.9%);
  --alter-foreground: hsl(210, 40%, 98%);

  /* Gradients */
  --main-gr: linear-gradient(135deg, var(--primary), var(--secondary));

  /* Card & Popover */
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222.2, 84%, 4.9%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222.2, 84%, 4.9%);

  /* Muted */
  --muted: hsl(210, 40%, 96.1%);
  --muted-foreground: hsl(215.4, 16.3%, 46.9%);

  /* Accent */
  --accent: hsl(210, 40%, 96.1%);
  --accent-foreground: hsl(222.2, 47.4%, 11.2%);

  /* Destructive */
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);

  /* Border & Input */
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(222.2, 84%, 4.9%);

  /* Radius */
  --radius: 0.75rem;
  --radius-secondary: 0.5rem;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.1);

  --glass-bg-br: rgb(15 23 42 / 95%);

  /* 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), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Glow Effects */
  --glow-primary: 0 0 20px rgba(226, 1, 205, 0.4);
  --glow-secondary: 0 0 20px rgba(31, 158, 158, 0.4);

  /* Font family for dump elements */
  --main-font: Inter, system-ui,sans-serif;
}

/* ============================================
   DARK THEME
   ============================================ */
.dark,
[data-theme="dark"] {
  /* Primary Colors (slightly adjusted for dark) */
  --primary: hsl(302, 99%, 50%);
  --primary-foreground: hsl(0, 0%, 100%);
  --primary-alter-foreground: hsl(222.2, 84%, 4.9%);
  --primary-glow: #fe4cf8;
  --secondary: hsl(180, 87%, 50%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --secondary-alter-foreground: hsl(222.2, 84%, 4.9%);
  --secondary-glow: #58f3f3;

  /* Background Colors */
  --background: hsl(222.2, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --alter-foreground: hsl(222.2, 84%, 4.9%);

  /* Card & Popover */
  --card: hsl(222.2, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222.2, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);

  /* Muted */
  --muted: hsl(217.2, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);

  /* Accent */
  --accent: hsl(217.2, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);

  /* Destructive */
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);

  /* Border & Input */
  --border: hsl(217.2, 32.6%, 17.5%);
  --input: hsl(217.2, 32.6%, 17.5%);
  --ring: hsl(212.7, 26.8%, 83.9%);

  /* Glassmorphism for Dark */
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-bg-darker: rgba(15, 23, 42, 0.8);
  --glass-bg-lighter: rgb(255 255 255 / 5%);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.5);

  /* Shadows (darker) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);

  /* Glow Effects (brighter for dark) */
  --glow-primary: 0 0 30px rgba(226, 1, 205, 0.6);
  --glow-secondary: 0 0 30px rgba(31, 158, 158, 0.6);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: Inter, system-ui,sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* ============================================
   CONTAINER
   ============================================ */

.container-main {
    width: 100%;
    max-width: clamp(320px, 90vw, 1420px); /* Увеличено с 1280px до 1420px */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Еще шире на больших экранах */
@media (min-width: 1921px) {
    .container-main {
        max-width: calc(100vw - 900px);
    }
}

@media (min-width: 2559px) {
    .container-main {
        max-width: calc(100vw - 900px);
    }
}

@media (max-width: 640px) {
  .container-main {
    padding: 0 1rem;
  }
}

/* Text Gradients */
.text-gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient Backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.bg-mesh {
  background-image: 
    linear-gradient(to right, rgba(226, 1, 205, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 1, 205, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Transitions */
.transition-all {
  transition: all 0.3s ease;
}

.text-align-left {
  text-align: left;
}

.border-radius-1rem {
  border-radius: 1rem;
}

.border-radius-0-75rem {
  border-radius: 0.75rem;
}

.line-height-1 {
  line-height: 1;
}