/* ============================================================
   ATOMS — base reset, page theming, and the icon primitive.
   The rest of the "atoms" (index label, icon-circle button,
   chip, dot, bar, hairline) are element-scoped and travel with
   the molecule/organism they belong to. Tokens live in
   junu-tokens.css (@layer tokens).
   ============================================================ */
@layer atoms {
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  img { display: block; }

  /* icon primitive */
  .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal; font-style: normal;
    font-size: 1em; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
    vertical-align: middle; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  /* visible keyboard focus — mouse clicks stay ring-free via :focus-visible */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid currentColor; outline-offset: 2px;
  }
}