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

:root {
  --color-bg: #f9f9f5;
  --color-surface: #ffffff;
  --color-surface-2: #f3f3ef;
  --color-surface-3: #ebebe6;
  --color-border: #e2e2dc;
  --color-navy: #1a2344;
  --color-navy-dim: #121a33;
  --color-accent: #64a765;
  --color-accent-dim: #4d8a4e;
  --color-accent-light: #e8f3e8;
  --color-primary: #64a765;
  --color-primary-dim: #4d8a4e;
  --color-primary-light: #e8f3e8;
  --color-solar: #e37400;
  --color-wind: #3b6fd4;
  --color-hydro: #0097a7;
  --color-text: #1a2344;
  --color-muted: #6b7280;
  --color-map: #1a2344;
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    font-family: var(--font-inter), sans-serif;
  }

  html.home-snap {
    scroll-behavior: auto;
    overflow: hidden;
    height: 100%;
  }

  html.home-snap body {
    overflow: hidden;
    height: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    @apply bg-bg font-body text-text antialiased;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

@layer components {
  .section-container {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .snap-section {
    @apply h-screen min-h-screen snap-start snap-always flex flex-col;
  }

  .snap-intro {
    @apply h-screen min-h-screen snap-start snap-always flex flex-col overflow-hidden;
  }

  .snap-scroll-root {
    @apply h-screen overflow-y-auto snap-y snap-mandatory;
    scroll-behavior: auto;
  }

  .home-shell {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  .home-shell .snap-scroll-root {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
  }

  .home-shell .snap-intro,
  .home-shell .snap-section {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-stop: always;
  }

  @media (max-width: 767px) {
    .home-shell {
      height: auto;
      overflow: visible;
    }

    .home-shell .snap-scroll-root {
      flex: none;
      height: auto;
      overflow: visible;
    }

    .home-shell .snap-intro,
    .home-shell .snap-section {
      height: auto;
      min-height: 0;
      max-height: none;
      scroll-snap-stop: normal;
    }

    .snap-section,
    .snap-intro {
      @apply min-h-0 h-auto snap-none;
    }

    html.home-snap {
      overflow: auto;
      height: auto;
    }

    html.home-snap body {
      overflow: auto;
      height: auto;
    }
  }

  .dark-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  .nav-link-underline {
    position: relative;
  }

  .nav-link-underline::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
  }

  .nav-link-underline:hover::after,
  .nav-link-underline.active::after {
    width: 100%;
  }

  .label-uppercase {
    @apply font-display text-xs font-medium uppercase tracking-[0.14em] text-accent;
  }

  .eyebrow-label {
    @apply font-display text-xs font-semibold uppercase tracking-[0.16em] text-accent;
  }

  .labs-card {
    @apply rounded-lg bg-surface border border-border overflow-hidden transition-all duration-300;
    box-shadow: 0 1px 3px rgba(26, 35, 68, 0.04);
  }

  .labs-card:hover {
    box-shadow: 0 6px 20px rgba(26, 35, 68, 0.08);
    transform: translateY(-2px);
  }

  .filter-pill {
    @apply rounded-md border px-5 py-2 font-display text-sm font-medium transition-all duration-200 cursor-pointer;
  }

  .filter-pill-active {
    @apply bg-navy text-white border-navy;
  }

  .filter-pill-inactive {
    @apply bg-transparent text-muted border-border hover:border-navy hover:text-navy;
  }

  .btn-navy {
    @apply inline-flex items-center justify-center rounded-md bg-navy px-6 py-2.5 font-display text-sm font-medium text-white transition-colors hover:bg-navy-dim;
  }

  .btn-outline-navy {
    @apply inline-flex items-center justify-center rounded-md border border-navy bg-transparent px-6 py-2.5 font-display text-sm font-medium text-navy transition-colors hover:bg-navy/5;
  }

  .ref-card {
    @apply labs-card flex flex-col p-6;
  }

  .section-fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .section-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition:
      background-color 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }

  .site-header--pinned {
    position: relative;
    top: auto;
    flex-shrink: 0;
  }

  .site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(72%, 36rem);
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-accent) 50%,
      transparent 100%
    );
    opacity: 0;
    transform: translateX(-50%) scaleX(0.35);
    transition:
      opacity 0.4s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .site-header--compact {
    border-color: color-mix(in srgb, var(--color-border) 55%, transparent);
    background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
    box-shadow: 0 8px 28px -18px rgba(26, 35, 68, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .site-header--compact::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  .site-header__nav {
    height: 3.5rem;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (min-width: 640px) {
    .site-header__nav {
      height: 4rem;
    }
  }

  .site-header--compact .site-header__nav {
    height: 2.75rem;
  }

  @media (min-width: 640px) {
    .site-header--compact .site-header__nav {
      height: 3.25rem;
    }
  }

  .site-header__logo-image {
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header--compact .site-header__logo-image {
    transform: scale(0.86);
  }

  .site-header__link,
  .site-header__cta,
  .site-header__menu {
    transition:
      padding 0.35s ease,
      font-size 0.35s ease,
      transform 0.35s ease;
  }

  .site-header--compact .site-header__link {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.8125rem;
  }

  .site-header--compact .site-header__cta {
    padding: 0.375rem 0.875rem;
    font-size: 0.6875rem;
  }

  .site-header--compact .site-header__menu {
    transform: scale(0.92);
  }

  .services-page {
    --color-bg: #f7f7f2;
    --color-surface: #ffffff;
    --color-surface-2: #eaf0e7;
    --color-surface-3: #eaf0e7;
    --color-border: #d5dfd8;
    --color-navy: #1c2b36;
    --color-navy-dim: #151f28;
    --color-accent: #5b8a5e;
    --color-accent-dim: #4d7650;
    --color-accent-light: #eaf0e7;
    --color-text: #1c2b36;
    --color-muted: #5c6d78;
    --services-mint: #8fbf92;
  }

  .services-page .bg-services-mint {
    background-color: var(--services-mint);
  }

  .markets-page {
    --color-bg: #f8f9f8;
    --color-surface: #ffffff;
    --color-surface-2: #e9f0e8;
    --color-border: #dde5dc;
    --color-navy: #1b262c;
    --color-navy-dim: #141d22;
    --color-accent: #4a7751;
    --color-accent-dim: #3d6343;
    --color-accent-light: #e9f0e8;
    --color-text: #1b262c;
    --color-muted: #5c6d78;
    --markets-off-white: #f8f9f8;
    --markets-ink: #1b262c;
    --markets-mint: #e9f0e8;
    --markets-green: #4a7751;
    --markets-stat-bg: #edf2ee;
    --markets-stat-value: #5c7c5c;
    --markets-stat-label: #6c757d;
    --markets-stat-divider: #d1d8d2;
  }

  .markets-page .bg-markets-off-white {
    background-color: var(--markets-off-white);
  }

  .markets-page .bg-markets-surface {
    background-color: var(--color-surface);
  }

  .markets-page .bg-markets-mint {
    background-color: var(--markets-mint);
  }

  .markets-page .bg-markets-ink {
    background-color: var(--markets-ink);
  }

  .markets-page .text-markets-green {
    color: var(--markets-green);
  }

  .markets-page .border-markets-divider {
    border-color: color-mix(in srgb, var(--markets-green) 18%, transparent);
  }

  .markets-stat-card {
    border-radius: 16px;
    background-color: var(--markets-stat-bg);
    padding: 40px;
  }

  .markets-stat-value {
    font-family: var(--font-inter), sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--markets-stat-value);
  }

  .markets-stat-label {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--markets-stat-label);
  }

  .markets-stat-divider {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--markets-stat-divider);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header::after,
    .site-header__ticker,
    .site-header__nav,
    .site-header__logo-image,
    .site-header__link,
    .site-header__cta,
    .site-header__menu,
    .home-shell .snap-intro,
    .home-shell .snap-section {
      transition-duration: 0.01ms !important;
    }
  }
}