/* stylelint-disable property-no-unknown */
/* stylelint-disable at-rule-no-deprecated */
/* stylelint-disable at-rule-no-unknown */
/* stylelint-disable import-notation */
@import "tailwindcss";

@theme {
  --font-title: 'Sora', sans-serif;
  --font-text: 'Sora', sans-serif;
  --font-symbols: 'Material Symbols Rounded', sans-serif;
  --color-detail-50: #fff6ed;
  --color-detail-100: #ffead4;
  --color-detail-200: #ffd1a8;
  --color-detail-300: #ffb071;
  --color-detail-400: #ff914d;
  --color-detail-500: #fe6211;
  --color-detail-600: #ef4707;
  --color-detail-700: #c63208;
  --color-detail-800: #9d290f;
  --color-detail-900: #7e2410;
  --color-detail-950: #440f06;
  --color-background: #F9F5F3
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  scroll-behavior: smooth;
}

@layer base {
  * {
    @apply font-text
  }

  h1,h2,h3,h4,h5,h6 {
    @apply font-title text-detail-950
  }
}

@layer utilities {
  .filled {
    font-variation-settings: "FILL" 1;
  }
}