@import "tailwindcss";

/* Inter variable font */
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter/InterVariable.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter/InterVariable-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-bg: #f7f6f4;
  --color-bg-alt: #ebe8e5;

  --color-surface: #1b1c1d;
  --color-surface-alt: #2b2c2e;

  --color-text: #222;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: #f9f9f8;

  --color-accent: #df6b19;
  --color-accent-hover: #e78625;
  --color-accent-muted: #f3be81;

  --color-success: #2bb55b;
  --color-warning: #e2a418;
  --color-danger: #e0473c;

  --breakpoint-nav: 920px;

  --custom-bg-size: 300% 300%;
  @keyframes anim-wave {
    0% {
      background-position: 0% 50%; /* Start top-left */
    }
    50% {
      background-position: 100% 50%; /* Shift to bottom-right */
    }
    100% {
      background-position: 0% 50%; /* Loop back */
    }
  }
}


/* ---- Global Defaults ---- */


@layer base {
  html, body {
    @apply m-0 p-0 bg-bg text-text font-sans leading-relaxed;
  }
  
  /* Links */
  a {
    @apply transition-colors duration-200 no-underline;
  }
  a:hover {
    @apply text-accent-hover;
  }
}

@layer components {
  /* Card container */
  .card {
    @apply bg-bg-alt rounded-2xl p-8 shadow-md transition-all duration-200 ease-linear hover:shadow-lg hover:-translate-y-0.5;
  }

  /* Card title */
  .card-title {
    @apply text-surface font-bold text-3xl text-center tracking-tight mb-7;
  }

  /* Input label */
  .input-label {
    @apply block text-sm font-medium text-text-muted mb-1;
  }

  /* Input field */
  .input-field {
    @apply w-full border border-surface-alt rounded-md bg-bg text-text px-3 py-2 text-[0.95rem]
           shadow-sm transition-colors duration-200;
  }

  .input-field:focus {
    @apply outline-none border-accent ring-2 ring-accent-muted;
  }

  /* Accent button */
  .btn-accent {
    @apply bg-accent text-text-inverse font-semibold px-4 py-2 rounded-md
           transition-colors shadow-sm
           hover:bg-accent-hover hover:shadow-md
           focus:outline-none focus:ring-2 focus:ring-accent-muted;
  }

  /* Generic button wrapper */
  .btn {
    @apply inline-block w-full font-semibold text-center px-4 py-2 rounded-md transition-colors;
  }


  /* Reusable button-like link */
  .nav-link {
    @apply px-3 py-1 rounded-lg font-semibold transition-all duration-200 transform;
  }

  .nav-link-primary {
    @apply text-[var(--accent)] hover:text-[var(--accent-light)] 
           hover:bg-[var(--accent-muted)] hover:shadow-md hover:scale-105;
  }

  .nav-link-secondary {
    @apply text-[var(--text-primary)] hover:text-[var(--accent)] 
           hover:bg-[var(--accent-muted)] hover:shadow-md hover:scale-105;
  }

  /* Muted separator */
  .nav-separator {
    @apply text-[var(--text-muted)] select-none;
  }
}