/**
 * Base layer & custom variants.
 *
 * Imported by `index.css`. Part of the token source of truth —
 * run `pnpm generate:tokens` after editing.
 */

@layer base {
  body:has(dialog[open]) {
    overflow: hidden;
  }

  dialog,
  [popover] {
    overscroll-behavior-block: contain;
    color: var(--color-fg-base);
  }

  body {
    text-spacing-trim: trim-start;
    text-autospace: normal;
    line-break: strict;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
    font-size: var(--text-md);
    line-height: var(--text-md--line-height);
  }

  pre {
    text-spacing-trim: space-all;
    text-autospace: no-autospace;
  }

  time {
    text-autospace: no-autospace;
  }

  input:not([type='button'], [type='submit'], [type='reset']),
  textarea,
  [contenteditable] {
    text-autospace: no-autospace;
  }

  b,
  strong,
  em {
    font-weight: unset;
  }

  i,
  cite,
  em,
  dfn,
  var,
  address {
    font-style: unset;
  }

  button,
  [type='button'],
  [type='submit'],
  [type='reset'],
  ::file-selector-button {
    touch-action: manipulation;
  }
}

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));

/* 縦書きモード。`.writing-v` 配下に適用し、`.writing-h` 配下のアイランドでは無効化する */
@custom-variant vertical (
  &:where(.writing-v, .writing-v *):not(.writing-h, .writing-h *)
);

/*
 * Popover（top-layer）の開く時のアニメーション。
 * :popover-open になった瞬間に keyframe を再生する。安静時の値は上書きしない
 * （natural=opacity:1）ため固着しない。閉じる時は display:none で即時（Modal/Drawer 同様）。
 * scale は transform ではなく `scale` プロパティを使い、CSS Anchor Positioning
 * （inset で配置）と干渉させない。
 */
.ao-anim-scale:popover-open {
  animation: ao-pop-in 0.18s ease;
}
.ao-anim-fade:popover-open {
  animation: ao-fade-in 0.15s ease;
}

@keyframes ao-pop-in {
  from {
    scale: 0.92;
  }
  to {
    scale: 1;
  }
}

@keyframes ao-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ao-anim-scale:popover-open,
  .ao-anim-fade:popover-open {
    animation: none;
  }
}