/* IslandOrder Stage 1 / shared foundation (2026-11-01)
   Design tokens + accessibility only. Existing category-specific layouts remain unchanged.
   New components should use these values rather than adding one-off colors/shadows.
*/
:root {
  --io-ui-forest: #123b26;
  --io-ui-action: #176534;
  --io-ui-action-hover: #11542c;
  --io-ui-accent-soft: #eaf7ee;
  --io-ui-surface: #ffffff;
  --io-ui-page: #f6f9f6;
  --io-ui-text: #162d20;
  --io-ui-muted: #637368;
  --io-ui-border: #dce8df;
  --io-ui-radius-sm: 10px;
  --io-ui-radius-md: 16px;
  --io-ui-radius-lg: 22px;
  --io-ui-shadow-card: 0 12px 34px rgba(18,59,38,.075);
  --io-ui-focus: #197d46;
  --io-ui-space-1: 4px;
  --io-ui-space-2: 8px;
  --io-ui-space-3: 12px;
  --io-ui-space-4: 16px;
  --io-ui-space-6: 24px;
  --io-ui-space-8: 32px;
}
/* Focus only when keyboard navigation requests it. Do not replace existing hover styles. */
:where(a,button,input,select,textarea,summary,[role="button"]):focus-visible {
  outline: 3px solid var(--io-ui-focus);
  outline-offset: 3px;
}
/* Prevent transformed UI elements from animating for customers who request less motion. */
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto !important; }
  :where(.btn, .store-card, .product-card, .market-category, .category-link) {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/* Reusable primitives for future upgrades; intentionally don't restyle existing cards. */
.io-ui-panel {
  background: var(--io-ui-surface);
  color: var(--io-ui-text);
  border: 1px solid var(--io-ui-border);
  border-radius: var(--io-ui-radius-lg);
  box-shadow: var(--io-ui-shadow-card);
}
.io-ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}