/**
 * Design Tokens - CSS Variables (HSL format)
 * Базовая система дизайн-токенов для платформы квизов
 */

:root {
  /* === Цветовая палитра (HSL формат) === */
  
  /* Primary - основной цвет действия */
  --primary: 210 100% 50%;
  --primary-foreground: 0 0% 100%;
  
  /* Secondary - вторичный цвет */
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  
  /* Accent - акцентный цвет */
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  
  /* Destructive - цвет для опасных действий */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  
  /* Muted - приглушенный цвет для второстепенного контента */
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  
  /* Background & Foreground */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  
  /* Border & Input */
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 222 84% 5%;
  
  /* === Типографика === */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  
  /* Размеры шрифта */
  --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 */
  
  /* Веса шрифта */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line-height */
  --line-height-text: 1.5;
  --line-height-heading: 1.25;
  
  /* Letter-spacing для заголовков */
  --letter-spacing-heading: -0.01em;
  
  /* === Отступы и размеры === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  
  /* Legacy aliases (для совместимости со старыми стилями) */
  --gap: 1rem;          /* 16px - основной отступ между элементами */
  
  /* === Скругления === */
  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2.25rem;  /* 36px */
  --radius-full: 9999px;  /* для badges */
  
  /* Legacy alias */
  --radius: 0.75rem;      /* 12px - стандартное скругление */
  
  /* === Тени === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* === Анимации и переходы === */
  --motion-fast: 160ms;
  --motion-medium: 240ms;
  --motion-slow: 320ms;
  
  /* === Breakpoints (для reference, основная работа через Tailwind) === */
  --breakpoint-mobile: 320px;
  --breakpoint-mobile-lg: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-desktop-lg: 1280px;
  --breakpoint-desktop-xl: 1536px;
}

/* Тёмная тема (опционально, для будущего использования) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 17%;
    --accent-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 212 27% 84%;
  }
}

/* Доступность: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Доступность: prefers-contrast */
@media (prefers-contrast: high) {
  :root {
    --border: 0 0% 20%;
    --input: 0 0% 20%;
  }
}

/* iOS специфика: безопасные отступы для notch/home indicator */
@supports (padding: max(0px)) {
  :root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
  }
}

/* Выделение текста (разрешено только для контента) */
p,
span,
h1, h2, h3, h4, h5, h6 {
  user-select: text;
  -webkit-user-select: text;
}

/* Остальные элементы не выделяются */
* {
  -webkit-tap-highlight-color: transparent;
}