/* ─────────────────────────────────────────────
   住宅最適設計ビジュアライザー — デザイントークン
   ───────────────────────────────────────────── */
:root {
  /* Light mode (default) — warm off-white architectural */
  --bg: #f4f1eb;
  --bg-2: #ebe6dc;
  --surface: #ffffff;
  --surface-2: #faf7f1;
  --ink: #1a1614;
  --ink-2: #4a423b;
  --ink-3: #8a7f73;
  --ink-4: #b8ada0;
  --line: #d8d0c2;
  --line-2: #e8e2d6;
  --accent: oklch(0.52 0.07 105);          /* olive */
  --accent-soft: oklch(0.93 0.025 105);
  --accent-ink: oklch(0.30 0.05 105);
  --warn: oklch(0.62 0.13 55);
  --positive: oklch(0.55 0.08 145);
  --negative: oklch(0.56 0.12 25);
  --shadow-sm: 0 1px 2px rgba(40, 28, 14, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(40, 28, 14, 0.18), 0 2px 4px rgba(40, 28, 14, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(40, 28, 14, 0.22), 0 4px 12px rgba(40, 28, 14, 0.08);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --viewport-sky: linear-gradient(180deg, #c8d6e2 0%, #e2dccd 65%, #d0c8b8 100%);
}

:root[data-theme="dark"] {
  --bg: #16130f;
  --bg-2: #1c1814;
  --surface: #221d18;
  --surface-2: #2a241e;
  --ink: #ece5d8;
  --ink-2: #c0b8a8;
  --ink-3: #8a8175;
  --ink-4: #5a534a;
  --line: #3a342c;
  --line-2: #2e2922;
  --accent: oklch(0.72 0.09 105);
  --accent-soft: oklch(0.30 0.05 105);
  --accent-ink: oklch(0.85 0.07 105);
  --warn: oklch(0.75 0.13 60);
  --positive: oklch(0.72 0.09 145);
  --negative: oklch(0.70 0.14 25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
  --viewport-sky: linear-gradient(180deg, #2a3340 0%, #3a342a 60%, #4a3e30 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-feature-settings: "palt" 1;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.serif { font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif; font-feature-settings: normal; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: inherit; }

/* utility */
.t-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.t-label {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.t-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.t-h-section {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.divider {
  height: 1px;
  background: var(--line);
}