/* base.css - document foundation for the JobbyJob dashboard.
 *
 * Owns the reset, document typography, the focus contract and the handful of
 * utilities the shell depends on. Every value resolves through tokens.css, which
 * is generated from design/tokens.json by scripts/build_tokens.py.
 * Responsibility boundary: this file styles elements; components.css styles parts.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--type-size-body-sm);
  line-height: var(--type-leading-ui);
  font-weight: var(--type-weight-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-inline);
  font-weight: var(--type-weight-title);
  line-height: var(--type-leading-title);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--type-size-display); }
h2 { font-size: var(--type-size-title); }
h3 { font-size: var(--type-size-subtitle); }
h4 { font-size: var(--type-size-body); }

p { margin: 0 0 var(--space-block); max-width: var(--size-prose); }

small { font-size: var(--type-size-caption); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--type-size-label); }

hr {
  border: 0;
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  margin: var(--space-gutter) 0;
}

img, svg, video { max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus contract: one visible ring, drawn outside the control on an offset gap so
 * it reads against the page surface rather than against the control fill. */
:focus-visible {
  outline: var(--size-focus-ring) solid var(--border-focus);
  outline-offset: var(--size-focus-offset);
}

:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--surface-selected);
  color: var(--text-primary);
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-inline);
  left: var(--space-inline);
  z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-control-y) var(--space-control-x);
  border-radius: var(--radius-control);
  background: var(--action-default);
  color: var(--action-label);
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-strong);
  text-decoration: none;
}

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

.muted { color: var(--text-secondary); }

/* Motion is a budget, not decoration. CSS is global per document, so this one block
 * neutralises every animation and transition - in this layer and in any page that links
 * it - and it zeroes durations rather than shortening them: a shorter animation is still
 * motion to someone who asked for none. */
@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;
  }
}