/* Global styles for Poshs Cinoti */

:root {
  --radius: 0.5rem;

  --background: oklch(0.99 0.005 240);
  --foreground: oklch(0.18 0.04 250);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.04 250);

  --primary: oklch(0.45 0.18 252);
  --primary-foreground: oklch(0.99 0.005 240);

  --secondary: oklch(0.96 0.015 240);
  --secondary-foreground: oklch(0.22 0.05 252);

  --muted: oklch(0.96 0.012 240);
  --muted-foreground: oklch(0.5 0.03 250);

  --accent: oklch(0.65 0.2 250);
  --accent-foreground: oklch(0.99 0.005 240);

  --destructive: oklch(0.6 0.22 27);
  --destructive-foreground: oklch(0.99 0.005 240);

  --border: oklch(0.92 0.015 240);
  --input: oklch(0.92 0.015 240);
  --ring: oklch(0.55 0.18 252);

  --ink: oklch(0.16 0.05 252);
  --electric: oklch(0.62 0.22 250);
  --deep: oklch(0.28 0.12 255);
  --mist: oklch(0.97 0.015 240);

  --gradient-hero: linear-gradient(135deg, oklch(0.22 0.08 255) 0%, oklch(0.4 0.18 252) 55%, oklch(0.6 0.2 245) 100%);
  --gradient-blue: linear-gradient(135deg, oklch(0.55 0.2 250), oklch(0.7 0.18 230));
  --gradient-mesh: radial-gradient(circle at 20% 20%, oklch(0.65 0.22 250 / 0.35), transparent 50%),
                   radial-gradient(circle at 80% 30%, oklch(0.55 0.2 230 / 0.3), transparent 55%),
                   radial-gradient(circle at 50% 100%, oklch(0.45 0.18 255 / 0.4), transparent 60%);

  --shadow-glow: 0 20px 60px -20px oklch(0.55 0.2 250 / 0.45);
  --shadow-card: 0 10px 40px -15px oklch(0.3 0.1 252 / 0.18);
  --shadow-soft: 0 4px 20px -8px oklch(0.3 0.1 252 / 0.12);

  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Enforced line-height rules to match React build exactly */
p, span, div, li, a {
  line-height: inherit;
}

p {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625 !important;
}

.leading-snug {
  line-height: 1.375 !important;
}

.leading-tight {
  line-height: 1.25 !important;
}

.leading-none {
  line-height: 1 !important;
}

.leading-\[0\.95\] {
  line-height: 0.95 !important;
}

.leading-\[1\.05\] {
  line-height: 1.05 !important;
}

/* Custom Utilities matching React build */
.bg-hero-gradient {
  background-image: var(--gradient-hero) !important;
}

.bg-blue-gradient {
  background-image: var(--gradient-blue) !important;
}

.bg-mesh {
  background-image: var(--gradient-mesh) !important;
}

.shadow-glow {
  box-shadow: var(--shadow-glow) !important;
}

.shadow-card {
  box-shadow: var(--shadow-card) !important;
}

.shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

.transition-smooth {
  transition: var(--transition-smooth) !important;
}

.text-gradient {
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grid-bg {
  background-image:
    linear-gradient(oklch(0.55 0.18 252 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.55 0.18 252 / 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

.glass {
  background: oklch(1 0 0 / 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid oklch(1 0 0 / 0.4);
}

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

@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shine {
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.4), transparent);
  background-size: 200% 100%;
  animation: shine 3s linear infinite;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}