@import "tailwindcss";

:root {
  --off-white: #FFFCEC;
  --teal: #004f4f;
  --teal-light: #006666;
  --teal-dark: #003333;
  --background: #FFFCEC;
  --foreground: #000000;
  --card-bg: #ffffff;
  --border: #e5e5e5;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--off-white);
  color: var(--foreground);
  font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.text-brand {
  color: var(--teal);
}

.bg-brand {
  background-color: var(--teal);
}

.btn-primary {
  background-color: var(--teal);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--teal-light);
  transform: translateY(-1px);
}
