/* Light theme — brand gold, action green, warm neutral surfaces. */
:root {
  color-scheme: light;
  --color-slate-950: #101a14;
  --color-slate-900: #18271d;
  --color-slate-800: #26382c;
  --color-slate-700: #34483a;
  --color-slate-600: #526458;
  --color-slate-500: #66796c;
  --color-slate-400: #8ca095;
  --color-slate-300: #bdccbf;
  --color-slate-200: #d9e4db;
  --color-slate-100: #edf3ee;
  --color-slate-50: #f7faf7;
  --color-emerald-950: #e4f5ea;
  --color-sky-950: #e6f4fb;
  --color-violet-950: #f0ebfa;
}

html,
body {
  background: #f5f8f5;
  color: #18271d;
}

.text-yellow-500,
.text-yellow-400,
.text-yellow-300,
.text-yellow-200 { color: #8a5a00; }

.hover\:text-yellow-400:hover,
.hover\:text-yellow-300:hover,
.hover\:text-yellow-200:hover { color: #684300; }

.text-emerald-500,
.text-emerald-400,
.text-emerald-300,
.text-emerald-200 { color: #087443; }

.hover\:text-emerald-400:hover,
.hover\:text-emerald-300:hover,
.hover\:text-emerald-200:hover { color: #055d35; }

.text-sky-400,
.text-sky-300,
.text-sky-200,
.text-cyan-300 { color: #075985; }

.text-violet-300,
.text-violet-200,
.text-purple-300,
.text-pink-300 { color: #6d3fa0; }

.text-orange-300,
.text-amber-500,
.text-amber-400 { color: #8a4b08; }

.border-slate-800,
.border-slate-800\/80,
.border-slate-800\/60 { border-color: #26382c; }

.border-slate-700,
.border-slate-700\/80 { border-color: #34483a; }

.flat-card {
  background-color: #ffffff;
  border-color: #d5e0d7;
  box-shadow: 0 10px 30px rgb(35 67 45 / 7%);
}

.flat-subcard {
  background-color: #f5f8f5;
  border-color: #d5e0d7;
}

.page-title,
.section-title,
.card-title { color: #142219; }

.lead-text { color: #34483a; }
.body-text { color: #43564a; }

.icon-box-yellow,
.icon-box-emerald,
.icon-box-amber {
  background-color: #f5f8f5;
  border-color: #d5e0d7;
}

.btn-action {
  color: #ffffff;
  background-color: #047857;
}

.btn-action:hover { background-color: #065f46; }

.btn-secondary {
  color: #26382c;
  background-color: #ffffff;
  border-color: #b5c6b9;
}

.btn-secondary:hover { background-color: #edf3ee; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #9a6700;
  outline-offset: 3px;
  border-radius: .5rem;
}

.article-body { color: #34483a; }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body strong { color: #142219; }

.article-body h2,
.article-body hr { border-color: #d5e0d7; }

.article-body a { color: #7a5000; }
.article-body a:hover { color: #5d3d00; }

.article-body ul,
.article-body ol { color: #34483a; }

.article-body li::marker { color: #087443; }

.article-body blockquote,
.article-body code,
.article-body pre {
  background-color: #f5f8f5;
  border-color: #d5e0d7;
}

.article-body blockquote { color: #26382c; }
.article-body code { color: #7a5000; }
.article-body pre code { color: #34483a; }

::-webkit-scrollbar-track { background: #eef3ef; }
::-webkit-scrollbar-thumb { background: #b5c6b9; }
::-webkit-scrollbar-thumb:hover { background: #8fa496; }

/* Utilities introduced by the light templates. The production CSS is static,
   so these live here instead of relying on the runtime Tailwind CDN. */
.bg-white { background-color: #ffffff; }
.bg-white\/70 { background-color: rgb(255 255 255 / 70%); }
.bg-white\/90 { background-color: rgb(255 255 255 / 90%); }
.bg-white\/95 { background-color: rgb(255 255 255 / 95%); }
.bg-slate-50 { background-color: #f7faf7; }
.bg-slate-50\/60 { background-color: rgb(247 250 247 / 60%); }
.bg-slate-50\/80 { background-color: rgb(247 250 247 / 80%); }
.bg-slate-100 { background-color: #edf3ee; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-700 { background-color: #047857; }
.bg-emerald-800 { background-color: #065f46; }
.bg-emerald-800\/20 { background-color: rgb(6 95 70 / 20%); }

.text-slate-950 { color: #101a14; }
.text-slate-900 { color: #18271d; }
.text-slate-700 { color: #34483a; }
.text-slate-600 { color: #526458; }
.text-slate-500 { color: #66796c; }
.text-slate-400 { color: #76887d; }
.text-amber-600 { color: #a35408; }
.text-amber-700 { color: #85430a; }
.text-amber-800 { color: #71370b; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-sky-700,
.text-cyan-700 { color: #03658c; }
.text-sky-800 { color: #075275; }
.text-violet-700 { color: #6d36ad; }
.text-violet-800 { color: #5b2d91; }

.border-slate-200 { border-color: #d9e4db; }
.border-slate-200\/80 { border-color: rgb(217 228 219 / 80%); }
.border-slate-300 { border-color: #bdccbf; }
.border-slate-300\/80 { border-color: rgb(189 204 191 / 80%); }
.border-slate-400 { border-color: #8ca095; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }
.border-emerald-200 { border-color: #a7f3d0; }

.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-slate-100:hover { background-color: #edf3ee; }
.hover\:bg-emerald-800:hover { background-color: #065f46; }
.hover\:bg-emerald-800\/20:hover { background-color: rgb(6 95 70 / 20%); }
.hover\:border-slate-300:hover { border-color: #bdccbf; }
.hover\:border-slate-400:hover { border-color: #8ca095; }
.hover\:border-amber-400:hover { border-color: #fbbf24; }
.hover\:text-slate-950:hover { color: #101a14; }
.hover\:text-amber-700:hover,
.group:hover .group-hover\:text-amber-700 { color: #85430a; }
.hover\:text-amber-800:hover { color: #71370b; }
.hover\:text-emerald-700:hover { color: #047857; }
.hover\:text-emerald-800:hover { color: #065f46; }
.hover\:text-sky-800:hover { color: #075275; }
.hover\:text-violet-800:hover { color: #5b2d91; }

.from-white {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0%) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-50 {
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 253 245 / 0%) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-50 {
  --tw-gradient-from: #f0f9ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 249 255 / 0%) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0%) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-slate-50 { --tw-gradient-to: #f7faf7 var(--tw-gradient-to-position); }
.to-slate-100 { --tw-gradient-to: #edf3ee var(--tw-gradient-to-position); }
.to-emerald-50 { --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position); }
.to-sky-50 { --tw-gradient-to: #f0f9ff var(--tw-gradient-to-position); }
.to-violet-50 { --tw-gradient-to: #f5f3ff var(--tw-gradient-to-position); }

/* Layering and depth for the light composition. */
main > section:first-child {
  background:
    radial-gradient(circle at 12% 10%, rgb(250 204 21 / 13%), transparent 30rem),
    radial-gradient(circle at 88% 5%, rgb(16 185 129 / 12%), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
}

:where(main > section:nth-of-type(even)) {
  background-color: #eef5ef;
}

article.bg-white,
a.group.bg-white,
.bg-white.border {
  box-shadow: 0 10px 30px rgb(35 67 45 / 7%);
}

a.group.bg-white {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

a.group.bg-white:hover {
  box-shadow: 0 16px 36px rgb(35 67 45 / 12%);
  transform: translateY(-2px);
}

.shadow-slate-300\/30 { --tw-shadow-color: rgb(189 204 191 / 30%); }
.shadow-slate-300\/40 { --tw-shadow-color: rgb(189 204 191 / 40%); }
.transition-shadow { transition-property: box-shadow; transition-duration: .2s; }
.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgb(35 67 45 / 12%), 0 8px 10px -6px rgb(35 67 45 / 8%);
}
.hover\:shadow-2xl:hover {
  box-shadow: 0 25px 50px -12px rgb(35 67 45 / 20%);
}

@media (width >= 64rem) {
  .lg\:gap-14 { gap: 3.5rem; }
  .lg\:text-left { text-align: left; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:mx-0 { margin-inline: 0; }
}