/* =========================================================================
   Tealorca OKR — global styles
   Tailwind handles utilities; this file holds typography refinements,
   focus management, and WCAG AA helpers.
   ========================================================================= */

html {
  /* Outfit has good defaults; these settings refine numerals & general rendering */
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Outfit's metrics: slight optical adjustment for headings */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.011em;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Hide native number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* --------------------------------------------------------------------
   Focus rings (WCAG 2.4.7)
   Use :focus-visible so mouse clicks don't get rings, but keyboard users do.
   -------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #2563EB;          /* primary */
  outline-offset: 2px;
  border-radius: 6px;
}
/* Don't double up rings on elements that already have explicit ring utilities */
.focus\:ring-2:focus-visible,
[class*="focus:ring-"]:focus-visible {
  outline: none;
}

/* Skip-to-content link — visible only when focused (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  top: -100%;
  left: 0.5rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  background: #FFFFFF;
  color: #111827;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.16), 0 4px 8px -2px rgb(0 0 0 / 0.04);
  font-size: 0.875rem;
  font-weight: 500;
  transition: top 150ms ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.5rem;
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 0.10);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(0 0 0 / 0.20);
  background-clip: padding-box;
}

/* Sidebar scrollbar — translucent white on the dark slate sidebar */
aside.bg-slate-700 ::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.18); background-clip: padding-box; }
aside.bg-slate-700 ::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.30); background-clip: padding-box; }

/* Selection */
::selection {
  background: rgb(37 99 235 / 0.20);
  color: inherit;
}

/* Suppress Chrome autofill yellow */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* --------------------------------------------------------------------
   Reduced motion (WCAG 2.3.3 prefers-reduced-motion)
   -------------------------------------------------------------------- */
@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;
  }
}