/*  BIGBOSS PR Theme — bass (dark / ベースの選び方ガイド)
 *  =============================================================
 *  base.css が定義する --bb-* 変数を `.pr-theme--bass` スコープで上書きする L1 テーマ。
 *
 *  なぜ専用テーマを作るか:
 *    STAFF'S CHOICE シリーズ（52800 / 56262 / 63461）は
 *    「型（骨格・eyebrow）は共通、配色は1本ごとに別」で運用されている。
 *    ベース編を sapphire（63461 多弦ギター）と共有すると、
 *    シリーズ内で同じページに見えてしまう。
 *
 *  出典配色: ウォームブラック #0b0806 × カッパー #c96f3f × ウォームアイボリー #f2ece6
 *  フォント: base.css 既定（見出し Oswald / 本文 Noto Sans JP）をそのまま使う。
 *            sapphire はセリフ（Cormorant Garamond）なので、字面でも差が出る。
 *
 *  ⚠ sapphire と同じく dark 系のため、--bb-black に明色、
 *    --bb-off-white / --bb-white に暗色を入れる（トークン名の意味は反転するが、
 *    視覚的役割は維持される）。
 *  ⚠ 役割安定トークン（--bb-ink / --bb-on-ink / --bb-on-accent）は反転させない。
 *    ink は常に暗い面、on-ink は常に明るい文字。
 *
 *  bass.css は bass 投稿でだけ条件付きロードされるため、
 *  :root で上書きしても他ページに影響しない。
 *  エディタでは body に pr-theme--bass が付かないため :root を併記する。
 */

:root,
.pr-theme--bass {
    /* ─── Color tokens（dark: 背景=ウォームブラック / 文字=アイボリーへ反転）─── */
    --bb-black:        #f2ece6;  /* 主要テキスト（warm ivory）※反転 */
    --bb-off-black:    #e2d8cf;
    --bb-dark:         #1c1613;  /* カード / ソフト面 */
    --bb-dark-mid:     #271e19;  /* ホバー面 */
    --bb-gray:         #b3a498;  /* セカンダリテキスト */
    --bb-gray-light:   #6b5b50;  /* ミュート */
    --bb-border:       rgba(201, 111, 63, 0.28);
    --bb-border-light: rgba(201, 111, 63, 0.14);
    --bb-off-white:    #120d0b;  /* セクション背景 ※反転 */
    --bb-white:        #0b0806;  /* 最暗面（warm black）※反転 */

    /* 役割安定トークン（反転禁止）*/
    --bb-ink:            #120d0b;                   /* 常に暗いセクション面 */
    --bb-ink-soft:       #1c1613;                   /* ink 上のカード面 */
    --bb-ink-soft-hover: #271e19;                   /* カード hover */
    --bb-on-ink:         #f2ece6;                   /* ink 上の主要テキスト */
    --bb-on-ink-muted:   rgba(242, 236, 230, 0.72); /* ink 上の副次テキスト */

    /* アクセント（桜 → カッパー）*/
    --bb-accent:       #c96f3f;
    --bb-accent-dark:  #8f4a26;
    --bb-accent-tint:  #1c1613;
    /* accent が中明度なので、その上の文字は暗色にする（白だと 3.3:1 で不足）*/
    --bb-on-accent:    #14100d;

    /* intro テキスト色（ダーク基調へ反転）*/
    --bb-intro-color:      rgba(242, 236, 230, 0.72);
    --bb-intro-color-dark: rgba(242, 236, 230, 0.72);
}

/* ─── Body 基調 + 背景演出 ───────────────────────────
   横線は弦のイメージ。sapphire の 80px グリッドと区別するため、
   縦線は引かず、太さの違う横線だけを 4 本まとめて敷く。 */
body.pr-theme--bass {
    background: var(--bb-white);
    color: var(--bb-black);
    background-image:
        radial-gradient(ellipse at top, rgba(201, 111, 63, 0.12), transparent 62%),
        repeating-linear-gradient(
            to bottom,
            rgba(201, 111, 63, 0.055) 0 1px,
            transparent 1px 26px,
            rgba(201, 111, 63, 0.040) 26px 27px,
            transparent 27px 54px,
            rgba(201, 111, 63, 0.028) 54px 55px,
            transparent 55px 84px,
            rgba(201, 111, 63, 0.018) 84px 85px,
            transparent 85px 120px
        );
    background-attachment: fixed;
}

/* ─── 強調（"5弦" 等）─── */
.pr-theme--bass .bb-em {
    color: var(--bb-accent);
    font-weight: 600;
}

/* ─── CTA ボタンの質感調整 ─── */
.pr-theme--bass .sc-btn {
    letter-spacing: 0.04em;
    transition: var(--bb-transition);
}

/* ─── タイプ別カードの写真（pr-ladder）───────────────────────
   このページの写真は /assets/images/type_items/bass/ の 3:2（750×500・背景あり）。
   共通CSSの .bpr-ladder__thumb--photo は 3:4 の切り抜き前提（EDWARDS 65241 用）で、
   そのままだと上下に大きな余白が出る。このテーマのページだけ 3:2 で塗り切る。
   ⚠ .pr-theme--bass にスコープしているので、他ページには影響しない。 */
.pr-theme--bass .bpr-ladder__thumb--photo {
    aspect-ratio: 3 / 2;

    & img {
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }
}