@import "tailwindcss";

@theme {
  --color-deep-blue: #030312;
  --color-action-red: #D01B05;
  --color-support-orange: #CD632E;
  --color-off-white: #F4F4F4;
  --color-neutral-grey: #BBB8B8;
  
  --font-family-sans: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  
  --font-size-h1: 40px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-body: 16px;
  --font-size-caption: 12px;
  
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.3;
  --line-height-body: 1.6;
  --line-height-caption: 1.4;
  
  --spacing-section: 80px;
  --spacing-section-lg: 100px;
  
  --radius-btn: 4px;
  
  --tracking-headline: -0.02em;
  
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
  background: var(--color-off-white);
  color: #4b5563;
  font-family: var(--font-family-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}