@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Background colors */
    --background: #f5f4ef;
    --card: #dad6cd;
    --foreground: #2a2928;
    --primary-cta: #2a2928;
    --secondary-cta: #ecebea;
    --accent: #ffffff;
    --background-accent: #ffffff;

    /* Content width */
    --content-width-px: 1152px;
    --content-width-45-px: 518px;
    --content-width-55-px: 634px;
    --content-width-75-px: 864px;
    
    /* Border radius mappings */
    --rounded-theme: theme('borderRadius.xl');
    --rounded-theme-capped: theme('borderRadius.2xl');

    /* Font variables for the typeface */
    --font-primary: var(--font-cormorant-garamond);
    --font-secondary: var(--font-inter);
  }

  .dark {
    /* Dark theme variables could go here */
  }
  
  html {
    font-family: var(--font-inter), system-ui, sans-serif;
    color: hsl(var(--foreground));
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-inter), system-ui, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-cormorant-garamond), serif;
  }
}
