@import "tailwindcss";

@theme {
  --font-sans: "Doran", "Vazirmatn", "Noto Sans SC", "Noto Sans Devanagari", sans-serif;
  --font-display: "Doran", "Vazirmatn", "Noto Sans SC", "Noto Sans Devanagari", sans-serif;
  --color-forest: #183735;
  --color-forest-deep: #102422;
  --color-ivory: #f7f5ef;
  --color-paper: #efeae0;
  --color-gold: #c2a878;
  --color-gold-deep: #6e5a32;
  --color-charcoal: #202624;
  --color-sage: #dde5de;
  --color-muted: #3f4f4a;
  --color-line: #d9d3c5;
  --color-danger: #7a3030;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-soft: 0 18px 50px rgb(16 36 34 / 0.08);
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body {
    margin: 0;
    background: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    text-wrap: balance;
    font-weight: 500;
    line-height: 1.15;
  }
  p { text-wrap: pretty; }
  button:not(:disabled),
  [role="button"]:not(:disabled) { cursor: pointer; }
  :focus-visible {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 3px;
  }
  ::selection {
    background: var(--color-sage);
    color: var(--color-forest-deep);
  }
  body::before {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    opacity: 0.045;
    background-image: radial-gradient(rgb(32 38 36 / 0.45) 0.6px, transparent 0.6px);
    background-size: 3px 3px;
  }
}

@keyframes aurelia-ring {
  to { transform: rotate(360deg); }
}

.aurelia-ring {
  animation: aurelia-ring 18s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}