/* ============================================================
   AFRISOVERA PUBLIC SITE — PREMIUM POLISH LAYER
   public-premium.css · loaded after style.css (+ page CSS)
   Display-only: tokens, focus rings, inputs, scrollbar, motion.
   Scoped to the public site (body) — NOT .admin-master.
   Mirrors assets/css/admin-premium.css for visual parity.
   ============================================================ */

:root {
  /* ---- Premium token system (shared with admin-premium.css) ---- */
  --gold: #c8a24a;
  --gold-soft: #e3c87f;
  --gold-deep: #9c7c2f;
  --ink: #1a1c20;
  --ink-soft: #2a2d33;
  --paper: #ffffff;
  --paper-tint: #faf8f3;
  --shadow-1: 0 1px 3px rgba(26,28,32,.08), 0 1px 2px rgba(26,28,32,.04);
  --shadow-2: 0 4px 16px rgba(26,28,32,.10), 0 2px 6px rgba(26,28,32,.06);
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
}

/* ---- Skip-to-content link (WCAG 2.4.1) — hidden until keyboard focus, then a gold brand pill top-left ---- */
.skip-to-content {
  position: absolute;
  left: 12px;
  top: -64px;                 /* off-screen until focused */
  z-index: 100000;            /* above sticky header + dialogs */
  background: var(--gold);
  color: #0A1628;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .3px;
  padding: 10px 20px;
  border-radius: 999px;       /* pill */
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  transition: top .2s var(--ease);
}
.skip-to-content:focus {
  top: 12px;                  /* slide into view on focus */
  outline: 2px solid #0A1628;
  outline-offset: 2px;
}
#main:focus { outline: none; }  /* the jump target is programmatically focused; no stray ring on the whole region */

/* ---- Focus rings: gold, accessible ---- */
body *:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Inputs / textareas / selects: refined polish ---- */
body input:not([type=checkbox]):not([type=radio]):not([type=range]),
body textarea,
body select {
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
body input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
body textarea:focus,
body select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,162,74,.15);
  /* outline intentionally removed here — global body *:focus-visible rule supplies
     the 2px gold ring for keyboard users without suppressing mouse-focus styling */
}

/* ---- Custom scrollbar (gold) ---- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
body ::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body ::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  background: transparent;
}
body ::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-deep), var(--gold));
  border-radius: 6px;
  border: 2px solid var(--paper);
}
body ::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ---- Text selection: gold tint ---- */
body ::selection {
  background: rgba(200,162,74,.25);
  color: var(--ink);
}

/* ---- Buttons: subtle tactile lift ---- */
body button, body .btn, body [role=button] {
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
body button:active, body .btn:active, body [role=button]:active {
  transform: translateY(1px);
}

/* ---- Cards / panels: depth on hover ---- */
body .card, body .panel, body .tile {
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
body .card:hover, body .panel:hover, body .tile:hover {
  box-shadow: var(--shadow-2);
}

/* ---- Reduced motion guard ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}