@import "tailwindcss";

@theme {
  --color-primary: #264987;
  --color-primary-dark: #04326f;
  --color-secondary: #C9980A;
  
  --color-surface: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f5f8;
  --color-surface-container: #eeedf3;
  --color-surface-container-high: #e8e7ed;
  --color-surface-container-highest: #e3e2e8;
  --color-surface-variant: #e3e2e8;
  
  --color-on-surface: #1a1b20;
  --color-on-surface-variant: #434750;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  
  --color-secondary-container: #fec742;
  --color-on-secondary-container: #705300;
  
  --color-outline: #747781;
  --color-outline-variant: #c4c6d2;

  --font-headline: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-label: "Inter", sans-serif;

  --radius-xl: 3rem;
  --radius-lg: 2rem;
  --radius-md: 1.5rem;
}

@layer utilities {
  .bg-gradient-primary {
    background-image: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  }
}