/* Base — the minimum global reset the design system owns.
   Everything else is component-scoped inline style or a token reference. */

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

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

body {
  margin: 0;
  background: var(--background-canvas);
  color: var(--foreground-primary);
  font-family: var(--font-family-base);
  font-size: var(--type-body1-size);
  line-height: var(--type-body1-line);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--foreground-link);
  text-decoration: none;
}

a:hover {
  color: var(--foreground-link-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--foreground-link-visited);
}

:focus-visible {
  outline: var(--stroke-width-thick) solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--radius-medium);
}

/* Fluent's two-tone focus ring: white halo outside a dark stroke, for use on
   controls that sit directly on a coloured or dense surface. */
.dlp-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--border-focus-outer), 0 0 0 3px var(--border-focus);
}

::selection {
  background: var(--color-navy-150);
}