@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-manrope);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* Espandiar brand palette */
  --color-ink: #10201d;
  --color-emerald: #0d5d50;
  --color-emerald-deep: #093c37;
  --color-emerald-night: #0b3b34;
  --color-teal-soft: #6f9f91;
  --color-pearl: #f5f6f1;
  --color-silver: #dce2dd;
  --color-graphite: #101715;
  --color-sage: #8fb9ad;
}

:root {
  --radius: 0.625rem;
  /* Espandiar light theme */
  --background: #f5f6f1;
  --foreground: #10201d;
  --card: #ffffff;
  --card-foreground: #10201d;
  --popover: #ffffff;
  --popover-foreground: #10201d;
  --primary: #0d5d50;
  --primary-foreground: #f5f6f1;
  --secondary: #e7eeea;
  --secondary-foreground: #10201d;
  --muted: #eef1ec;
  --muted-foreground: #5e6d68;
  --accent: #dce8e2;
  --accent-foreground: #10201d;
  --destructive: oklch(0.577 0.245 27.325);
  --border: #dce2dd;
  --input: #dce2dd;
  --ring: #0d5d50;
  --chart-1: #0d5d50;
  --chart-2: #6f9f91;
  --chart-3: #557d91;
  --chart-4: #b7d0c9;
  --chart-5: #dce8e2;
  --sidebar: #ffffff;
  --sidebar-foreground: #10201d;
  --sidebar-primary: #0d5d50;
  --sidebar-primary-foreground: #f5f6f1;
  --sidebar-accent: #e7eeea;
  --sidebar-accent-foreground: #10201d;
  --sidebar-border: #dce2dd;
  --sidebar-ring: #0d5d50;
}

.dark {
  --background: #0c1311;
  --foreground: #eef3ef;
  --card: #17231f;
  --card-foreground: #eef3ef;
  --popover: #17231f;
  --popover-foreground: #eef3ef;
  --primary: #8fb9ad;
  --primary-foreground: #0c1311;
  --secondary: #1c2926;
  --secondary-foreground: #eef3ef;
  --muted: #1c2926;
  --muted-foreground: #a5b3ae;
  --accent: #1c2926;
  --accent-foreground: #eef3ef;
  --destructive: oklch(0.704 0.191 22.216);
  --border: #253630;
  --input: #253630;
  --ring: #8fb9ad;
  --chart-1: #8fb9ad;
  --chart-2: #6f9f91;
  --chart-3: #557d91;
  --chart-4: #0d5d50;
  --chart-5: #093c37;
  --sidebar: #17231f;
  --sidebar-foreground: #eef3ef;
  --sidebar-primary: #8fb9ad;
  --sidebar-primary-foreground: #0c1311;
  --sidebar-accent: #1c2926;
  --sidebar-accent-foreground: #eef3ef;
  --sidebar-border: #253630;
  --sidebar-ring: #8fb9ad;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--extralight.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-wght--extrabold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Manrope', system-ui, sans-serif;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  ::selection {
    background-color: rgba(13, 93, 80, 0.18);
    color: #10201d;
  }
  p, .text-justify-content {
    text-align: justify;
    hyphens: auto;
  }
}

/* ===== Espandiar design utilities ===== */
@layer utilities {
  .font-display {
    font-family: 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.045em;
  }

  .glass {
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .dark .glass {
    background: rgba(23, 35, 31, 0.72);
  }

  .glass-dark {
    background: rgba(12, 19, 17, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .nav-glass {
    background: rgba(245, 246, 241, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .dark .nav-glass {
    background: rgba(12, 19, 17, 0.9);
  }

  .mesh {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
  }
  .mesh-dark {
    background-image:
      linear-gradient(rgba(16, 32, 29, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(16, 32, 29, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
  }

  .soft-shadow {
    box-shadow: 0 24px 80px rgba(18, 43, 38, 0.1);
  }
  .dark .soft-shadow {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  }

  .card-hover {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.45s ease,
                border-color 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 70px rgba(17, 60, 52, 0.12);
    border-color: rgba(13, 93, 80, 0.25);
  }
  .dark .card-hover:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    border-color: rgba(143, 185, 173, 0.35);
  }

  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }

  .hero-gradient {
    background: linear-gradient(90deg,
      rgba(7, 24, 21, 0.92) 0%,
      rgba(7, 24, 21, 0.68) 39%,
      rgba(7, 24, 21, 0.22) 68%,
      rgba(7, 24, 21, 0.08) 100%);
  }

  .emerald-glow {
    box-shadow: 0 0 80px rgba(13, 93, 80, 0.35);
  }

  .gradient-text {
    background: linear-gradient(135deg, #0d5d50 0%, #6f9f91 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  33% { transform: translateY(-18px) translateX(8px); }
  66% { transform: translateY(8px) translateX(-6px); }
}
.animate-float-slow {
  animation: float-slow 14s ease-in-out infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(97, 158, 139, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(97, 158, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(97, 158, 139, 0); }
}
.pulse-dot {
  animation: pulse-dot 2.4s infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 26s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 30s linear infinite;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 60px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-radius, 60px)) rotate(-360deg); }
}
.animate-orbit {
  animation: orbit var(--orbit-duration, 18s) linear infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(20px, -20px) scale(1.05); opacity: 0.8; }
}
.animate-drift {
  animation: drift 12s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-slow,
  .pulse-dot,
  .animate-marquee,
  .animate-spin-slow,
  .animate-orbit,
  .animate-drift {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(13, 93, 80, 0.25);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 93, 80, 0.45);
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(143, 185, 173, 0.25);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 185, 173, 0.45);
}