@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@theme inline {
  --color-background: #f0efec;
  --color-foreground: #000000;

  --color-natural-black: #000000;
  --color-natural-white: #ffffff;

  --color-muted-foreground: #8b8b8b;

  --color-primary: #ffcc00;
  --color-secondary: #f7f7f7;
  --color-heading: #343434;
  --color-charcoal: #1e1d19;
  --color-offwhite: #f0efec;

  --color-dusty-red: #ff6464;
  --color-dusty-green: #447e68;

  --shadow-card-md: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
  --shadow-card-lg: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
  --shadow-card-xl: 0 8px 24px 0 rgba(0, 0, 0, 0.12);

  --tracking-xs: 1%;
  --tracking-sm: 2%;
  --tracking-lg: 3%;
  --tracking-xl: 4%;

  --spacing-container: 1440px;

  --text-page-header: 100px;
  --text-page-header--line-height: 8.75rem;
  --text-page-header-md: 200px;
  --text-page-header-md--line-height: 17.5rem;
  --text-page-header-lg: 280px;
  --text-page-header-lg--line-height: 17.5rem;

  --font-sans: var(--font-inter);
  --font-mono: var(--font-geist-mono);
  --font-dm-mono: var(--font-dm-mono);
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
}

html {
  scroll-behavior: smooth;
}