/* =========================
   FONTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* =========================
   ROOT VARIABLES
========================= */

:root {
  --background: 40 30% 97%;
  --foreground: 30 10% 12%;

  --card: 40 25% 96%;
  --card-foreground: 30 10% 12%;

  --popover: 40 25% 98%;
  --popover-foreground: 30 10% 12%;

  --primary: 30 10% 15%;
  --primary-foreground: 40 30% 98%;

  --secondary: 40 20% 92%;
  --secondary-foreground: 30 10% 15%;

  --muted: 40 15% 90%;
  --muted-foreground: 30 10% 40%;

  --accent: 120 30% 40%;
  --accent-foreground: 40 30% 98%;

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

  --border: 40 20% 88%;
  --input: 40 20% 90%;
  --ring: 120 30% 35%;

  --radius-lg: 1.75rem;
  --radius-md: calc(1.75rem - 2px);
  --radius-sm: calc(1.75rem - 4px);

  --glass-bg: 40 30% 98%;
  --glass-border: 40 30% 100%;

  --shadow-light: 255, 255, 255;
  --shadow-dark: 180, 170, 155;
  --shadow-accent: 120, 100, 80;
}

/* =========================
   DARK MODE
========================= */
.dark {
  --background: 30 10% 6%;
  --foreground: 40 30% 95%;

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

  --popover: 30 10% 8%;
  --popover-foreground: 40 30% 95%;

  --primary: 40 30% 95%;
  --primary-foreground: 30 10% 10%;

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

  --muted: 30 10% 15%;
  --muted-foreground: 40 20% 60%;

  --accent: 120 30% 35%;
  --accent-foreground: 40 30% 95%;

  --border: 30 10% 20%;
  --input: 30 10% 20%;
  --ring: 120 30% 40%;

  --glass-bg: 30 10% 10%;
  --glass-border: 30 10% 15%;

  --shadow-light: 50, 45, 40;
  --shadow-dark: 0, 0, 0;
  --shadow-accent: 80, 60, 40;
}

/* =========================
   BASE STYLES
========================= */
* {
  border-color: hsl(var(--border));
}

body {
  font-family: 'Inter', sans-serif;
  color: hsl(var(--foreground));
  background: linear-gradient(
    135deg,
    hsl(40 30% 97%) 0%,
    hsl(40 25% 95%) 50%,
    hsl(40 30% 97%) 100%
  );
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* =========================
   ASTRA OVERRIDE (CRITICAL)
========================= */
body,
#page,
.site-content {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}

/* =========================
   GLASS COMPONENTS
========================= */
.glass-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    hsla(var(--glass-bg) / 0.85),
    hsla(var(--glass-bg) / 0.65)
  );
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid hsla(var(--glass-border) / 0.8);
  box-shadow:
    0 8px 32px rgba(var(--shadow-dark), 0.12),
    0 2px 8px rgba(var(--shadow-dark), 0.08),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(var(--shadow-dark),.05);
}

.glass-card-inset {
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, hsl(40 25% 93%), hsl(40 30% 96%));
  box-shadow:
    inset 0 4px 12px rgba(var(--shadow-dark),.15),
    inset 0 1px 4px rgba(var(--shadow-dark),.1),
    0 1px 0 rgba(255,255,255,.8);
}

.glass-card-subtle {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    hsla(var(--glass-bg) / 0.7),
    hsla(var(--glass-bg) / 0.5)
  );
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid hsla(var(--glass-border) / 0.6);
  box-shadow:
    0 4px 16px rgba(var(--shadow-dark),.1),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.glass-card-float {
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    hsla(var(--glass-bg) / 0.9),
    hsla(var(--glass-bg) / 0.75)
  );
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid hsla(var(--glass-border) / 0.85);
  box-shadow:
    0 35px 60px -15px rgba(var(--shadow-dark),.25),
    0 15px 30px -10px rgba(var(--shadow-dark),.15),
    0 5px 10px rgba(var(--shadow-dark),.1);
}

/* =========================
   ANIMATIONS & UTILITIES
========================= */
@keyframes marquee {
  to { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 50s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes float-leaf {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-15px) rotate(5deg); }
  50% { transform: translateY(-5px) rotate(-3deg); }
  75% { transform: translateY(-20px) rotate(8deg); }
}

.animate-float-leaf {
  animation: float-leaf 8s ease-in-out infinite;
}

.scrollbar-hide {
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.tea-underline {
  position: relative;
}
.tea-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    hsla(120,40%,35%,0),
    hsla(120,40%,35%,.6),
    hsla(120,40%,35%,0)
  );
}

::selection {
  background: hsla(120,40%,45%,.25);
  color: hsl(30 10% 12%);
}
/* =========================
   COLOR HELPERS (CONSUMERS)
========================= */

/* Backgrounds */
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-secondary { background-color: hsl(var(--secondary)); }

/* Text */
.text-foreground { color: hsl(var(--foreground)); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-primary { color: hsl(var(--primary)); }

/* Borders */
.border-default { border-color: hsl(var(--border)); }
.border-accent { border-color: hsl(var(--accent)); }

/* =========================
   LAYOUT HELPERS
========================= */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

@media (max-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}