@import "tailwindcss";

@theme {
  --color-primary: #fed400;
  --color-primary-hover: #e5c000;
  --color-secondary: #000000;
  --color-accent: #e8e8e8;
  --color-text: #0f0f0f;
  
  --font-sans: 'Noto Sans Thai', system-ui, sans-serif;
  --font-display: 'Kanit', var(--font-sans);
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
  }
}

@layer utilities {
  .text-primary { color: var(--color-primary); }
  .bg-primary { background-color: var(--color-primary); }
  .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
}