/* MyHub — base: reset, document defaults, type scale, focus, motion.
   Values come from tokens.css and the Foundations sheet (docs/design/Foundations.dc.html). */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--as-canvas);
    color: var(--as-ink);
    font-family: var(--as-font);
    font-size: var(--as-t-body);
    line-height: normal;            /* design leaves line-height at the browser default unless set */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }

  /* Focus ring: 2px gap + 2px Work blue (Component Sheet → Buttons). */
  :focus { outline: none; }
  :focus-visible { box-shadow: var(--as-focus); border-radius: var(--as-r-sm); }

  /* Type scale — rem-based so Dynamic Type / browser zoom scale it. */
  .t-display  { font-size: var(--as-t-display);  line-height: 1.19; font-weight: 700; letter-spacing: -.02em; }
  .t-title    { font-size: var(--as-t-title);    line-height: 1.27; font-weight: 700; letter-spacing: -.01em; }
  .t-headline { font-size: var(--as-t-headline); line-height: 1.29; font-weight: 600; }
  .t-body     { font-size: var(--as-t-body);     line-height: 1.47; font-weight: 400; }
  .t-callout  { font-size: var(--as-t-callout);  line-height: 1.43; font-weight: 500; }
  .t-footnote { font-size: var(--as-t-footnote); line-height: 1.38; font-weight: 400; color: var(--as-ink-2); }
  .t-caption  { font-size: var(--as-t-caption);  line-height: 1.33; font-weight: 600; color: var(--as-ink-3); }
  .t-mono     { font-family: var(--as-mono); }
  .t-eyebrow  { font-size: 12px; font-weight: 600; color: var(--as-ink-3); text-transform: uppercase; letter-spacing: .06em; }
  .t-section  { font-size: 11px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; text-transform: uppercase; }

  .ink   { color: var(--as-ink); }
  .ink-2 { color: var(--as-ink-2); }
  .ink-3 { color: var(--as-ink-3); }

  /* Wordmark: "my" 500 / ink-2, "hub" 700 / ink, tracking −3.5%, lowercase (MyHub Brand sheet). */
  .wordmark { letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
  .wordmark__my  { font-weight: 500; color: var(--as-ink-2); }
  .wordmark__hub { font-weight: 700; color: var(--as-ink); }

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

@layer base {
  .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; }
}