@import "tailwindcss";

@theme inline {
  --color-primary-50: #fef7ed;
  --color-primary-100: #fdebd4;
  --color-primary-200: #fbd4a8;
  --color-primary-300: #f8b871;
  --color-primary-400: #f5a038;
  --color-primary-500: #F39212;
  --color-primary-600: #da7c0a;
  --color-primary-700: #b5620b;
  --color-primary-800: #914d10;
  --color-primary-900: #764010;
  --color-primary-950: #402006;

  --color-secondary-50: #fef3ed;
  --color-secondary-100: #fde3d4;
  --color-secondary-200: #fac4a8;
  --color-secondary-300: #f69d71;
  --color-secondary-400: #f17838;
  --color-secondary-500: #EB5C23;
  --color-secondary-600: #d14416;
  --color-secondary-700: #ae3313;
  --color-secondary-800: #8b2a17;
  --color-secondary-900: #712616;
  --color-secondary-950: #3d100a;

  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  --color-accent: #F39212;
  --color-accent-dark: #da7c0a;

  --font-sans: var(--font-inter), system-ui, sans-serif;

  --text-hero: 3.5rem;
  --text-hero--line-height: 1.1;
  --text-hero--letter-spacing: -0.02em;

  --text-display: 2.5rem;
  --text-display--line-height: 1.15;
  --text-display--letter-spacing: -0.015em;

  --text-title: 1.75rem;
  --text-title--line-height: 1.25;

  --text-body-lg: 1.125rem;
  --text-body-lg--line-height: 1.7;

  --spacing-section: 5rem;
  --spacing-section-lg: 7rem;

  --radius-card: 0.75rem;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-white text-neutral-800 antialiased;
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  @apply font-semibold;
}

:focus-visible {
  @apply outline-2 outline-offset-2 outline-primary-500;
}
