@tailwind base;
@tailwind components;
@tailwind utilities;

/* Корпоративная дизайн-система МастерБТ-ЕКБ
Все цвета в формате HSL для консистентности
*/

@layer base {
  :root {
    /* Корпоративная палитра - серо-белая база */
    --background: 0 0% 98%;
    --foreground: 216 12% 24%;

    /* Карточки и панели */
    --card: 0 0% 100%;
    --card-foreground: 216 12% 24%;
    --card-hover: 210 25% 96%;

    /* Поповеры и дропдауны */
    --popover: 0 0% 100%;
    --popover-foreground: 216 12% 24%;

    /* Основной синий акцент */
    --primary: 214 88% 45%;
    --primary-hover: 214 88% 40%;
    --primary-foreground: 0 0% 100%;

    /* Вторичный серый */
    --secondary: 210 11% 93%;
    --secondary-hover: 210 11% 88%;
    --secondary-foreground: 216 12% 24%;

    /* Приглушенные тона */
    --muted: 210 11% 96%;
    --muted-foreground: 215 16% 40%;

    /* Акцентные элементы */
    --accent: 38 92% 40%;
    --accent-hover: 38 92% 35%;
    --accent-foreground: 0 0% 100%;

    /* Статусы */
    --success: 142 71% 35%;
    --success-foreground: 0 0% 100%;
    --warning: 45 93% 47%;
    --warning-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Границы и интерфейс */
    --border: 214 20% 89%;
    --input: 214 20% 89%;
    --ring: 214 88% 45%;

    /* Корпоративные тени */
    --shadow-corporate: 0px 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card: 0px 1px 4px rgba(0, 0, 0, 0.06);

    /* Радиусы скругления */
    --radius: 0.375rem;
    --radius-lg: 0.5rem;

    /* Дополнительные переменные для тёмной темы */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans mobile-text-spacing;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Mobile optimizations */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html {
    scroll-behavior: smooth;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
  }

  /* Улучшенные focus состояния для accessibility */
  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Медиазапросы для Core Web Vitals */
  @media (max-width: 768px) {
    /* Уменьшение CLS через резервирование места */
    .critical-above-fold {
      min-height: 100vh;
      min-height: 100dvh; /* Dynamic viewport height для мобильных */
    }
  }
}

@layer components {
  /* Корпоративные компоненты */
  .corporate-container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .corporate-card {
    @apply bg-card border border-border rounded-lg p-4 sm:p-6 transition-all duration-300;
    box-shadow: var(--shadow-card);
    /* Touch-friendly минимальные размеры */
    min-height: 120px;
  }

  .corporate-card:hover {
    background-color: hsl(var(--card-hover));
    box-shadow: var(--shadow-corporate);
    transform: translateY(-2px);
  }

  /* Mobile-first типографика */
  .mobile-optimized-text {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.6;
  }

  /* Touch targets минимум 44px */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Улучшенная читаемость на мобильных */
  .mobile-text-spacing {
    letter-spacing: 0.01em;
    word-spacing: 0.1em;
  }

  .fade-in {
    animation: fadeIn 0.6s ease-in-out;
  }

  .fade-up {
    animation: fadeUp 0.8s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeUp {
    from { 
      opacity: 0; 
      transform: translateY(30px); 
    }
    to { 
      opacity: 1; 
      transform: translateY(0); 
    }
  }
}