/**
 * Collect 専用テーマ v2「ダークブランド＋明るい販売UI」（デザイン方針切替指示書対応）
 *
 * stores.settings.tenant_theme = "collect" の店舗でのみ読み込まれ、
 * すべてのルールを body[data-theme="collect"] 配下にスコープする。
 * 他テナント（sorciere等）にはこのファイル自体が配信されない二重ガード。
 *
 * 構成（指示書§7/§8）:
 *   ダーク  … ヘッダー・機能ナビ・メインビジュアル・オリパカード・フッター（全体の3〜4割まで）
 *   ライト … 商品一覧/詳細・検索・カート・会員登録・チェックアウト・ガイド類（既定のライトUIを維持）
 * v1の全面ダーク（bg-white/文字色/フォームのグローバル上書き）は撤去済み。
 */

body[data-theme="collect"] {
    /* ---- デザイントークン（指示書§6） ---- */
    --collect-brand-bg: #08111f;
    --collect-header-bg: #0b1627;
    --collect-brand-panel: #111e31;
    --collect-brand-border: #20334a;
    --collect-brand-text: #f8fafc;
    --collect-brand-muted: #a9b6c8;

    --collect-page-bg: #f4f7fa;
    --collect-card-bg: #ffffff;
    --collect-text: #172033;
    --collect-text-muted: #5d6879;
    --collect-border: #dce3ea;
    --collect-input-border: #c9d3df;

    --collect-primary: #0ea5c6;
    --collect-secondary: #2563eb;
    --collect-purple: #6d5bd0;
    --collect-gold: #c99b3d;
    --collect-success: #16835a;
    --collect-warning: #b86a13;
    --collect-danger: #c83a45;

    --collect-cta: #0e7f9c; /* 販売エリアの主ボタン（単色・§17/§23） */
    --collect-oripa-gradient: linear-gradient(135deg, #6d5bd0 0%, #2563eb 100%);

    /* 販売エリアの基調（ページ背景のみ淡色化。パネル・文字・フォームは既定ライトのまま） */
    background-color: var(--collect-page-bg);
}

/* =========================================================
   1. ヘッダー（ダークネイビー・§9）
   ========================================================= */
body[data-theme="collect"] header {
    background-color: var(--collect-header-bg);
    color: var(--collect-brand-text);
    border-bottom: 1px solid var(--collect-brand-border);
}
body[data-theme="collect"] header .bg-white { background-color: var(--collect-header-bg); }
body[data-theme="collect"] header .text-gray-600,
body[data-theme="collect"] header .text-gray-700 { color: var(--collect-brand-muted); }
body[data-theme="collect"] header .border,
body[data-theme="collect"] header .border-t,
body[data-theme="collect"] header .border-gray-100 { border-color: var(--collect-brand-border); }
body[data-theme="collect"] header .hover\:bg-gray-50:hover { background-color: var(--collect-brand-panel); }
/* 言語メニュー等のドロップダウンは濃色パネル */
body[data-theme="collect"] header #lang-menu { background-color: var(--collect-brand-panel); border-color: var(--collect-brand-border); }
body[data-theme="collect"] header #lang-menu .text-gray-700 { color: var(--collect-brand-muted); }
body[data-theme="collect"] header #lang-menu .hover\:bg-gray-50:hover { background-color: var(--collect-header-bg); }
body[data-theme="collect"] header #mobile-menu { background-color: var(--collect-header-bg); }

/* ブランドロゴ（COLLECT / TRADING CARD & ORIPA） */
body[data-theme="collect"] .brand-logo-title {
    background: linear-gradient(135deg, #22c3df 0%, #2563eb 60%, #6d5bd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.08em;
}
body[data-theme="collect"] .brand-logo-subtitle {
    color: var(--collect-brand-muted);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    line-height: 1;
    display: block;
}

/* =========================================================
   2. Collect機能ナビ（オリパ/シングルカード/保管庫・ダーク帯）
   ========================================================= */
body[data-theme="collect"] nav.bg-white {
    background-color: var(--collect-header-bg);
    border-color: var(--collect-brand-border);
}
body[data-theme="collect"] nav.bg-white .text-gray-700 { color: var(--collect-brand-muted); }

/* =========================================================
   3. フッター（ダークネイビー・§26）
   ========================================================= */
body[data-theme="collect"] footer {
    background-color: var(--collect-brand-bg);
    border-top: 1px solid var(--collect-brand-border);
}
body[data-theme="collect"] footer,
body[data-theme="collect"] footer .text-gray-500 { color: #94a3b8; }
body[data-theme="collect"] footer .text-gray-400 { color: #7b8798; }
body[data-theme="collect"] footer a:hover { color: #22c3df; }

/* =========================================================
   4. メインビジュアル（唯一のダーク演出エリア・§11）
   ========================================================= */
body[data-theme="collect"] .nex-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 60% at 12% 0%, rgba(109, 91, 208, 0.20), transparent 60%),
        radial-gradient(ellipse 45% 55% at 88% 100%, rgba(14, 165, 198, 0.14), transparent 60%),
        linear-gradient(160deg, #0b1627 0%, #08111f 70%);
    border: 1px solid var(--collect-brand-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
body[data-theme="collect"] .nex-hero h2 { color: var(--collect-brand-text); }
body[data-theme="collect"] .nex-hero p { color: var(--collect-brand-muted); }
/* カード型の抽象シルエット（自作CSS描画・権利素材不使用） */
body[data-theme="collect"] .nex-hero::before,
body[data-theme="collect"] .nex-hero::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 168px; /* トレカ比率 63:88 */
    border: 1px solid rgba(34, 195, 223, 0.22);
    border-radius: 10px;
    background: linear-gradient(155deg, rgba(14, 165, 198, 0.06), rgba(109, 91, 208, 0.09));
    pointer-events: none;
}
body[data-theme="collect"] .nex-hero::before { left: 4%; bottom: -34px; transform: rotate(-14deg); }
body[data-theme="collect"] .nex-hero::after { right: 4%; top: -30px; transform: rotate(12deg); border-color: rgba(109, 91, 208, 0.26); }
@media (max-width: 640px) {
    body[data-theme="collect"] .nex-hero::before,
    body[data-theme="collect"] .nex-hero::after { display: none; }
}

/* ヒーロー内ボタン: オリパ=パープル→ブルーのグラデーション（§19）／シングルカード=白（§11） */
body[data-theme="collect"] .nex-hero .bg-purple-600 {
    background: var(--collect-oripa-gradient) !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.22);
    border: none;
}
body[data-theme="collect"] .nex-hero .bg-purple-600:hover { filter: brightness(1.08); }
body[data-theme="collect"] .nex-hero .btn-outline-collect {
    background: #ffffff;
    color: #172033;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
body[data-theme="collect"] .nex-hero .btn-outline-collect:hover { background: #eef4f8; }

/* =========================================================
   5. 販売エリアの主ボタン（単色シアンブルー・グラデ禁止・§17/§23）
   ========================================================= */
body[data-theme="collect"] .bg-purple-600 { background-color: var(--collect-cta) !important; }
body[data-theme="collect"] .hover\:bg-purple-700:hover { background-color: #0c6f88 !important; }
body[data-theme="collect"] .text-purple-600,
body[data-theme="collect"] .text-purple-700 { color: var(--collect-primary); }
body[data-theme="collect"] .border-purple-600 { border-color: var(--collect-primary); }
body[data-theme="collect"] .bg-purple-50 { background-color: #e8f6fa; }

/* =========================================================
   6. 商品カード（ライト・§14）
   ========================================================= */
body[data-theme="collect"] a.block.bg-white,
body[data-theme="collect"] .product-card {
    border-color: var(--collect-border);
    box-shadow: 0 4px 14px rgba(23, 32, 51, 0.05);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body[data-theme="collect"] a.block.bg-white:hover,
body[data-theme="collect"] .product-card:hover {
    transform: translateY(-2px);
    border-color: #a9cdda;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.09);
}

/* 検索・入力欄のフォーカス（§22。リングは消さない） */
body[data-theme="collect"] input:focus-visible,
body[data-theme="collect"] select:focus-visible,
body[data-theme="collect"] textarea:focus-visible {
    outline: none;
    border-color: var(--collect-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.13);
}
body[data-theme="collect"] a:focus-visible,
body[data-theme="collect"] button:focus-visible {
    outline: 2px solid var(--collect-primary);
    outline-offset: 2px;
}

/* =========================================================
   7. オリパカード（ダーク演出を残す唯一の商品枠・方法A・§18）
   ========================================================= */
body[data-theme="collect"] .oripa-card {
    background: linear-gradient(160deg, #111e31 0%, #0b1627 100%);
    border: 1px solid #293b56;
    color: var(--collect-brand-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
body[data-theme="collect"] .oripa-card .text-gray-900 { color: var(--collect-brand-text); }
body[data-theme="collect"] .oripa-card .text-gray-500 { color: var(--collect-brand-muted); }
body[data-theme="collect"] .oripa-card .bg-gray-100 { background-color: var(--collect-brand-bg); }
body[data-theme="collect"] .oripa-card .text-gray-300 { color: #3b4c66; }

/* =========================================================
   8. 高額・PSA系の控えめゴールド（タグ用途のみ・§15/§21）
   ========================================================= */
body[data-theme="collect"] .tag-premium {
    color: var(--collect-gold);
    border: 1px solid rgba(201, 155, 61, 0.45);
    background: rgba(201, 155, 61, 0.08);
}

/* =========================================================
   9. アニメーション抑制（§29）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    body[data-theme="collect"] *,
    body[data-theme="collect"] *::before,
    body[data-theme="collect"] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}