@import "tailwindcss";
@import "./fonts";

/* === THEME VARIABLES === */
@theme {
  /* ---- Colors ---- */
  --color-primary-blue: #105677;
  --color-soft-aqua: #D9E4EA;
  --color-olive-green: #B8D599;
  --color-warm-beige: #F6D89C;
  --color-muted-coral: #E9B19C;
  --color-followed-link-blue: #08374C;

  /* ---- Fonts ---- */
  --font-heading: "Blacker Display", serif;
  --font-body: "Whitney", sans-serif;
}

/* === BASE STYLES === */
@layer base {
  html {
    font-family: var(--font-body);
    color: #222;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-blue);
    font-weight: 900;
  }
}

.link-wave::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #B8D599 0%, transparent  100%);
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease-in-out;
  will-change: transform;
  pointer-events: none;
}

.link-wave:hover::before {
  transform: scaleX(1);
}