@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Оптимизация шрифтов */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
}

/* Mobile optimization */
@supports (padding: max(0px)) {
  .safe-area-inset-top {
    padding-top: max(env(safe-area-inset-top), 0.75rem);
  }
  .safe-area-inset-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);
  }
}

/* Touch target optimization */
@media (pointer: coarse) {
  button, a, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Prevent text size adjustment on mobile */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Improve touch scrolling */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* GPU acceleration for scrollable areas */
.scrollbar-hide {
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* Content visibility optimization */
.contain-layout {
  contain: layout style;
}

.contain-strict {
  contain: strict;
}

/* Image rendering optimization */
img, video {
  content-visibility: auto;
}

/* Smooth theme transitions - only for colors */
*,
*::before,
*::after {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Exclude specific elements from theme transition */
.no-transition,
.no-transition *,
[data-no-transition],
[data-no-transition] * {
  transition: none !important;
}

/* Preserve intended animations */
.animate-spin,
.animate-pulse,
.animate-bounce,
[class*="animate-"] {
  transition: none !important;
}

body {
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

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

  :root {
    --background: 0 0% 96%;
    --foreground: 0 0% 9%;
    --card: 0 0% 98%;
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 89%;
    --popover-foreground: 0 0% 9%;
    --primary: 240 100% 65%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 32%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 63%;
    --muted-foreground: 0 0% 9%;
    --accent: 240 100% 95%;
    --accent-foreground: 240 100% 55%;
    --destructive: 0 72% 50%;
    --destructive-foreground: 0 85% 97%;
    --border: 0 0% 83%;
    --input: 0 0% 83%;
    --ring: 240 100% 65%;
    --radius: 1.25rem;
    --chart-1: 240 95% 70%;
    --chart-2: 230 90% 72%;
    --chart-3: 220 85% 70%;
    --chart-4: 240 100% 68%;
    --chart-5: 0 0% 45%;
    --sidebar: 0 0% 98%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 240 100% 65%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 32%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 83%;
    --sidebar-ring: 240 100% 65%;
    --font-sans: 'Lato', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-serif: 'EB Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
  }

  .light {
    --background: 40 20% 97%;
    --foreground: 30 15% 10%;
    --card: 40 25% 99%;
    --card-foreground: 30 15% 10%;
    --popover: 40 25% 99%;
    --popover-foreground: 30 15% 10%;
    --primary: 240 100% 65%;
    --primary-foreground: 0 0% 100%;
    --secondary: 40 15% 92%;
    --secondary-foreground: 30 15% 10%;
    --muted: 40 10% 90%;
    --muted-foreground: 30 12% 35%;
    --accent: 240 100% 65%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 40 15% 88%;
    --input: 40 15% 88%;
    --ring: 240 100% 65%;
  }
  .dark {
    --background: 0 0% 9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 14%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 25%;
    --popover-foreground: 0 0% 98%;
    --primary: 240 100% 65%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 45%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 45%;
    --muted-foreground: 0 0% 98%;
    --accent: 240 70% 32%;
    --accent-foreground: 240 100% 82%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 85% 97%;
    --border: 0 0% 32%;
    --input: 0 0% 32%;
    --ring: 240 100% 65%;
    --chart-1: 240 95% 82%;
    --chart-2: 230 90% 84%;
    --chart-3: 220 85% 82%;
    --chart-4: 240 100% 80%;
    --chart-5: 0 0% 45%;
    --sidebar: 0 0% 14%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 240 100% 65%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 100% 82%;
    --sidebar-accent-foreground: 240 70% 32%;
    --sidebar-border: 0 0% 32%;
    --sidebar-ring: 240 100% 65%;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }
}

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom utility classes */
.touch-manipulation {
  touch-action: manipulation;
}

/* Ripple effect */
button {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 600ms ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Telegram Mini App Styles */
body.telegram-webapp {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Add padding for Telegram header and safe area */
  padding-top: env(safe-area-inset-top, 0px);
}

body.telegram-webapp #root {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Add top padding for Telegram's header bar */
  padding-top: 44px;
}

/* Telegram Mini App full-screen layout */
.telegram-webapp .tg-fullscreen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Hide elements in Telegram Mini App */
body.telegram-webapp .hide-in-telegram {
  display: none !important;
}

/* Adjust sticky header in Telegram */
body.telegram-webapp header.sticky {
  top: 0;
}