/* ================================================================
   base.css — Apple HIG カラーシステム準拠
   Dark mode semantic colors: achromatic hierarchy, accent only for interaction
   ================================================================ */

/* ── Apple HIG Dark Semantic Color Tokens ──
   原則：色は機能を伝える。装飾には使わない。
   階層はグレースケールで表現する。
   ─────────────────────────────────────── */
:root {
  /* Backgrounds — 3段階レイヤー */
  --bg:           #000000;
  --bg-2:         #1c1c1e;
  --bg-3:         #2c2c2e;
  --bg-4:         #3a3a3c;

  /* Labels — 4段階テキスト階層 */
  --label-1:      rgba(255, 255, 255, 1.00);
  --label-2:      rgba(235, 235, 245, 0.60);
  --label-3:      rgba(235, 235, 245, 0.30);
  --label-4:      rgba(235, 235, 245, 0.18);

  /* Separator */
  --sep:          rgba(84, 84, 88, 0.65);
  --sep-opaque:   #38383a;

  /* Fill */
  --fill-1:       rgba(120, 120, 128, 0.36);
  --fill-2:       rgba(120, 120, 128, 0.32);
  --fill-3:       rgba(120, 120, 128, 0.24);
  --fill-4:       rgba(120, 120, 128, 0.18);

  /* Accent — system blue, インタラクション専用 */
  --accent:       #396897;
  --accent-muted: rgba(10, 132, 255, 0.18);

  /* Semantic */
  --green:        #238f3e;
  --green-muted:  rgba(48, 209, 88, 0.15);
  --red:          #e23d34;
  --red-muted:    rgba(255, 69, 58, 0.15);
  --orange:       #ff9f0a;

  /* Typography */
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-heading: 'Syne', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  38px;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Motion */
  --t-fast:  0.15s ease;
  --t-mid:   0.25s ease;
  --t-slow:  0.38s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  background: var(--bg);
  color: var(--label-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; letter-spacing: -0.02em; }
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.8; }
button { font-family: var(--font-sans); }
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--sep-opaque); border-radius: 99px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}