/* ═══════════════════════════════════════════════════════════════
   TORIAI DESIGN SYSTEM v3
   ---------------------------------------------------------------
   Rules:
     • Text   → #111 (black only, no colored text)
     • Hover  → rgba(79, 70, 229,.06) light-purple BG, no border
     • Active → rgba(79, 70, 229,.09) slightly deeper
     • Borders → none by default (#e8e8e8 only where structural)
     • Purple  → hover/selected BG ONLY. No purple text/borders
     • Data tab → rgba(14,165,233,.06) light-blue hover instead
     • Dark mode → Claude-matching neutral dark grays
═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Variables ──────────────────────────────────────── */
:root {
  /* Hover / selected — master 確定 (2026-05-10): COLOR_RULES v1 中性 #f4f4f5 */
  --hp:  #f4f4f5;                /* hover bg (旧紫系から中性に統一) */
  --sp:  #f4f4f5;                /* select bg (= hover と同じ中性) */
  --hb:  rgba(14,165,233,.06);   /* hover  blue bg (data tab) */

  /* Achromatic palette */
  --ink:   #111111;
  --ink2:  #555555;
  --ink3:  #999999;
  --bg:    #ffffff;
  --bg2:   #f7f7f7;
  --bg3:   #f0f0f0;
  --line:  #e8e8e8;
  --line2: #f0f0f0;

  /* Status */
  --gn: #16a34a;
  --rd: #dc2626;
  --cy: #0891b2;
  --am: #d97706;

  /* Radius — 8〜12px 統一 */
  --r:    10px;
  --r-sm: 8px;
  --r-lg: 12px;
}

/* ── 2. Dark mode — Claude-matching neutral grays ──────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --hp:  rgba(255,255,255,.07);
  --sp:  rgba(255,255,255,.11);
  --hb:  rgba(14,165,233,.1);
  --ink:  #ececec;
  --ink2: #aaaaaa;
  --ink3: #666666;
  --bg:   #1c1c1c;
  --bg2:  #242424;
  --bg3:  #2c2c2c;
  --line: #3a3a3a;
  --line2:#2c2c2c;
}

/* ── 3. Base ────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* ── 4. Header ──────────────────────────────────────────────── */
header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-theme="dark"] header {
  background: var(--bg2) !important;
  border-bottom-color: var(--line) !important;
}

/* Nav links — color は style.css に任せる（デフォルト#6b7280／ホバー#1a1a2e） */
/* master 仕様 (2026-05-10): TORIAI カラールール v1 — 中性 hover #f4f4f5 */
nav a:hover, nav a.active {
  background: #f4f4f5 !important;
}
html[data-theme="dark"] nav a { color: var(--ink) !important; }
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav a.active {
  background: var(--hp) !important;
  color: var(--ink) !important;
}

/* Logo */
.logo { color: var(--ink) !important; }
.logo .dot { color: var(--ink) !important; }
.logo .beta { color: var(--ink) !important; border-color: var(--ink) !important; }
html[data-theme="dark"] .logo { color: var(--ink) !important; }
html[data-theme="dark"] .logo-image {
  mix-blend-mode: normal !important;
  filter: brightness(0) invert(1) !important;
}

/* Hamburger button */
/* master 仕様 (2026-05-10): TORIAI カラールール v1 — 中性 hover #f4f4f5 */
.ham-btn { color: var(--ink2) !important; background: transparent !important; }
.ham-btn:hover, .ham-btn.open {
  background: #f4f4f5 !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .ham-btn { color: var(--ink2) !important; }
html[data-theme="dark"] .ham-btn:hover,
html[data-theme="dark"] .ham-btn.open {
  background: var(--hp) !important;
  color: var(--ink) !important;
}

/* Ham menu */
.ham-menu {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
}
.hm-section + .hm-section { border-top-color: var(--line2) !important; }
.hm-row:hover { background: var(--hp) !important; }
.hm-txt { color: var(--ink) !important; }
.hm-arr { color: var(--ink3) !important; }
.hm-ver, .hm-note { color: var(--ink3) !important; }
html[data-theme="dark"] .ham-menu {
  background: var(--bg2) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .hm-section + .hm-section { border-top-color: var(--line) !important; }
html[data-theme="dark"] .hm-row:hover { background: var(--hp) !important; }
html[data-theme="dark"] .hm-txt { color: var(--ink) !important; }

/* Theme pill */
.hm-theme-pill { background: var(--bg3) !important; color: var(--ink2) !important; }
.hm-row#themeToggleBtn.is-on .hm-theme-pill {
  background: var(--sp) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .hm-theme-pill { background: var(--bg3) !important; color: var(--ink2) !important; }

/* Cart badge — same bg as header until hover */
.cart-badge {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.cart-badge:hover { background: var(--hp) !important; }
.cart-badge.empty { background: var(--bg2) !important; color: var(--ink3) !important; border-color: var(--line) !important; }
.hdr-right > #cartBadge {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.hdr-right > #cartBadge:hover { background: var(--hp) !important; }
html[data-theme="dark"] .cart-badge {
  background: var(--bg2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .cart-badge:hover { background: var(--hp) !important; }
html[data-theme="dark"] .hdr-right > #cartBadge {
  background: var(--bg2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .hdr-right > #cartBadge:hover { background: var(--hp) !important; }