@import "tailwindcss";

:root {
  --background: #F5F5F0; /* Changed to steam color */
  --foreground: #4A5568; /* Changed to stone color */
} 

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  
  /* Fonts */
  --font-sans: var(--font-inter);
  --font-serif: var(--font-playfair);
  --font-inter: var(--font-inter);
  --font-playfair: var(--font-playfair);
  
  /* Sauna Color Palette */
  --color-cedar-light: #E8D4B8;
  --color-cedar: #D4A574;
  --color-cedar-dark: #B8884E;
  --color-wood: #8B4513;
  --color-steam: #F5F5F0;
  --color-heat: #E67E22;
  --color-stone: #4A5568;
  --color-mist: #E8EAE6;
  --surface: '#FDFCFA';
  --surface-input: '#FDFAF6';
  --surface-warm: '#FAF7F2';
  --brand-bg: '#F2EFE9';
  --brand-border: '#DDD0BB';
  --brand-borderL: '#EAE0CF';
  --brand-hover: '#F0E4D0';
  --brand-active: '#EAD5B4';
  --brand-text: '#2C1A0E';
  --brand-textSec: '#5C3D22';
  --brand-textMut: '#8A6545';
  --brand-textFnt: '#B89470';
  
  /* Keep your existing colors if needed */
  --color-darkblue: #073f6f;
  --color-lightblue: #429ad2;
  
  @keyframes scrollX {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
  }

  --animate-scrollX: scrollX 30s linear infinite;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}