/* Purpose: Font faces, reset and element defaults. Everything here is unscoped —
   component and screen styles live in their own files. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic.woff2') format('woff2-variations');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

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

* { margin: 0; padding: 0; }

/* The UA rule for [hidden] is display:none at the weakest possible specificity, so any
   component that sets its own display silently outranks it and the element stays on
   screen while the JS believes it is gone. !important is the only way to hold a rule
   that every later `display` must lose to. */
[hidden] { display: none !important; }

html,
body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg { display: block; max-width: 100%; }

table { border-collapse: collapse; }

/* Focus is always visible — the desk is used entirely by keyboard by some of the team. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip link — first focusable element on every screen. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }


.u-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Quiet scrollbars — the desk has several scroll areas and the default chrome is loud. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #D4D5DC;
  border: 3px solid var(--color-bg);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}