/* =====================================================================
   WorkBeat design tokens. Shared by the public site, account pages and
   the super-admin console. Load BEFORE the page stylesheet.
   Palette: navy ink + WorkBeat green (the brand mark and landing page).
   ===================================================================== */

@font-face {
  font-family: Inter;
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tf-navy: #14213d;
  --tf-green: #3d8361;
  --tf-green-dark: #286347;
  --tf-mint: #e8f2eb;

  --tf-ink: #1b2430;
  --tf-ink-2: #435066;
  --tf-muted: #5a6578;      /* 6.0:1 on white, AA for body text */
  --tf-line: #dce4df;
  --tf-paper: #ffffff;
  --tf-canvas: #f7f9f7;

  /* Focus must be 3:1 against adjacent colours (WCAG 1.4.11). The old #81b89b was about 2:1 on white. */
  --tf-focus: #2f6f50;
  --tf-focus-width: 3px;

  --tf-radius-sm: 8px;
  --tf-radius: 12px;
  --tf-shadow: 0 16px 48px rgba(20, 33, 61, .08);

  --tf-duration: 160ms;
  --tf-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Visible keyboard focus everywhere the browser gives focus. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tf-focus-width) solid var(--tf-focus);
  outline-offset: 2px;
}

/* Skip link: hidden until focused, first Tab stop on every public page. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--tf-radius-sm);
  background: var(--tf-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: #fff;
}

/* Respect reduced-motion: no animation, no smooth scrolling, no hover movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}