/* ==========================================================================
   KORLOA Design System — 1:1 port from the original React/Tailwind project
   (src/index.css). Keep this in sync with the original tokens/utilities.
   Tailwind utility classes are provided at runtime via the Play CDN in
   header.php; this file supplies the CSS variables, base element styles,
   and the custom component/utility classes that the original defines.
   ========================================================================== */

:root {
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-label: "Inter", sans-serif;

  /* Primary - Dark Blue */
  --primary-50: 0.97 0.01 260;
  --primary-100: 0.94 0.02 260;
  --primary-200: 0.88 0.04 260;
  --primary-300: 0.78 0.07 260;
  --primary-400: 0.60 0.10 260;
  --primary-500: 0.35 0.13 260;
  --primary-600: 0.28 0.12 260;
  --primary-700: 0.22 0.11 260;
  --primary-800: 0.18 0.10 260;
  --primary-900: 0.15 0.09 260;
  --primary-950: 0.12 0.08 260;

  /* Secondary - Medium Blue */
  --secondary-50: 0.97 0.01 255;
  --secondary-100: 0.93 0.03 255;
  --secondary-200: 0.86 0.05 255;
  --secondary-300: 0.76 0.08 255;
  --secondary-400: 0.62 0.11 255;
  --secondary-500: 0.45 0.14 255;
  --secondary-600: 0.38 0.13 255;
  --secondary-700: 0.32 0.12 255;
  --secondary-800: 0.26 0.11 255;
  --secondary-900: 0.20 0.10 255;
  --secondary-950: 0.16 0.09 255;

  /* Accent - Green */
  --accent-50: 0.97 0.02 145;
  --accent-100: 0.94 0.04 145;
  --accent-200: 0.88 0.08 145;
  --accent-300: 0.78 0.14 145;
  --accent-400: 0.68 0.18 145;
  --accent-500: 0.60 0.20 145;
  --accent-600: 0.52 0.19 145;
  --accent-700: 0.44 0.18 145;
  --accent-800: 0.36 0.17 145;
  --accent-900: 0.28 0.16 145;
  --accent-950: 0.22 0.15 145;

  /* Background - Light Gray */
  --background-50: 0.98 0.01 255;
  --background-100: 0.96 0.01 255;
  --background-200: 0.93 0.01 255;
  --background-300: 0.88 0.02 255;
  --background-400: 0.80 0.02 255;
  --background-500: 0.72 0.03 255;
  --background-600: 0.60 0.03 255;
  --background-700: 0.50 0.04 255;
  --background-800: 0.40 0.04 255;
  --background-900: 0.30 0.05 255;
  --background-950: 0.20 0.05 255;

  /* Foreground - Dark Slate */
  --foreground-50: 0.97 0.01 255;
  --foreground-100: 0.93 0.02 255;
  --foreground-200: 0.85 0.03 255;
  --foreground-300: 0.75 0.04 255;
  --foreground-400: 0.65 0.05 255;
  --foreground-500: 0.55 0.06 255;
  --foreground-600: 0.45 0.06 255;
  --foreground-700: 0.38 0.05 255;
  --foreground-800: 0.32 0.05 255;
  --foreground-900: 0.28 0.05 255;
  --foreground-950: 0.25 0.04 255;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: oklch(var(--foreground-950));
  background-color: oklch(var(--background-50));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* ---- Original custom component utilities (from src/index.css) ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-overlay {
  background: linear-gradient(135deg, oklch(var(--primary-950) / 0.95) 0%, oklch(var(--primary-900) / 0.85) 50%, oklch(var(--primary-800) / 0.75) 100%);
}

.section-padding { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px)  { .section-padding { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-padding { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1280px) { .section-padding { padding-left: 3rem;   padding-right: 3rem; } }
@media (min-width: 1536px) { .section-padding { padding-left: 4rem;   padding-right: 4rem; } }

.container-custom {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px)  { .container-custom { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-custom { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1280px) { .container-custom { padding-left: 3rem;   padding-right: 3rem; } }
@media (min-width: 1536px) { .container-custom { padding-left: 4rem;   padding-right: 4rem; } }

.text-gradient {
  background: linear-gradient(135deg, oklch(var(--primary-500)) 0%, oklch(var(--secondary-500)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px -12px oklch(var(--primary-950) / 0.15);
}

.image-zoom { overflow: hidden; }
.image-zoom img { transition: transform 0.6s ease; }
.image-zoom:hover img { transform: scale(1.08); }

.animate-float { animation: float 4s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}