@layer reset, occ.tokens, occ.base, occ.theme, occ.components, occ.utilities;

@layer occ.base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html { background: var(--occ-bg); }

  body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--occ-fg);
    background: var(--occ-bg);
    font-family: var(--occ-font-sans);
  }

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

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

  button, a { -webkit-tap-highlight-color: transparent; }

  a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }

  :focus-visible {
    outline: 2px solid var(--occ-focus-color);
    outline-offset: var(--occ-focus-offset);
  }
}