/*  BIGBOSS PR Theme — dark（汎用ダーク）
 *  =========================================================
 *  pr_page / brand の「基本テーマ」として使う、色に寄りかからない素のダーク。
 *
 *  設計方針:
 *    - prs.css から PRS 固有の装飾（背景全画面 HERO・ブランドロゴ・
 *      クリームゴールドの強調）を外し、どのブランドでも使える階調だけ残す。
 *    - 強調色はニュートラルな明灰。ブランド色を出したい場合は
 *      専用テーマ（prs / strandberg 等）を作るか、記事側で上書きする。
 *    - ⚠ トークンの反転はしない（--bb-white を暗色にする等はしない）。
 *      sapphire の二重反転事故と同じ轍を踏まないため、面は ink 系で定義し、
 *      明るい前提のブロック背景だけを個別に上書きする。
 */

/* ─── 変数上書きスコープ ──────────────────────────────────
   このCSSは dark テーマの投稿でだけ条件付きロードされるため :root で上書きしても
   他ページに影響しない。エディタでは body にクラスが付かないため :root を併記する。
   ───────────────────────────────────────────── */
:root,
.pr-theme--dark {
    /* ─── 面 ────────────────────────────────────────────────── */
    --bb-black:          #101214;   /* 最暗面 */
    --bb-off-black:      #0c0e10;   /* セクション alt */
    --bb-dark:           #181b1e;   /* カード面 */
    --bb-dark-mid:       #1f2327;   /* カード hover */
    --bb-mid:            #b8c0c5;   /* 本文（ダーク面に載るため明るめ）*/
    --bb-gray:           #9ba3a8;   /* 副次テキスト */
    --bb-gray-light:     #c9d0d4;
    --bb-border:         #343b40;
    --bb-off-white:      #101214;   /* ※ ブロック背景として参照されるため暗色に寄せる */
    /* ⚠ --bb-border-light は base.css で明るい罫線（#e4e4e0）として定義されている。
       暗色テーマで未定義のままだと区切り線だけ白く浮く（共通CSS43箇所で使用）。
       背景色トークンと違い、罫線色は暗くしても参照側は壊れないため上書きする。 */
    --bb-border-light:   #2a3035;
    /* --bb-white は反転させない（背景として参照されるため壊れる）*/

    /* ─── 役割トークン（反転禁止・参照側はこちらを使う）─────────── */
    --bb-ink:            #101214;
    --bb-ink-soft:       #181b1e;
    --bb-ink-soft-hover: #1f2327;
    --bb-on-ink:         #e9edef;
    --bb-on-ink-muted:   rgba(233, 237, 239, 0.66);

    /* ─── 強調色（ニュートラル）─────────────────────────────── */
    --bb-accent:         #d7dee2;
    --bb-accent-dark:    #b9c2c7;
    --bb-accent-tint:    #1f2327;
    /* accent が明るいので、その上の文字は暗色にする（白だと 1.4〜2.7:1 で読めない）*/
    --bb-on-accent:      #14181b;

    /* ─── 本文色 ──────────────────────────────────────────── */
    --bb-intro-color:      rgba(233, 237, 239, 0.72);
    --bb-intro-color-dark: rgba(233, 237, 239, 0.72);
}

body.pr-theme--dark {
    background: var(--bb-ink);
    color: var(--bb-on-ink);
}

/* ════════════════════════════════════════════════════════════
 * セクション共通
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .pr-block {
    background: var(--bb-ink);
    color: var(--bb-on-ink);
}

.pr-theme--dark .pr-block h1,
.pr-theme--dark .pr-block h2,
.pr-theme--dark .pr-block h3,
.pr-theme--dark .pr-block h4 {
    color: var(--bb-on-ink);
}

/* 塗りボタン：強調色が明るいので文字は暗色 */
.pr-theme--dark .pr-block .sc-btn--primary {
    color: #14181b;
}

