/* ============================================================
 * USE Theme Claude — base.css
 * Reset + a11y helpers + container. No colors, no typography.
 * Colors and typography come from theme.json + DesignTokensModule.
 * ============================================================ */

@layer reset, tokens, base, layout, components, utilities, motion, overrides;

@layer reset {
  *,*::before,*::after { box-sizing: border-box; }
  body { margin: 0; }
  picture, img, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
}

@layer base {
  :root { color-scheme: light dark; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Skip link */
  .use-skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }
  .use-skip-link:focus {
    position: fixed; left: 1rem; top: 1rem;
    width: auto; height: auto; padding: .5rem 1rem;
    background: var(--use-color-text, #111); color: #fff;
    border-radius: var(--use-radius-md, .5rem);
    z-index: 999;
  }

  /* Focus ring */
  :focus-visible {
    outline: 2px solid var(--use-color-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Default touch target on links */
  a { color: inherit; }
}

@layer layout {
  .use-container {
    width: 100%;
    max-width: var(--use-container-max, 1280px);
    margin-inline: auto;
    padding-inline: var(--use-container-px, 1rem);
  }

  /* Full-bleed mode (Elementor canvas / header_footer) */
  body.use-fullbleed { padding: 0; }
  body.use-fullbleed .use-container { max-width: none; padding-inline: 0; }
}