@import "tailwindcss";

@theme {
  --font-sans:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-lime: #c6e601;
  --color-lime-light: #d9ff02;
  --color-lime-dark: #b3d300;
  --color-cream: #f5f0e8;
  --color-cream-dark: #e8e0d0;
  --color-cream-darker: #d1c9b8;
  --color-midnight: #0a0f1c;
  --color-midnight-light: #141b2d;
  --color-charcoal: #1a1a1a;
}

@layer base {
  body {
    @apply bg-white text-charcoal antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "ss05";
    scroll-behavior: smooth;
  }

  ::selection {
    background-color: var(--color-lime);
    color: var(--color-charcoal);
  }
}

@layer components {
  .section-padding {
    @apply px-6 md:px-12 lg:px-20 border-b border-neutral-200;
  }

  .section-max {
    @apply max-w-[1400px] mx-auto;
  }

  /* Bordered container — vertical lines that connect across sections */
  .section-border {
    @apply max-w-[1400px] mx-auto border-y-transparent border-x border-neutral-200;
    /*border-x border-neutral-200*/
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-8 py-4 bg-lime text-zinc-500 font-semibold text-sm uppercase tracking-wider rounded-md transition-all duration-300;
  }
  .btn-primary:hover {
    @apply bg-lime-light shadow-lg shadow-lime/25 text-zinc-600;
  }

  .btn-outline {
    @apply inline-flex items-center gap-2 px-8 py-4 border-1 border-slate-200 text-zinc-400 font-semibold text-sm uppercase tracking-wider rounded-md transition-all duration-300;
  }
  .btn-outline:hover {
    @apply bg-slate-100 text-zinc-500;
  }

  .card-hover {
    @apply transition-all duration-500;
  }
  .card-hover:hover {
    @apply -translate-y-1 shadow-2xl;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
  .fade-in.visible {
    opacity: 1;
    transform: none;
  }

  .leader-line {
    position: relative;
    padding-left: 1.5rem;
  }
  .leader-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1rem;
    border-bottom: 1px dashed #999;
  }

  .project-card {
    @apply relative overflow-hidden rounded-md bg-neutral-100;
  }
  .project-card img {
    @apply w-full h-full object-cover transition-transform duration-700;
  }
  .project-card:hover img {
    @apply scale-105;
  }

  .stat-number {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter;
    line-height: 0.9;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
}