@import 'tailwindcss';

@theme {
  --color-primary: #5BA4D9;
  --color-primary-dark: #006494;
  --color-primary-light: #8EC5E8;
  --color-navy: #1C2B3A;
  --color-teal: #2EC4A0;
  --color-surface: #f8f9fa;
  --color-surface-low: #f3f4f5;
  --color-surface-high: #ffffff;
  --color-on-surface: #191c1d;
  --color-outline: #72787e;
  --color-outline-variant: #c2c7ce;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --shadow-subtle: 0 20px 40px rgba(25, 28, 29, 0.06);
  --shadow-card: 0 4px 16px rgba(25, 28, 29, 0.04);
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-on-surface);
    background-color: var(--color-surface);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    letter-spacing: -0.02em;
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .label-md {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
}