/* base.css — global reset and foundational styles
   Only rules that cannot be expressed as Tailwind utility classes. */

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margin / padding reset */
* {
  margin: 0;
  padding: 0;
}

/* Body font — Manrope is a custom font loaded via Google Fonts;
   Tailwind's font-sans does not map to it without a config extension,
   but the actual font-family declaration must live here so it applies
   before Tailwind's config script is evaluated. */
/* Material Symbols Outlined — icon rendering tuning.
   font-variation-settings is not expressible as a Tailwind utility. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Selection colour — emerald tint.
   No Tailwind utility exists for ::selection pseudo-element. */
::selection {
  background: rgba(0, 168, 107, 0.2);
  color: inherit;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar — emerald accent */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f8f9fa;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 109, 67, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 109, 67, 0.5);
}

/* Improved focus ring — accessible, on-brand */
:focus-visible {
  outline: 2px solid rgba(0, 109, 67, 0.6);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Page entry — prevent flash of unstyled content */
body {
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}

/* Prevent layout shift on icon load */
.material-symbols-outlined {
  display: inline-block;
}