@import "./styles.css";

/* Natural Unicorn Theme (non-cartoony)
   This file overrides styles.css so you can compare both themes. */

:root{
  --bg: #eef7ff;
  --text: #3e4a5c;
  --muted: #5f6f84;
  --muted2: #74869d;
  --brand: #be2edd;
  --brand2: #56a8ff;
  --ring: rgba(86, 168, 255, 0.28);
  --shadow: 0 12px 28px rgba(62, 103, 148, 0.15);
  --heading: "Open Sans", "Segoe UI", Arial, sans-serif;
}

html{
  background:
    linear-gradient(
      180deg,
      rgba(173, 216, 255, 0.52) 0%,
      rgba(214, 237, 255, 0.45) 38%,
      rgba(249, 253, 255, 0.92) 100%
    ) fixed !important;
}

body{
  background: transparent !important;
  color: var(--text);
}

/* Subtle cloud layers */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(220px 80px at 12% 12%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(260px 95px at 36% 18%, rgba(255,255,255,0.48), transparent 70%),
    radial-gradient(240px 90px at 68% 13%, rgba(255,255,255,0.5), transparent 72%),
    radial-gradient(210px 80px at 88% 20%, rgba(255,255,255,0.44), transparent 72%);
  filter: blur(2px);
}

/* Soft grass tint near the fold/bottom */
body::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40vh;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(184, 223, 170, 0) 0%,
      rgba(184, 223, 170, 0.14) 58%,
      rgba(176, 214, 161, 0.2) 100%
    );
}

.site-header{
  background: rgba(255, 255, 255, 0.76) !important;
  border-bottom: 1px solid rgba(149, 184, 212, 0.4) !important;
  box-shadow: 0 8px 20px rgba(111, 146, 184, 0.11) !important;
}

.brand__mark{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(161, 192, 219, 0.6) !important;
  box-shadow: 0 8px 18px rgba(105, 143, 183, 0.14) !important;
}

.section--alt{
  background: rgba(255,255,255,0.24) !important;
  border-top: 1px solid rgba(159, 194, 223, 0.26) !important;
  border-bottom: 1px solid rgba(159, 194, 223, 0.22) !important;
}

.card,
.hero__card,
.step,
.details,
.gallery__item,
.form,
.note{
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(158, 193, 222, 0.34) !important;
  box-shadow: var(--shadow) !important;
}

.placeholder{
  background: rgba(255, 255, 255, 0.65) !important;
}

input,
select,
textarea{
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(149, 185, 214, 0.45) !important;
}

.btn,
.btn--ghost{
  background: #be2edd !important;
  color: #ffffff !important;
  border-color: #be2edd !important;
  box-shadow: 0 10px 20px rgba(124, 35, 150, 0.2) !important;
}

.btn:hover,
.btn--ghost:hover{
  filter: brightness(1.05);
}

h1, h2, h3{
  color: #be2edd;
}

.site-footer{
  background: rgba(255,255,255,0.34) !important;
  border-top: 1px solid rgba(159, 194, 223, 0.28) !important;
}