/* ============================================================
   おみくじ Design System — Base & Primitives
   ------------------------------------------------------------
   トークンだけを参照する土台と、画面をまたいで使う部品。
   ここから下に生の値（hex・px）を書かないこと。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%,
      var(--bg-canvas-glow) 0%, var(--bg-canvas) 70%);
  color: var(--fg-default);
  font-family: var(--face-mincho);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, p) { margin: 0; }


/* ── 部品 / ラベル ───────────────────────────────────────
   日付・項目名など、読み手を案内するための小さな文字。      */

.ds-label {
  font-family: var(--face-gothic);
  font-size: var(--size-3xs);
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest);
  color: var(--fg-metal);
}

.ds-label--paper {
  color: var(--fg-on-paper-muted);
  letter-spacing: var(--tracking-widest);
  text-indent: 0;
}

.ds-label--quiet {
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wider);
  text-indent: 0;
}


/* ── 部品 / 罫 ──────────────────────────────────────────── */

.ds-rule {
  width: var(--space-10);
  height: 1px;
  margin-inline: auto;
  background: var(--fg-metal);
  opacity: .55;
}


/* ── 部品 / 縦組み ──────────────────────────────────────── */

.ds-tate {
  writing-mode: vertical-rl;   /* 右から左へ読む */
}


/* ── 部品 / 操作 ────────────────────────────────────────── */

.ds-button {
  display: block;
  width: 100%;
  padding: var(--space-3);
  font-family: var(--face-gothic);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest);
  color: var(--fg-default);
  background: transparent;
  border: var(--border-metal);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.ds-button:hover {
  background: rgb(176 140 69 / .14);
  border-color: var(--fg-metal);
}


/* ── 状態 / フォーカス ──────────────────────────────────── */

:where(button, a, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}


/* ── 状態 / 動きを減らす設定 ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}