/*
 * @kungal/ui-tokens/base — opinionated base layer (OPTIONAL).
 *
 * Global resets + page background + scrollbar/font helpers that KunUI
 * apps generally want. Kept separate from tokens.css so a host app that
 * only wants the design tokens (colors/radius/z/animations) can import
 * `@kungal/ui-tokens/css` alone and NOT have its global element styles touched.
 *
 * Import after tokens.css if you want it:
 *   @import '@kungal/ui-tokens/css';
 *   @import '@kungal/ui-tokens/base.css';
 */

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    /* Global default border color = the canonical neutral border token, so a
     * bare `border` (no explicit color) matches `border-kun` everywhere. */
    border-color: var(--color-kun-border, var(--color-default-100, currentColor));
    color: var(--color-foreground);
  }

  span {
    color: inherit;
  }

  /* Keyboard focus draws a ring; a click does not. This rule used to be
   * `*:focus { outline: none }` with nothing drawn in its place, and tabbing
   * through the docs site in Chrome 153 showed no focus at all on 26 component
   * pages: the links in KunAvatar, KunUserChip, KunLink, KunBrand and KunCard,
   * and the buttons of KunTab, KunAccordion, KunReaction and KunCarousel,
   * among others. A component that draws its own ring sets `outline-none`,
   * which wins from the utilities layer. */
  :focus-visible {
    outline: 2px solid oklch(var(--primary-accent) / 0.5);
    outline-offset: 2px;
  }

  /* The same colour, width and offset before focus, so focusing flips only the
   * style. From the initial `currentColor`, `medium` and `0`, an element with a
   * `transition` class tweened into the ring from a 3px black outline: KunCard
   * and KunAvatar, for about 80ms. */
  :where(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]) {
    outline-color: oklch(var(--primary-accent) / 0.5);
    outline-width: 2px;
    outline-offset: 2px;
  }

  /* A text field matches :focus-visible on a click too. KunUI's fields ring
   * their wrapper instead, and an app's own fields keep the old reset. */
  :where(
      input:not(
          [type='checkbox'],
          [type='radio'],
          [type='range'],
          [type='button'],
          [type='submit'],
          [type='reset'],
          [type='file'],
          [type='color'],
          [type='image']
        ),
      textarea,
      [contenteditable]
    ):focus {
    outline: none;
  }

  /* Root container needs a SOLID background. Otherwise dark mode only
   * swaps the CSS variables and `bg-background` (hsla at
   * --kun-global-opacity = 0.7) composites over unpainted browser-default
   * white → muddy gray instead of black. Solid hsl() (not hsla) since
   * nothing sits behind the root. */
  html,
  body {
    background-color: oklch(var(--background));
    color: oklch(var(--foreground));
    min-height: 100vh;
  }

  /* Placeholder text — a muted neutral that flips with the theme (the browser
   * default is a fixed grey that doesn't follow light/dark). `opacity: 1` since
   * the colour already carries its own muting and UA sheets dim placeholders. */
  ::placeholder {
    color: oklch(var(--default-400));
    opacity: 1;
  }
}

@layer utilities {
  body {
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      Helvetica Neue,
      Helvetica,
      Arial,
      PingFang SC,
      Hiragino Sans GB,
      Microsoft YaHei,
      sans-serif !important;
    text-autospace: normal;
  }

  .scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-visible {
    scrollbar-width: thin;
    -ms-overflow-style: thin;
  }

  .scrollbar-visible::-webkit-scrollbar {
    display: block;
  }
}

/*
 * Respect the user's reduced-motion preference (WCAG 2.3.3). "Reduce" means
 * reduce, not remove: we collapse durations to ~0 rather than 0 so JS that
 * waits on transitionend / animationend still fires. This is part of the
 * opinionated base layer — apps that import tokens-only opt out.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}