/**
 * relay-theme.css
 * Relay ブランド層（配色・ロゴの上書き）。styles.css の「後」に読み込む。
 *
 * 設計意図:
 *   既存 styles.css は変更せず、ブランド由来の色だけをここへ集約する。
 *   こうすることで配色変更の影響範囲を 1 ファイルに局所化できる
 *   （同じ判断ロジックを複数箇所に書かない方針）。
 *
 * 読み込み順（必ず styles.css の後）:
 *   <link rel="stylesheet" href="assets/styles.css">
 *   <link rel="stylesheet" href="assets/relay-theme.css">
 */

:root {
  /* --- Relay パレット（取締役会資料 / Relay 提言2026 より） --- */
  --relay-navy:     #0E1B2B; /* 基調ダーク: サイドバー / ログイン背景 */
  --relay-teal:     #15A88E; /* 主要ブランド色: アクティブ / プライマリ操作 */
  --relay-teal-400: #2FD3A5; /* グラデーション開始・ホバー */
  --relay-teal-600: #0E9C86; /* グラデーション終端・押下 */
  --relay-amber:    #F5A623; /* アクセント */

  /* --- 既存セマンティック変数を Relay へ寄せる（1 箇所変更で広く反映） --- */
  --navy:  var(--relay-navy);  /* .sidebar / .login-page の背景 */
  --amber: var(--relay-amber); /* .status-line.warn など */
}

/* === ブランドマーク: 仮の角丸スクエア → Relay ロゴ（SVG） === */
.brand-mark {
  /* SVG 側で角丸済みのため、既存の border-radius を打ち消す */
  border-radius: 0;
  background: url("relay-mark.svg") center / contain no-repeat;
}

/* "Relay" ワードマーク（資料の欧文表記に合わせた字形） */
.brand strong {
  font-family: Georgia, "Times New Roman", "Segoe UI", serif;
  font-size: 19px;
  letter-spacing: .2px;
}

/* === 主要アクション色を 青(--blue) → Relay ティールへ === */
/* サイドバーのアクティブ項目 */
.sidebar nav a.active {
  background: var(--relay-teal);
}

/* プライマリボタン（ログイン送信など） */
.primary-button {
  background: linear-gradient(135deg, var(--relay-teal-400), var(--relay-teal-600));
  border-color: var(--relay-teal-600);
}

/* トップバー / ログインの eyebrow ラベル */
.eyebrow {
  color: var(--relay-teal-600);
}

/* ダッシュボードの棒グラフ */
.bar {
  background: var(--relay-teal);
}

/* === ログイン左ビジュアル: 暗幕を Relay ネイビーへ（写真は据え置き） === */
.login-visual {
  background:
    linear-gradient(rgba(14, 27, 43, .35), rgba(14, 27, 43, .92)),
    url("https://images.unsplash.com/photo-1581092921461-eab62e97a780?auto=format&fit=crop&w=1400&q=80") center / cover;
}