@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 40 25% 97%;
    --foreground: 165 25% 12%;
    --card: 0 0% 100%;
    --card-foreground: 165 25% 12%;
    --primary: 160 84% 26%;
    --primary-foreground: 0 0% 100%;
    --secondary: 158 22% 94%;
    --secondary-foreground: 162 35% 20%;
    --muted: 150 14% 94%;
    --muted-foreground: 160 10% 42%;
    --accent: 158 30% 91%;
    --accent-foreground: 162 40% 18%;
    --destructive: 0 72% 46%;
    --destructive-foreground: 0 0% 100%;
    --border: 158 14% 88%;
    --input: 158 14% 84%;
    --ring: 160 84% 30%;
    --sidebar: 165 42% 11%;
    --sidebar-foreground: 150 20% 92%;
    --sidebar-muted: 158 12% 62%;
    --sidebar-accent: 162 36% 17%;
    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    background-image: radial-gradient(
      55% 45% at 100% 0%,
      hsl(var(--primary) / 0.07),
      transparent 70%
    );
    background-attachment: fixed;
    font-family:
      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }

  ::selection {
    background-color: hsl(var(--primary) / 0.22);
    color: hsl(var(--foreground));
  }
}

@layer components {
  .prose-desa p {
    @apply mb-4 leading-relaxed text-slate-700;
  }
  .prose-desa h2 {
    @apply mb-3 mt-6 text-xl font-bold text-slate-900;
  }
  .prose-desa h3 {
    @apply mb-2 mt-4 text-lg font-semibold text-slate-900;
  }
  .prose-desa ul {
    @apply mb-4 list-disc space-y-1 pl-6 text-slate-700;
  }
  .prose-desa ol {
    @apply mb-4 list-decimal space-y-1 pl-6 text-slate-700;
  }
  .prose-desa a {
    @apply text-primary underline;
  }

  .hero-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
  }

  .text-balance {
    text-wrap: balance;
  }
}

@layer utilities {
  .shadow-soft {
    box-shadow:
      0 1px 2px rgba(15, 62, 48, 0.04),
      0 10px 30px -12px rgba(15, 62, 48, 0.18);
  }

  .bg-brand-gradient {
    background-image: var(--brand-gradient);
  }

  .bg-brand-soft {
    background-image: var(--brand-soft);
  }

  .bg-brand-deep {
    background-image: var(--brand-deep);
  }

  .text-brand-accent {
    color: hsl(var(--brand-accent));
  }

  .text-brand-gradient {
    background-image: var(--brand-gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .orb-brand {
    background-color: hsl(var(--brand-accent) / 0.18);
  }

  .article-glow {
    background-image:
      radial-gradient(circle at 20% 20%, hsl(var(--brand-accent) / 0.32) 0, transparent 45%),
      radial-gradient(circle at 80% 80%, hsl(var(--primary) / 0.42) 0, transparent 45%);
  }

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

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.surat-sheet {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  @page {
    size: A4;
    margin: 18mm 20mm;
  }

  body {
    background: #fff !important;
  }

  .no-print {
    display: none !important;
  }
}