/**
 * Дизайн-токены для Lovable x Cursor дизайн-системы
 * 
 * Этот файл содержит все CSS-переменные, используемые в дизайн-системе.
 * Токены определяют цвета, типографику, размеры и другие визуальные свойства.
 */

/* Дизайн-система Lovable x Cursor - CSS токены */
/* Основана на design.md с изначальными цветами */

:root {
  /* Основные цвета */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  
  /* Градиенты */
  --gradient-rainbow: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #00ff00, #0000ff, #8000ff);
  --gradient-radial-hero: radial-gradient(
    circle at center,
    #0a0a0a 0%,
    #261b33 20%,
    #523d6e 40%,
    #94543d 60%,
    #ff8a4d 80%,
    #f5e8dd 100%
  );
  --gradient-background-dark: radial-gradient(ellipse at center, rgba(255,255,255,0.05), transparent);
  
  /* Текстуры */
  --texture-grain: url('../assets/grain.png');
  --texture-background-hero: url('../assets/background.png');
}

/* ===== СВЕТЛАЯ ТЕМА ===== */
:root,
[data-theme="light"] {
  /* Фоны */
  --bg-main: var(--color-white);
  --bg-surface: #f8f8f8;
  --bg-hero: var(--color-white);
  --bg-card: var(--color-white);
  
  /* Текст */
  --text-main: #111111;
  --text-muted: #777777;
  --text-placeholder: #999999;
  
  /* Границы */
  --border-soft: #e5e5e5;
  --border-muted: #d0d0d0;
  
  /* Акценты */
  --accent-primary: var(--gradient-rainbow);
  --accent-secondary: #ff75b5;
  
  /* Тени */
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  /* Эффекты */
  --grain-overlay: none;
  --glow-effect: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* ===== ТЁМНАЯ ТЕМА ===== */
[data-theme="dark"] {
  /* Фоны */
  --bg-main: radial-gradient(
    circle at center,
    #0a0a0a 0%,
    #261b33 20%,
    #523d6e 40%,
    #94543d 60%,
    #ff8a4d 80%,
    #f5e8dd 100%
  );
  --bg-surface: rgba(30, 30, 30, 0.95);
  --bg-hero: var(--gradient-background-dark);
  --bg-card: rgba(26, 26, 26, 0.95);
  
  /* Текст */
  --text-main: #ffffff;
  --text-hero: #f5f5f5;
  --text-muted: #999999;
  --text-placeholder: #666666;
  
  /* Границы */
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.12);
  
  /* Акценты */
  --accent-primary: #ff8a4d;
  --accent-secondary: #ff55e6;
  --accent-tertiary: #ff75b5;
  
  /* Тени */
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 0 24px rgba(255, 117, 181, 0.3);
  
  /* Эффекты */
  --grain-overlay: var(--texture-grain);
  --glow-effect: 0 0 16px rgba(255, 117, 181, 0.4);
}

/* ===== ТИПОГРАФИКА ===== */
:root {
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'Fira Code', monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ===== ОТСТУПЫ ===== */
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
}

/* ===== РАДИУСЫ ===== */
:root {
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
}

/* ===== ПЕРЕХОДЫ ===== */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  --transition-shadow: box-shadow 0.15s ease;
  --transition-transform: transform 0.15s ease;
  --transition-opacity: opacity 0.15s ease;
}

/* ===== КОНТЕЙНЕРЫ ===== */
:root {
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --container-full: 100%;
}

/* ===== Z-INDEX ===== */
:root {
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-banner: 1030;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ===== ВЫСОТЫ ===== */
:root {
  --height-header: 4rem;
  --height-hero: 100vh;
  --height-section: 80vh;
}