@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
@import "tw-animate-css";

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  ::selection {
    background-color: #3fbfb8;
    color: white;
  }
}

/* Ensure legacy dark-mode text utilities remain visible in light theme */
.text-white { color: #0f172a !important; } /* text-gray-900 */
.text-white\/60 { color: rgba(15,23,42,0.6) !important; } /* text-gray-600 */
.text-white\/80 { color: rgba(15,23,42,0.8) !important; } /* text-gray-700 */
.text-white\/40 { color: rgba(15,23,42,0.4) !important; } /* text-gray-500 */
.bg-white\/5 { background-color: #f8fafc !important; } /* light subtle panel */
.border-white\/10 { border-color: rgba(15,23,42,0.06) !important; }
.dark\:bg-white\/5 { background-color: #f8fafc !important; }
.dark\:text-white { color: #0f172a !important; }


:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --max-width: 1200px;
  --radius-md: 12px;
}

/* Modern base typography and spacing */
@layer base {
  html, body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
  }

  h1, h2, h3, h4 {
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: var(--space-4);
  }

  p { margin-bottom: var(--space-4); color: rgba(15,23,42,0.85); }

  /* Container for consistent horizontal spacing */
  .container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Section helper to space vertical rhythm */
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }

  /* Modern button reset */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .btn-primary { background: linear-gradient(90deg,#0ea5a4,#3fbfb8); color: white; }
  .btn-ghost { background: transparent; border: 1px solid rgba(15,23,42,0.06); color: #0f172a; }
}