/* ============================================================
   比比昂 Bibian — Design Tokens
   深色優先的跨境代標／代購介面（4px 網格、銳角、柔和陰影）
   品牌色直接取自 LOGO：琥珀 #FFBC50、紅 #FF0741
   元件只讀 semantic token，不要直接寫死 primitive 色碼。
   ============================================================ */

:root {
  /* ---------- Primitive：品牌色（取樣自 color_symbol.png） ---------- */
  --bb-amber-300: #ffd58a;
  --bb-amber-400: #ffcb74;
  --bb-amber-500: #ffbc50;  /* 主色：LOGO 六角形 */
  --bb-amber-600: #f0a62f;
  --bb-amber-700: #c07f16;

  --bb-red-400: #ff3b66;
  --bb-red-500: #ff0741;    /* 副色：LOGO 小六角，只給促銷／倒數／危險 */
  --bb-red-600: #e30039;

  --bb-gray-000: #ffffff;
  --bb-gray-100: #f6f6f6;
  --bb-gray-200: #cfcfcf;
  --bb-gray-300: #a9a9a9;
  --bb-gray-400: #8a8a8a;
  --bb-gray-500: #676767;
  --bb-gray-600: #444444;
  --bb-gray-700: #2b2b2b;
  --bb-gray-800: #1f1f1f;
  --bb-gray-900: #141414;

  --bb-blue-500: #0000ee;
  --bb-blue-300: #8ab4ff;

  --bb-green-500: #67c23a;
  --bb-orange-500: #e6a23c;
  --bb-slate-500: #909399;

  /* ---------- Primitive：館別色（取樣自真站 2026-08-28）----------
     來源頁：bibian.co.jp/auction.php 與 bibian.co.jp/fleamarket。
     只用來標示「你現在在哪一館」，不參與 CTA、不取代 --bb-brand。
     兩個主題共用同一組實色（跟 --bb-bar 一樣是版面的定錨），
     只有淡底 -soft 隨主題換。 */
  --bb-yellow-500: #ffda45;   /* 拍賣館：Yahoo! 系的黃 */
  --bb-pink-500:   #f72e52;   /* 市集館：フリマ 系的桃紅 */
  --bb-vermilion-500: #f44336;   /* 代購館：日本代購的朱紅 */

  /* ---------- 間距：4px 網格 ---------- */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-8: 32px;
  --bb-space-10: 40px;
  --bb-space-12: 48px;
  --bb-space-16: 64px;
  --bb-space-20: 80px;

  /* ---------- 字級：base 14px ---------- */
  --bb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans",
    Roboto, Helvetica, Arial, sans-serif;
  --bb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --bb-text-xs: 12px;
  --bb-text-sm: 13px;
  --bb-text-base: 14px;
  --bb-text-md: 16px;
  --bb-text-lg: 18px;
  --bb-text-xl: 20px;
  --bb-text-2xl: 26px;
  --bb-text-3xl: 34px;
  --bb-text-4xl: 44px;

  /* 2026-08-20 收緊一級。brief 給的是 tight(1)，中文內文 1 會黏在一起，
     所以取「照著收但讀得下去」的值，這就是配合版型調整的那一段。 */
  --bb-leading-tight: 1.15;
  --bb-leading-snug: 1.35;
  --bb-leading-normal: 1.45;
  --bb-leading-loose: 1.7;   /* 2026-08-25 新增：說明類長段落用，比 normal 再鬆一級。
                                flat 改版時行高整體收了一級，長文讀起來太擠才補這個 */

  --bb-weight-regular: 400;
  --bb-weight-medium: 500;
  --bb-weight-bold: 600;

  --bb-tracking-caps: 0.08em;

  /* ---------- 圓角：銳角語彙 ---------- */
  --bb-radius-xs: 2px;
  --bb-radius-sm: 3px;   /* chip */
  --bb-radius-md: 4px;   /* input、card、面板 */
  --bb-radius-lg: 5px;   /* button */
  --bb-radius-pill: 20px;
  --bb-radius-circle: 100%;

  /* ---------- 元件高度 ---------- */
  --bb-control-sm: 24px;
  --bb-control-md: 32px;
  --bb-control-lg: 40px;
  --bb-control-xl: 48px;
  --bb-spinner-size: 42px;

  /* ---------- 動態 ---------- */
  --bb-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --bb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bb-duration: 0.3s;
  --bb-duration-fast: 0.2s;
  --bb-transition-all: all var(--bb-duration) var(--bb-ease);
  --bb-transition-fast: all var(--bb-duration-fast) var(--bb-ease);

  /* ---------- 疊層 ---------- */
  --bb-z-base: 1;
  --bb-z-raised: 12;
  --bb-z-dropdown: 101;
  --bb-z-sticky: 900;
  --bb-z-modal: 2006;
  --bb-z-tooltip: 2020;
  --bb-z-nav: 2100;

  /* ---------- 版面 ---------- */
  --bb-container: 1030px;
  --bb-gutter: 20px;

  /* ============================================================
     Semantic：元件只讀這一段。以下為「淺色」定義。
     ============================================================ */
  --bb-canvas: var(--bb-gray-000);
  --bb-surface: var(--bb-gray-000);
  --bb-surface-raised: var(--bb-gray-000);
  --bb-surface-sunken: var(--bb-gray-100);
  --bb-field: var(--bb-gray-000);

  --bb-text: #141414;
  --bb-text-muted: var(--bb-gray-500);
  --bb-text-faint: var(--bb-gray-400);
  --bb-text-on-brand: #1a1200;   /* 琥珀底上的字：取 LOGO 的黑 */
  --bb-text-on-hot: #ffffff;
  --bb-text-on-success: #ffffff;  /* 綠底上的字（LINE、已完成狀態） */
  /* QR code 專用：明暗兩個主題都固定，跟著主題翻轉會掃不到 */
  --bb-qr-dark: #111111;
  --bb-qr-light: #ffffff;

  /* 疊在品牌色底上的暗色遮罩（琥珀底不隨主題變，所以這三個也不變） */
  --bb-scrim-weak: rgba(0, 0, 0, 0.12);
  --bb-scrim: rgba(0, 0, 0, 0.16);
  --bb-scrim-strong: rgba(0, 0, 0, 0.22);

  /* 警示／成功色在淺底上的可讀變體（品牌色有 --bb-brand-ink，這兩個原本沒有，
     導致 .is-caution 這種最該讀懂的警語對比只有 2.19:1） */
  --bb-warning-ink: #8a5a00;
  --bb-success-ink: #1f6b32;

  --bb-border: var(--bb-gray-200);
  --bb-border-strong: var(--bb-gray-400);

  /* 深灰會員條：兩個主題都維持深底，是版面的定錨 */
  --bb-bar: #444444;
  --bb-bar-text: #ffffff;
  --bb-bar-muted: #c9c9c9;
  --bb-bar-border: #5a5a5a;

  --bb-brand: var(--bb-amber-500);
  --bb-brand-hover: var(--bb-amber-400);
  --bb-brand-active: var(--bb-amber-600);
  --bb-brand-soft: rgba(255, 188, 80, 0.16);
  --bb-brand-ink: var(--bb-amber-700);  /* 淺底上要讀得到的琥珀文字 */

  --bb-hot: var(--bb-red-500);
  --bb-hot-hover: var(--bb-red-400);
  --bb-hot-soft: rgba(255, 7, 65, 0.12);

  --bb-link: var(--bb-blue-500);
  --bb-focus: var(--bb-amber-700);

  --bb-success: var(--bb-green-500);
  --bb-warning: var(--bb-orange-500);
  --bb-danger: var(--bb-red-500);
  --bb-info: var(--bb-slate-500);
  --bb-info-soft: rgba(22, 105, 122, 0.12);  /* 集運（自己寄來）標籤底 */
  --bb-warning-soft: rgba(214, 122, 0, 0.10);  /* 風險警語塊底（.warnlist） */

  /* Flat（2026-08-20）：改用髮絲邊框分層，不用柔和陰影。
     名稱保留是刻意的——34 頁引用了 42 處，改名等於全站大改。
     「陰影」現在的意思是「這一層要多一條界線」。 */
  --bb-shadow-subtle: none;
  --bb-shadow-sm: none;
  --bb-shadow-md: 0 0 0 1px var(--bb-border);
  --bb-shadow-lg: 0 0 0 1px var(--bb-border-strong);
  --bb-shadow-xl: 0 0 0 1px var(--bb-border-strong);
  --bb-shadow-hover: none;

  /* 館別色語意層：ch = channel。ink 是「疊在該館色上面要讀得到的字色」 */
  --bb-ch-auction: var(--bb-yellow-500);
  --bb-ch-auction-ink: #1a1a1a;
  --bb-ch-auction-soft: rgba(255, 218, 69, 0.18);
  --bb-ch-flea: var(--bb-pink-500);
  /* 白字疊在 #f72e52 上只有 3.84:1，過不了 WCAG AA 的 4.5。
     近黑 #1a1a1a 是 4.53:1，剛好過（2026-08-28 審查抓到）。
     黃底那組 #ffda45 + #1a1a1a 是 12.74:1，兩館用同一個 ink 值。 */
  --bb-ch-flea-ink: #1a1a1a;
  --bb-ch-flea-soft: rgba(247, 46, 82, 0.10);
  --bb-ch-buy: var(--bb-vermilion-500);
  /* #f44336 配白字是 3.68:1，不到 AA 的 4.5；近黑是 4.73:1 */
  --bb-ch-buy-ink: #1a1a1a;
  --bb-ch-buy-soft: rgba(244, 67, 54, 0.10);

  /* 商品圖磚的分類色（2026-08-28）。
     設計稿禁外連圖片，商品圖是 CSS 畫出來的剪影——每個分類一個主色，
     背景色由它 color-mix 出來，所以只有一個 token 要維護。
     刻意壓低彩度：這是「攝影棚裡的商品」不是「色塊」，太鮮會蓋掉商品卡上的價格與倒數。 */
  --bb-tile-figure: #b07a9c;
  --bb-tile-card: #4a7fb5;
  --bb-tile-camera: #5d6b78;
  --bb-tile-watch: #8a7a54;
  --bb-tile-model: #6f8f74;
  --bb-tile-disc: #7a6f96;
  --bb-tile-apparel: #b08560;
  --bb-tile-game: #7b6ba8;

  --bb-logo: url("assets/logo-on-light.png");
}

