/* ============================================================
   Orange & Green DSystem × Bootstrap 5 — Design Bridge
   Connects the DSystem tokens to Bootstrap 5.3.
   読み込み順: bootstrap.min.css → dsystem-tokens.css →
              dsystem-bootstrap-overrides.css → custom.css
   ============================================================ */

/* ---------- ページ最上部 オレンジ×グリーン ツートンバー ---------- */
/* Signature motif: a flat, hard-edge 50/50 split bar — no gradient,
   no blend — echoing the brand's orange + green duality. */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--color-orange-500) 50%, var(--color-green-500) 50%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
body {
  padding-top: 4px;
  font-family: var(--font-sans);
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

/* ---------- Bootstrap カラーマップ上書き ---------- */
:root {
  --bs-primary: var(--color-orange-500);
  --bs-primary-rgb: 255, 107, 53;
  --bs-secondary: var(--color-green-500);
  --bs-secondary-rgb: 61, 190, 122;
  --bs-dark: var(--color-neutral-900);
  --bs-dark-rgb: 26, 26, 26;
  --bs-success: var(--color-status-success);
  --bs-warning: var(--color-status-warning);
  --bs-danger: var(--color-status-error);
  --bs-info: var(--color-status-info);
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--color-bg-page);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-full);
  --bs-link-color: var(--color-orange-500);
  --bs-link-hover-color: var(--color-orange-600);
}

/* ---------- タイポグラフィ ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing-tight);
}
.lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ---------- DSystem ユーティリティクラス ---------- */
.ds-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.ds-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-primary); }
.bg-ink { background-color: var(--color-neutral-900) !important; color: var(--color-text-inverse); }
.bg-ink * { color: var(--color-text-inverse); }
.bg-ink a:hover { color: var(--color-orange-400); }
.bg-surface { background-color: var(--color-bg-surface) !important; }
.bg-orange-tint { background-color: var(--color-bg-orange-tint) !important; }
.bg-green-tint { background-color: var(--color-bg-green-tint) !important; }
.text-orange { color: var(--color-orange-500) !important; }
.text-green { color: var(--color-green-600) !important; }
.text-ink { color: var(--color-neutral-900) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* ---------- ボタン（フラット、角丸、ソフトホバー） ---------- */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-button);
  border-width: 1px;
  padding: 10px 24px;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn-primary {
  background: var(--color-orange-500); border-color: var(--color-orange-500); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-orange-600); border-color: var(--color-orange-600); color: #fff;
}
.btn-secondary {
  background: var(--color-green-500); border-color: var(--color-green-500); color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--color-green-600); border-color: var(--color-green-600); color: #fff;
}
.btn-dark {
  background: var(--color-neutral-900); border-color: var(--color-neutral-900); color: #fff;
}
.btn-dark:hover { background: var(--color-neutral-700); border-color: var(--color-neutral-700); color: #fff; }
.btn-outline-dark {
  background: transparent; border: 1px solid var(--color-neutral-900); color: var(--color-neutral-900);
}
.btn-outline-dark:hover { background: var(--color-bg-muted); }
.btn-ghost {
  background: transparent; border: 1px solid transparent; color: var(--color-orange-500);
}
.btn-ghost:hover { background: var(--color-bg-orange-tint); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- ナビゲーション ---------- */
.navbar {
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.navbar-brand {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--font-size-lg); color: var(--color-neutral-900);
  display: flex; align-items: center; gap: var(--space-2);
}
.navbar-brand:hover { color: var(--color-orange-500); }
.navbar-brand img { height: 32px; width: auto; }
.nav-link {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary); padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link:hover { color: var(--color-orange-500); background: var(--color-bg-orange-tint); }
.nav-link.active { color: var(--color-orange-600); font-weight: var(--weight-bold); }
.navbar-toggler { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.navbar-toggler:focus { box-shadow: var(--focus-ring); }

/* ---------- カード（白地、角丸12px、ソフトシャドウ） ---------- */
.card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-body { padding: var(--space-6); }
.card-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--font-size-xl); }
.card-text { color: var(--color-text-secondary); }

/* ---------- フォーム ---------- */
.form-control, .form-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input); font-family: var(--font-sans);
  font-size: var(--font-size-md); background: var(--color-bg-page); color: var(--color-text-primary);
  padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--color-orange-500); box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-label {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--font-size-sm); margin-bottom: var(--space-1); color: var(--color-text-primary);
}

/* ---------- セクション ---------- */
section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.ds-hero { padding-top: var(--space-32); padding-bottom: var(--space-24); }
.ds-hero__title {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--font-size-6xl); line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
@media (max-width: 768px) {
  .ds-hero__title { font-size: var(--font-size-4xl); }
  section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}
.ds-hero__dot { color: var(--color-orange-500); }
.ds-hero__lede { font-family: var(--font-sans); font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 480px; }
.ds-rule { border: none; border-top: 1px solid var(--color-border); margin: 0; }
.ds-rule--orange { border: none; border-top: 2px solid var(--color-orange-500); }
.ds-rule--green { border: none; border-top: 2px solid var(--color-green-500); }

/* 色ブロック — orange/green の平面カラーブロック（DSystemの核となるビジュアル要素） */
.ds-block-orange { background: var(--color-orange-500); color: #fff; border-radius: var(--radius-card); }
.ds-block-green  { background: var(--color-green-500);  color: #fff; border-radius: var(--radius-card); }
.ds-block-orange-tint { background: var(--color-bg-orange-tint); border-radius: var(--radius-card); }
.ds-block-green-tint  { background: var(--color-bg-green-tint);  border-radius: var(--radius-card); }

/* ---------- フッター ---------- */
footer { background-color: var(--color-neutral-900); color: var(--color-text-inverse); padding-top: var(--space-16); padding-bottom: var(--space-12); }
footer a { color: var(--color-neutral-400); text-decoration: none; }
footer a:hover { color: var(--color-orange-400); }
footer .ds-label { color: var(--color-neutral-500); }

/* ---------- バッジ ---------- */
.badge {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--font-size-xs); border-radius: var(--radius-badge); padding: 4px 10px;
}
.badge.bg-primary { background: var(--color-orange-500) !important; }
.badge.bg-secondary { background: var(--color-green-500) !important; }
.badge.bg-dark { background: var(--color-neutral-900) !important; }

/* ---------- テーブル ---------- */
.table thead th {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--font-size-xs); border-bottom: 1px solid var(--color-border);
}

/* ---------- リンク ---------- */
a { color: var(--color-orange-500); text-underline-offset: 3px; }
a:hover { color: var(--color-orange-600); }