/*
 Theme Name: The Hope of Salvation Custom Theme
 Theme URI: https://thehopeofsalvation.com
 Author: Bnzxs
 Description: Tailwind-based theme for "The Hope of Salvation" store.
 Version: 1.0
 Text Domain:
*/

:root {
  /* Deep navy/slate base */
  --background: 222 47% 8%;
  --foreground: 45 30% 90%;

  /* Cards */
  --card: 222 40% 12%;
  --card-foreground: 45 30% 90%;

  /* Popover */
  --popover: 222 40% 12%;
  --popover-foreground: 45 30% 90%;

  /* Primary – golden accent */
  --primary: 43 80% 55%;
  --primary-foreground: 222 47% 8%;

  /* Secondary */
  --secondary: 220 20% 18%;
  --secondary-foreground: 45 20% 85%;

  /* Muted */
  --muted: 220 25% 15%;
  --muted-foreground: 220 15% 55%;

  /* Accent */
  --accent: 38 70% 45%;
  --accent-foreground: 45 30% 95%;

  /* Borders, inputs, rings */
  --border: 220 20% 22%;
  --input: 220 20% 22%;
  --ring: 43 80% 55%;

  /* Radius */
  --radius: 0.75rem;

  /* Special colors */
  --gold: 43 80% 55%;
  --gold-light: 45 85% 70%;
  --gold-dark: 38 75% 40%;
  --navy-deep: 222 47% 6%;
  --navy: 222 47% 8%;
  --navy-light: 222 40% 15%;
  --cream: 45 30% 90%;
  --cream-muted: 45 15% 70%;
  --stone: 35 15% 35%;

  /* Shadows */
  --shadow-gold: 0 0 60px hsl(43 80% 55% / 0.15);
  --shadow-card: 0 4px 24px hsl(222 47% 4% / 0.5);
}

/* Basic body styling (no Tailwind @apply here, just pure CSS) */
html, body {
  width: 100%;
  max-width: 100%;
}
body {
  margin: 0;
  padding: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

html {
  scroll-behavior: smooth;
}

.font-heading {
  font-family: Playfair Display,Georgia,serif !important;
}

.qoute-font {
  font-family: Playfair Display,Georgia,serif !important;
}

/* Utility-ish helpers that mirror your design a bit */
.text-gradient-gold {
  background-image: linear-gradient(
    135deg,
    hsl(43 80% 65%),
    hsl(38 70% 50%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-hero {
  background-image: linear-gradient(
    135deg,
    hsl(222 47% 6%) 0%,
    hsl(222 40% 12%) 50%,
    hsl(38 30% 15%) 100%
  );
}

/* Simple fade animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.7s ease-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.7s ease-out both;
}