/* ================================================================
   Houses PoC - デザインシステム 「Estate」
   深い緑 × 真鍮 × 和紙 / 見出し明朝 + 本本文ゴシック
   (モック ui.css v2.x のトークンを稼働アプリのクラス体系へ移植)
   ================================================================ */

:root {
  /* ---- Estate カラーパレット ---- */
  --color-primary: #1F7A43;          /* フォレストグリーン */
  --color-primary-hover: #14532D;    /* フォレスト-暗 */
  --color-primary-light: #E8F3EC;    /* フォレスト-淡 */
  --color-secondary: #8E9E9F;
  --color-success: #3F9142;
  --color-success-light: #E6F3E7;
  --color-warning: #C4901D;
  --color-warning-light: #F9F0DC;
  --color-danger: #C0392B;
  --color-danger-hover: #A02F22;
  --color-danger-light: #FAE8E6;
  --color-info: #4C6FA5;
  --color-info-light: #E9EEF6;

  /* ---- 真鍮 (アクセント) ---- */
  --brass: #A89342;
  --brass-deep: #85742F;
  --brass-soft: #F4EFDD;

  /* ---- グレースケール (和紙) ---- */
  --color-bg: #F8F9F8;                /* クール白 */
  --color-bg-alt: #EFF1F0;            /* gray */
  --color-surface: #ffffff;
  --color-border: #E4E7E5;
  --color-border-strong: #D3D8D5;
  --color-text: #0F0F0F;
  --color-text-muted: #707070;
  --color-text-light: #9BA09D;

  /* ---- タイポグラフィ ---- */
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-serif: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.75rem;
  --font-size-4xl: 2.25rem;

  /* ---- スペーシング (8pt リズム) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- 角丸 ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ---- シャドウ ---- */
  --shadow-sm: 0 1px 2px rgba(28,31,35,.05), 0 1px 8px rgba(28,31,35,.035);
  --shadow-md: 0 4px 10px -2px rgba(28,31,35,.08);
  --shadow-lg: 0 12px 40px -16px rgba(28,31,35,.24);
  --shadow-xl: 0 20px 45px -12px rgba(28,31,35,.28);

  /* ---- レイアウト ---- */
  --sidebar-width: 240px;
  --header-height: 64px;
  --container-max: 1280px;

  /* ---- トランジション ---- */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
}

/* ---- ベース ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
  letter-spacing: .01em;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
  letter-spacing: .04em;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
p { margin: 0 0 var(--space-3) 0; }
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--brass-deep); text-decoration: underline; }
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}
code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  padding: 2px 6px;
  border-radius: 6px;
}
::selection { background: rgba(176,138,60,.25); }