@import "tailwindcss";

@theme {
  --font-headline: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Inter", ui-sans-serif, system-ui, sans-serif;

  --color-surface: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-container: #eceef0;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-surface-container-lowest: #ffffff;
  
  --color-primary: #091426;
  --color-primary-container: #1e293b;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #8590a6;
  --color-primary-fixed-dim: #bcc7de;

  --color-tertiary: #00171c;
  --color-tertiary-container: #002d36;
  --color-on-tertiary-container: #009db7;
  --color-tertiary-fixed-dim: #4cd7f6;

  --color-on-surface: #191c1e;
  --color-on-surface-variant: #45474c;
  --color-outline: #75777d;
  --color-outline-variant: #c5c6cd;
}

@layer base {
  body {
    @apply bg-surface text-on-surface font-body antialiased;
  }
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cta-gradient {
  background: linear-gradient(135deg, #091426 0%, #1e293b 100%);
}

@layer utilities {
  [data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  [data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
  }
}