/*
Theme Name: Mind Body Dynamics
Theme URI: https://example.com/
Author: Lumos / Converted from React
Author URI: https://example.com/
Description: Custom theme for Mind Body Dynamics, converted from a React/Tailwind/shadcn site.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mind-body-dynamics
*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Design tokens (from original index.css) */
:root {
  --background: 40 33% 97%;
  --foreground: 30 10% 15%;

  --card: 40 30% 95%;
  --card-foreground: 30 10% 15%;

  --popover: 40 33% 97%;
  --popover-foreground: 30 10% 15%;

  --primary: 152 25% 36%;
  --primary-foreground: 40 33% 97%;

  --secondary: 30 30% 90%;
  --secondary-foreground: 30 10% 22%;

  --muted: 35 20% 92%;
  --muted-foreground: 30 8% 46%;

  --accent: 24 60% 65%;
  --accent-foreground: 30 10% 12%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 35 20% 87%;
  --input: 35 20% 87%;
  --ring: 152 25% 36%;

  --radius: 0.75rem;

  --sidebar-background: 40 30% 95%;
  --sidebar-foreground: 30 10% 15%;
  --sidebar-primary: 152 25% 36%;
  --sidebar-primary-foreground: 40 33% 97%;
  --sidebar-accent: 35 20% 92%;
  --sidebar-accent-foreground: 30 10% 15%;
  --sidebar-border: 35 20% 87%;
  --sidebar-ring: 152 25% 36%;

  /* Custom tokens */
  --warm: 30 35% 92%;
  --sage: 152 25% 36%;
  --sage-light: 152 18% 80%;
  --sand: 35 30% 85%;
  --terracotta: 24 60% 65%;
  --cream: 40 33% 97%;
}

.dark {
  --background: 30 10% 10%;
  --foreground: 40 20% 92%;
  --card: 30 10% 14%;
  --card-foreground: 40 20% 92%;
  --popover: 30 10% 10%;
  --popover-foreground: 40 20% 92%;
  --primary: 152 25% 50%;
  --primary-foreground: 30 10% 10%;
  --secondary: 30 10% 18%;
  --secondary-foreground: 40 20% 92%;
  --muted: 30 10% 18%;
  --muted-foreground: 35 10% 55%;
  --accent: 24 50% 55%;
  --accent-foreground: 40 20% 92%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 30 10% 20%;
  --input: 30 10% 20%;
  --ring: 152 25% 50%;
  --sidebar-background: 30 10% 10%;
  --sidebar-foreground: 40 20% 92%;
  --sidebar-primary: 152 25% 50%;
  --sidebar-primary-foreground: 30 10% 10%;
  --sidebar-accent: 30 10% 18%;
  --sidebar-accent-foreground: 40 20% 92%;
  --sidebar-border: 30 10% 20%;
  --sidebar-ring: 152 25% 50%;
}

/* Base typography */
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Utility classes to match Tailwind tokens used in the React app */
.font-sans {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.font-serif {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

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

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary-foreground {
  background-color: hsl(var(--primary-foreground));
}

.bg-primary-foreground\/10 {
  background-color: hsla(var(--primary-foreground), 0.1);
}

.bg-primary\/10 {
  background-color: hsla(var(--primary), 0.1);
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-cream {
  color: hsl(var(--cream));
}

.text-cream\/70 {
  color: hsla(var(--cream), 0.7);
}

.text-cream\/80 {
  color: hsla(var(--cream), 0.8);
}

.text-sage-light {
  color: hsl(var(--sage-light));
}

.border-border {
  border-color: hsl(var(--border));
}

.bg-card {
  background-color: hsl(var(--card));
}

.text-balance {
  text-wrap: balance;
}

/* Simple fade-in animation used in Hero */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.9s ease forwards;
}