/*
 * Global site styling
 * Visual refresh with stronger hierarchy and softer surfaces.
 */

:root {
  --brand-orange: #fb8201;
  --brand-orange-dark: #de6f00;
  --brand-green: #0d7a43;
  --brand-ink: #16221a;
  --brand-muted: #5e6c63;
  --brand-cream: #fff8ef;
  --brand-surface: rgba(255, 255, 255, 0.88);
  --brand-border: rgba(22, 34, 26, 0.08);
  --brand-shadow: 0 18px 50px rgba(22, 34, 26, 0.08);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--brand-ink);
  background:
    radial-gradient(circle at top left, rgba(13, 122, 67, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(251, 130, 1, 0.16), transparent 22%),
    linear-gradient(180deg, #fffdf9 0%, #f4f7f1 100%);
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 70%);
  opacity: 0.25;
}

.site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(22, 34, 26, 0.05);
}

.site-footer {
  background:
    radial-gradient(circle at top right, rgba(251, 130, 1, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 246, 0.98));
  border-top: 1px solid var(--brand-border);
  backdrop-filter: blur(12px);
}

.glass-card,
.bg-white.rounded-2xl,
.bg-white.rounded-xl,
.bg-white.rounded-lg,
.bg-white.p-8,
.bg-white.p-6 {
  background: var(--brand-surface);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--brand-shadow);
}

.text-dark-text {
  color: var(--brand-ink) !important;
}

.text-primary-orange {
  color: var(--brand-orange) !important;
}

.bg-primary-orange {
  background-color: var(--brand-orange) !important;
}

.bg-primary-orange:hover,
.hover\:bg-orange-600:hover {
  background-color: var(--brand-orange-dark) !important;
}

.focus\:ring-primary-orange:focus,
.focus\:border-primary-orange:focus {
  --tw-ring-color: rgba(251, 130, 1, 0.24) !important;
  border-color: rgba(251, 130, 1, 0.65) !important;
}

input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(251, 130, 1, 0.12);
}

button,
a {
  transition: all 0.25s ease;
}

main .shadow-lg,
main .shadow-md {
  box-shadow: var(--brand-shadow) !important;
}

.prose a {
  color: var(--brand-green);
}

.prose a:hover {
  color: var(--brand-orange);
}

.fab-btn {
  box-shadow: 0 16px 35px rgba(13, 122, 67, 0.18);
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(circle at top right, rgba(251, 130, 1, 0.14), transparent 24%),
      linear-gradient(180deg, #fffdf9 0%, #f4f7f1 100%);
  }
}