.pr-theme--dark .pr-block .sc-btn--dark {
    background: transparent;
    border-color: var(--bb-border);
    color: var(--bb-on-ink);
}

.pr-theme--dark .pr-block .sc-btn--dark:hover {
    border-color: var(--bb-accent);
    color: var(--bb-accent);
}

/* ════════════════════════════════════════════════════════════
 * ABOUT（pr-about）
 *   共通CSSは strong を --bb-black（＝暗色）にしているため、
 *   暗い面では黒背景に黒文字になる。ここで打ち消す。
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .bpr-about {
    background: var(--bb-off-black);
}

.pr-theme--dark .bpr-about__body {
    color: var(--bb-on-ink-muted);
}

.pr-theme--dark .bpr-about__body strong,
.pr-theme--dark .bpr-about__fact-value {
    color: var(--bb-on-ink);
}

.pr-theme--dark .bpr-about__facts,
.pr-theme--dark .bpr-about__fact {
    border-color: var(--bb-border);
}

.pr-theme--dark .bpr-about__fact-label {
    color: var(--bb-accent);
}

.pr-theme--dark .bpr-about__point {
    background: var(--bb-ink-soft);
    border-color: var(--bb-border);
}

.pr-theme--dark .bpr-about__point-body {
    color: var(--bb-on-ink-muted);
}

.pr-theme--dark .bpr-about__point-body strong {
    color: var(--bb-accent);
}

/* ════════════════════════════════════════════════════════════
 * 商品リスト（sc-products-list）
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .bsc-products-list {
    background: var(--bb-ink);
}

.pr-theme--dark .bsc-products-list__subdesc {
    color: var(--bb-on-ink-muted);
}

.pr-theme--dark .bsc-products-list__cat-header {
    border-color: var(--bb-border);
}

.pr-theme--dark .bsc-products-list-card {
    background: var(--bb-ink-soft);
    border-color: var(--bb-border);
    color: var(--bb-on-ink);
}

.pr-theme--dark .bsc-products-list-card:hover {
    background: var(--bb-ink-soft-hover);
    border-color: var(--bb-accent);
}

.pr-theme--dark .bsc-products-list-card__title {
    color: var(--bb-on-ink);
}

.pr-theme--dark .bsc-products-list-card__price {
    color: var(--bb-accent);
}

.pr-theme--dark .bsc-products-list-card__media {
    background: var(--bb-ink);
}

/* ════════════════════════════════════════════════════════════
 * BENEFITS（sc-benefits）
 *   カード面・文字色は共通CSS側が役割トークンを使うため上書き不要。
 *   セクションの地色だけ alt 面にする。
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .bsc-benefits {
    background: var(--bb-off-black);
}


/* ════════════════════════════════════════════════════════════
 * 関連コンテンツ（pr-related）
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .bpr-related {
    background: var(--bb-off-black);
}

.pr-theme--dark .bpr-related__group-title {
    color: var(--bb-on-ink);
    border-color: var(--bb-accent);
}

.pr-theme--dark .bpr-related__card {
    background: var(--bb-ink-soft);
    border-color: var(--bb-border);
    color: var(--bb-on-ink);
}

.pr-theme--dark .bpr-related__card:hover {
    background: var(--bb-ink-soft-hover);
    border-color: var(--bb-accent);
}

.pr-theme--dark .bpr-related__card-excerpt {
    color: var(--bb-on-ink-muted);
}

.pr-theme--dark .bpr-related__card-excerpt strong,
.pr-theme--dark .bpr-related__card-title {
    color: var(--bb-on-ink);
}

.pr-theme--dark .bpr-related__card-label {
    color: var(--bb-accent);
}

/* ════════════════════════════════════════════════════════════
 * CTA（sc-final-cta）
 * ════════════════════════════════════════════════════════════ */
.pr-theme--dark .sc-final-cta {
    background: var(--bb-off-black);
}

.pr-theme--dark .sc-final-cta__desc {
    color: var(--bb-on-ink-muted);
}