/* Dreams R Real - Smart Choices | custom styles layered on top of Tailwind */

:root {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --ink-900: #1c1917;
  --ink-700: #44403c;
  --ink-500: #78716c;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  background-color: #fffdf9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Hand-drawn underline accent under emphasized words */
.underline-accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underline-accent::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -8px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q 50 0 100 6 T 198 4' stroke='%23f97316' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Soft warm radial blobs for decorative section backgrounds */
.bg-warm-glow {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(254, 215, 170, 0.55) 0%, transparent 60%),
    radial-gradient(50% 50% at 90% 20%, rgba(254, 205, 211, 0.5) 0%, transparent 60%),
    radial-gradient(55% 60% at 50% 100%, rgba(253, 230, 138, 0.45) 0%, transparent 60%),
    #fffdf9;
}

.bg-cream { background-color: #fffaf3; }

/* Card hover lift */
.card-lift {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(234, 88, 12, 0.25);
}

/* Subtle dotted divider */
.dotted-divider {
  background-image: radial-gradient(circle, #d6d3d1 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}

/* Sticky nav border on scroll */
.nav-shadow { box-shadow: 0 6px 24px -18px rgba(28, 25, 23, 0.25); }

/* Mobile menu transitions */
#mobile-menu { transition: max-height 250ms ease, opacity 200ms ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 480px; opacity: 1; }

/* Focus rings — accessible and warm */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-lift { transition: none; }
}