/* ================================
   Hostdon High Contrast Orange Theme
   ベース: ダーク + やさしいオレンジ
   ================================ */

/* カラーバリエーション（必要に応じて調整してOK） */
:root {
  --hc-bg: #101010;              /* 全体背景 */
  --hc-bg-alt: #181818;          /* カラム・カード背景 */
  --hc-bg-elevated: #202020;     /* ホバー・強調背景 */

  --hc-accent: #ffb15a;          /* メインのやさしいオレンジ */
  --hc-accent-strong: #ff9a2a;   /* 強調用オレンジ */
  --hc-accent-soft: #ffe1b5;     /* ソフトなオレンジ（背景用） */

  --hc-text: #f7f7f7;            /* メインテキスト */
  --hc-text-muted: #bbbbbb;      /* サブテキスト */
  --hc-border: #3a3a3a;          /* ボーダー */
  --hc-focus: #ffd08a;           /* フォーカスリング */
}

/* 全体背景・文字色 */
body,
.app-body,
.columns-area,
.drawer {
  background: var(--hc-bg) !important;
  color: var(--hc-text) !important;
}

/* スクロールバー（対応ブラウザのみ） */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--hc-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--hc-accent);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hc-accent-strong);
}

/* カラム・カード */
.column,
.column > .scrollable,
.column > .scrollable > div,
.drawer__inner,
.drawer__inner__mastodon,
.drawer__inner__mastodon > div {
  background: var(--hc-bg-alt) !important;
  color: var(--hc-text) !important;
  border-color: var(--hc-border) !important;
}

/* トゥート（ステータス） */
.status,
.detailed-status,
.entry,
.notification {
  background: var(--hc-bg-alt) !important;
  border-bottom: 1px solid var(--hc-border) !important;
  color: var(--hc-text) !important;
}

.status:hover,
.detailed-status:hover,
.notification:hover {
  background: var(--hc-bg-elevated) !important;
}

/* テキスト色調整 */
.status__content,
.detailed-status__wrapper,
.notification__message {
  color: var(--hc-text) !important;
}

.status__content p,
.status__content span,
.detailed-status__wrapper p {
  color: var(--hc-text) !important;
}

.status__meta,
.status__relative-time,
.notification__meta {
  color: var(--hc-text-muted) !important;
}

/* リンク */
a,
.status__content a,
.detailed-status__wrapper a {
  color: var(--hc-accent) !important;
}

a:hover,
.status__content a:hover,
.detailed-status__wrapper a:hover {
  color: var(--hc-accent-strong) !important;
  text-decoration: underline;
}

/* ハッシュタグ・メンション */
.status__content .hashtag,
.status__content .mention {
  color: var(--hc-accent) !important;
  background: transparent !important;
}

/* ボタン共通 */
.button,
.button.button-primary,
.button.button-secondary,
.compose-form__publish-button,
.compose-form__publish-button-wrapper button {
  background: var(--hc-accent) !important;
  color: #1a1a1a !important;
  border: 1px solid var(--hc-accent-strong) !important;
  font-weight: 600;
}

.button:hover,
.button.button-primary:hover,
.button.button-secondary:hover,
.compose-form__publish-button:hover,
.compose-form__publish-button-wrapper button:hover {
  background: var(--hc-accent-strong) !important;
}

/* 危険系ボタン（削除など）は赤寄りに */
.button.button-danger {
  background: #ff5a5a !important;
  border-color: #ff8080 !important;
  color: #1a1a1a !important;
}

/* 入力欄・フォーム */
input,
textarea,
select,
.compose-form__textarea {
  background: #141414 !important;
  color: var(--hc-text) !important;
  border: 1px solid var(--hc-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--hc-text-muted) !important;
}

/* フォーカスリング（アクセシビリティ） */
input:focus,
textarea:focus,
select:focus,
.button:focus,
a:focus {
  outline: 2px solid var(--hc-focus) !important;
  outline-offset: 2px;
}

/* ヘッダー・トップバー */
.navigation-bar,
.column-header,
.drawer__header {
  background: #121212 !important;
  border-bottom: 1px solid var(--hc-border) !important;
  color: var(--hc-text) !important;
}

/* 通知バッジなどのアクセント */
.notification__unread,
.badge,
.counter {
  background: var(--hc-accent-strong) !important;
  color: #1a1a1a !important;
}

/* アイコン類（できる範囲でオレンジ寄りに） */
.icon-button,
.icon-button:hover {
  color: var(--hc-accent) !important;
}

/* いいね・ブーストなどのアクション */
.icon-button.star-icon.active,
.icon-button.star-icon:hover {
  color: #ffdd7a !important;
}

.icon-button.reblog-icon.active,
.icon-button.reblog-icon:hover {
  color: #ffd08a !important;
}

/* モーダル・ダイアログ */
.modal-root,
.modal-root .modal,
.modal-root .modal-content {
  background: var(--hc-bg-alt) !important;
  color: var(--hc-text) !important;
  border: 1px solid var(--hc-border) !important;
}

/* ツールチップ */
.tooltip {
  background: #000000 !important;
  color: var(--hc-text) !important;
  border: 1px solid var(--hc-accent) !important;
}

/* 仕切り線 */
hr {
  border-color: var(--hc-border) !important;
}

/* 画像・メディアの背景 */
.media-gallery,
.media-gallery__item,
.media-gallery__item-thumbnail {
  background: #000000 !important;
}

/* アクセシビリティ向け：選択範囲 */
::selection {
  background: var(--hc-accent-soft);
  color: #000000;
}