/* style.css — base styles and design tokens.
   Most visual styling on this site comes from Tailwind's utility classes
   directly in the HTML (loaded via CDN in <head>). This file holds only
   what Tailwind's utilities don't cover: custom scrollbars, brand gradients,
   and the color palette documented as CSS variables for reference. */

:root {
  /* NAMTES design tokens (redesign, Oct 2026) */
  --metsa-green-950: #04281F;
  --metsa-green-900: #063B2F;   /* deep emerald */
  --metsa-green-800: #0D5140;   /* forest */
  --metsa-green-700: #0F6B52;
  --metsa-green-500: #2E8B6A;
  --metsa-gold-600: #D9A60C;
  --metsa-gold-500: #F2BE18;    /* gold */
  --metsa-gold-400: #F7CF4A;
  --metsa-ivory: #F5F7F3;       /* page background */
  --metsa-surface: #FFFFFF;
  --metsa-ink: #10231C;         /* headings and body text */
  --metsa-muted: #75847D;       /* secondary text */
  --metsa-line: #E3E8E2;        /* card borders */
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--metsa-ivory); }
::-webkit-scrollbar-thumb { background: var(--metsa-green-700); border-radius: 4px; }

.gold-gradient {
  background: linear-gradient(135deg, var(--metsa-gold-600) 0%, var(--metsa-gold-500) 50%, var(--metsa-gold-400) 100%);
}
.green-gradient {
  background: linear-gradient(135deg, var(--metsa-green-800) 0%, var(--metsa-green-700) 50%, var(--metsa-green-500) 100%);
}

/* Visible keyboard focus everywhere (mouse clicks don't show it). */
:focus-visible { outline: 2px solid var(--metsa-gold-500); outline-offset: 2px; border-radius: 6px; }
html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}