/**
 * base.css - 和紙と抹茶・墨を基調とした柔らかいライトテーマ変数・基本ボタン
 */

:root {
  --bg-page: #f6f2ea;
  --bg-surface: #fdfbf7;
  --bg-surface-alt: #efe9dd;
  --bg-elevated: #ffffff;
  --text-main: #25211c;
  --text-muted: #70675b;
  --border-subtle: rgba(72, 58, 38, 0.13);
  --border-strong: rgba(72, 58, 38, 0.24);

  --accent-primary: #2d6a4f;
  --accent-primary-soft: rgba(45, 106, 79, 0.12);
  --accent-primary-ink: #ffffff;
  --accent-good: #2b7a4b;
  --accent-warn: #c47616;
  --accent-bad: #c44536;

  --shadow-soft: 0 2px 8px rgba(56, 42, 20, 0.06);
  --shadow-board: 0 8px 22px rgba(68, 48, 18, 0.16), 0 2px 5px rgba(68, 48, 18, 0.08);
  --shadow-modal: 0 18px 42px rgba(36, 28, 16, 0.22);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --font-sans: 'Noto Sans JP', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Shippori Mincho', 'Noto Sans JP', serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-page);
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.65), transparent 65%);
  color: var(--text-main);
  font-family: var(--font-sans);
  overscroll-behavior-y: contain;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

:fullscreen, ::backdrop {
  background: var(--bg-page);
}

.hidden {
  display: none !important;
}

button, select, input {
  font-family: inherit;
  color: inherit;
  touch-action: manipulation;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  min-height: 40px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--accent-primary-ink);
  border-color: transparent;
}

.btn-primary:hover:not(:disabled) {
  background: #245740;
  border-color: transparent;
}

.btn-good {
  background: var(--accent-good);
  color: #ffffff;
  border-color: transparent;
}

.btn-warn {
  background: #fef3c7;
  color: #8c4b08;
  border-color: rgba(196, 118, 22, 0.35);
}

.btn-danger {
  background: #fee2e2;
  color: #9e2a20;
  border-color: rgba(196, 69, 54, 0.35);
}

.btn-active {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-icon {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}

.material-symbols-rounded {
  font-size: 19px;
  line-height: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-info { background: var(--accent-primary-soft); color: var(--accent-primary); }
.badge-warn { background: #fef3c7; color: #9a5409; }
.badge-bad  { background: #fee2e2; color: #a82820; }
.badge-good { background: #dcfce7; color: #166534; }