/* ---------- 深色（本站預設樣貌） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-canvas: var(--bb-gray-900);
    --bb-surface: var(--bb-gray-800);
    --bb-surface-raised: var(--bb-gray-700);
    --bb-surface-sunken: #0d0d0d;
    --bb-field: var(--bb-gray-700);

    --bb-text: var(--bb-gray-000);
    --bb-text-muted: var(--bb-gray-300);
    --bb-text-faint: var(--bb-gray-500);

    --bb-border: var(--bb-gray-600);
    --bb-border-strong: var(--bb-gray-500);

    --bb-bar: #0a0a0a;
    --bb-bar-border: #333333;

    --bb-ch-auction-soft: rgba(255, 218, 69, 0.16);

    /* 深色底下同一組色會糊掉，整組提亮 */
    --bb-tile-figure: #d9a3c6;
    --bb-tile-card: #7fb0e0;
    --bb-tile-camera: #93a3b1;
    --bb-tile-watch: #c2ad7c;
    --bb-tile-model: #9cc3a2;
    --bb-tile-disc: #ab9ec8;
    --bb-tile-apparel: #dcae83;
    --bb-tile-game: #ab9ada;
    --bb-ch-flea-soft: rgba(247, 46, 82, 0.20);
    --bb-ch-buy-soft: rgba(244, 67, 54, 0.20);
    --bb-brand-soft: rgba(255, 188, 80, 0.14);
    --bb-brand-ink: var(--bb-amber-500);
    --bb-hot-soft: rgba(255, 7, 65, 0.18);
    --bb-warning-ink: #ffcf7a;
    --bb-success-ink: #7fd694;
    --bb-info-soft: rgba(22, 105, 122, 0.22);
    --bb-warning-soft: rgba(214, 122, 0, 0.20);
    --bb-link: var(--bb-blue-300);
    --bb-focus: var(--bb-amber-500);

    --bb-shadow-subtle: none;
    --bb-shadow-sm: none;
    --bb-shadow-md: 0 0 0 1px var(--bb-border);
    --bb-shadow-lg: 0 0 0 1px var(--bb-border-strong);
    --bb-shadow-xl: 0 0 0 1px var(--bb-border-strong);
    --bb-shadow-hover: none;

    --bb-logo: url("assets/logo-on-dark.png");
  }
}

