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

/* Design tokens from NextJS globals.css */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2 0 0);
  --card: oklch(0.99 0 0);
  --card-foreground: oklch(0.2 0 0);
  /* --primary: oklch(0.48 0.15 271);
  --primary-5: oklch(0.48 0.15 271 / 0.05);
  --primary-10: oklch(0.48 0.15 271 / 0.1);
  --primary-20: oklch(0.48 0.15 271 / 0.2); */
  --primary: #0F11CF;
  --primary-5: oklch(0.48 0.15 271 / 0.05);
  --primary-10: #0F11CF / 0.1;
  --primary-20: #0F11CF / 0.2;
  --primary-foreground: oklch(1 0 0);
  /* --secondary: oklch(0.42 0.13 193); */
  --secondary: #339933;
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.96 0.005 271);
  --muted-30: oklch(0.96 0.005 271 / 0.3);
  --muted-50: oklch(0.96 0.005 271 / 0.5);
  --muted-foreground: oklch(0.5 0.02 271);
  /* --accent: oklch(0.42 0.13 193); */
  --accent: #339933;
  --accent-5: oklch(0.42 0.13 193 / 0.05);
  --accent-10: oklch(0.42 0.13 193 / 0.1);
  --accent-20: oklch(0.42 0.13 193 / 0.2);
  --accent-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.01 271);
  --input: oklch(0.92 0.01 271);
  --ring: oklch(0.48 0.15 271);
  --radius: 2rem;
}

@layer base {
  * {
    @apply border-[var(--border)];
  }
  body {
    @apply bg-[var(--background)] text-[var(--foreground)] antialiased;
  }
}

/* Clients marquee animation */
.clients-marquee {
  width: max-content;
  animation: clients-marquee 10s linear infinite;
}

.clients-marquee:hover {
  animation-play-state: paused;
}

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

/* Careers: hide default details marker */
details summary::-webkit-details-marker {
  display: none;
}

/* Key Contacts: swiper */
.key-contacts-swiper .swiper-wrapper { 
  align-items: stretch; 
}
.key-contacts-swiper .swiper-slide { 
  height: auto; 
  display: flex; 
  background-color: transparent; 
}
.key-contacts-swiper .swiper-slide > div { 
  flex: 1; 
  min-height: 0; 
}
.key-contacts-prev, .key-contacts-next { 
  top: 44% !important; 
}
@media (min-width: 1024px) {
    .key-contacts-prev { left: -3rem !important; }
    .key-contacts-next { right: -3rem !important; }
}

/* Related Products: make all cards equal height */
.related-products-swiper .swiper-wrapper {
  align-items: stretch;
}
.related-products-swiper .swiper-slide {
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  background-color: transparent;
}
.related-products-swiper .swiper-slide > a {
  flex: 1;
  min-height: 0;
}

/* Related Articles: make all cards equal height */
.related-articles-swiper .swiper-wrapper {
  align-items: stretch;
}
.related-articles-swiper .swiper-slide {
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  background-color: transparent;
}
.related-articles-swiper .swiper-slide > a {
  flex: 1;
  min-height: 0;
}

/* TSIC ellipse decoration: slow gentle drift (contact / shared) */
@keyframes tsic-ellipse-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, -12px);
  }
  50% {
    transform: translate(-6px, 8px);
  }
  75% {
    transform: translate(8px, 10px);
  }
}

.tsic-ellipse-drift {
  animation: tsic-ellipse-drift 26s ease-in-out infinite;
  animation-delay: var(--tsic-drift-delay, 0s);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .tsic-ellipse-drift {
    animation: none;
  }
}

/* Additional CSS for custom components (app.css) */
.test-app-css {
  background-color: red;
}