/* 使用者手動選深色時一律勝出 */
:root[data-theme="dark"] {
  --bb-canvas: var(--bb-gray-900);
  --bb-surface: var(--bb-gray-800);
  --bb-surface-raised: var(--bb-gray-700);
  --bb-surface-sunken: #0d0d0d;
  --bb-field: var(--bb-gray-700);

  --bb-text: var(--bb-gray-000);
  --bb-text-muted: var(--bb-gray-300);
  --bb-text-faint: var(--bb-gray-500);

  --bb-border: var(--bb-gray-600);
  --bb-border-strong: var(--bb-gray-500);

  --bb-bar: #0a0a0a;
  --bb-bar-border: #333333;

  --bb-ch-auction-soft: rgba(255, 218, 69, 0.16);

  /* 深色底下同一組色會糊掉，整組提亮 */
  --bb-tile-figure: #d9a3c6;
  --bb-tile-card: #7fb0e0;
  --bb-tile-camera: #93a3b1;
  --bb-tile-watch: #c2ad7c;
  --bb-tile-model: #9cc3a2;
  --bb-tile-disc: #ab9ec8;
  --bb-tile-apparel: #dcae83;
  --bb-tile-game: #ab9ada;
  --bb-ch-flea-soft: rgba(247, 46, 82, 0.20);
  --bb-ch-buy-soft: rgba(244, 67, 54, 0.20);
  --bb-brand-soft: rgba(255, 188, 80, 0.14);
  --bb-brand-ink: var(--bb-amber-500);
  --bb-hot-soft: rgba(255, 7, 65, 0.18);
  --bb-info-soft: rgba(22, 105, 122, 0.22);
  --bb-warning-soft: rgba(214, 122, 0, 0.20);
  --bb-warning-ink: #ffcf7a;
  --bb-success-ink: #7fd694;
  --bb-link: var(--bb-blue-300);
  --bb-focus: var(--bb-amber-500);

  --bb-shadow-subtle: none;
  --bb-shadow-sm: none;
  --bb-shadow-md: 0 0 0 1px var(--bb-border);
  --bb-shadow-lg: 0 0 0 1px var(--bb-border-strong);
  --bb-shadow-xl: 0 0 0 1px var(--bb-border-strong);
  --bb-shadow-hover: none;

  --bb-logo: url("assets/logo-on-dark.png");
}

/* ---------- 全域焦點環：鍵盤操作才顯示 ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 1px;
  border-radius: var(--bb-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}