/**
 * 品牌站 Design Tokens
 * 所有变量遵循 brand-design-tokens.md 约束文档；长度单位统一为 rem（基准 1rem = 16px）
 * Figma: https://www.figma.com/design/0Wiz374mPQJ8YGI2Dudb02
 */

:root {
  /* ========== 基础色板 ========== */
  --brand-black: #151515;
  --brand-white: #F5F5F5;
  --brand-pure-white: #FFFFFF;
  --brand-gold: #B5931B;

  /* ========== 文字颜色 ========== */
  --brand-text-primary: #1D2129;
  --brand-text-heading: #141A28;
  --brand-text-secondary: #7B7B7B;
  --brand-text-tertiary: #BFBFBF;
  --brand-text-meta: #7E7F81;
  --brand-text-inverse: #FFFFFF;
  --brand-text-inverse-secondary: #979797;
  --brand-text-inverse-muted: #5E5E5E;

  /* ========== 背景颜色 ========== */
  --brand-bg-page: #F5F5F5;
  --brand-bg-dark: #151515;
  --brand-bg-card: #FFFFFF;
  --brand-bg-overlay: rgba(0, 0, 0, 0.4);
  --brand-bg-pill: rgba(245, 245, 245, 0.4);
  --brand-bg-live: rgba(15, 222, 62, 0.2);
  /* /data 联赛筛选横条 */
  --brand-bg-data-leagues-bar: #7B7B7B;

  /* ========== 状态颜色 ========== */
  --brand-live: #34C759;
  --brand-accent-gold: #B5931B;
  --brand-streak-red: #FF3B30;
  --brand-streak-red-bg: #FFEBEA;
  --brand-rate-bg: #F2F2F2;
  --brand-wld-win: #F53F3F;
  --brand-wld-win-bg: #FFEBE9;
  --brand-wld-draw: #00B42B;
  --brand-wld-draw-bg: #EBF9EC;
  --brand-wld-loss-bg: #F7F8F9;
  /* 列表/快讯等无封面时的占位区，略深于页面灰底，与白卡片对比更清晰 */
  --brand-thumb-placeholder-bg: #e2e4e8;

  /* ========== 视频页颜色 ========== */
  --brand-video-tag: #FF9500;
  --brand-video-thumb-placeholder: #6e6e6e;
  /* Hero：主播放器 / 播放列表 横向比例 8 : 2 */
  --brand-video-hero-main-flex: 8;
  --brand-video-hero-side-flex: 2;

  /* ========== 边框颜色 ========== */
  --brand-border-dark: #424242;
  --brand-border-tab: #1D2129;
  --brand-border-light: #E5E5E5;

  /* 线宽（业务样式引用，避免裸 px） */
  --brand-border-width: 0.0625rem; /* 1px */
  --brand-border-width-thick: 0.125rem; /* 2px */
  --brand-outline-width: 0.125rem; /* 2px */

  /* ========== 字体族 ========== */
  --brand-font-zh: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --brand-font-en: 'Heebo', 'Open Sans', sans-serif;
  --brand-font-heading-en: 'Montserrat', 'Heebo', sans-serif;

  /* ========== 字号档位 ========== */
  --brand-font-xs: 0.75rem;
  --brand-font-sm: 0.875rem;
  --brand-font-base: 1rem;
  --brand-font-md: 1.125rem;
  --brand-font-lg: 1.25rem;
  --brand-font-xl: 1.4rem;
  --brand-font-2xl: 1.6rem;
  --brand-font-3xl: 1.8rem;
  --brand-font-section: 1.4rem;

  /* ========== 字重 ========== */
  --brand-weight-regular: 400;
  --brand-weight-medium: 500;
  --brand-weight-semibold: 600;
  --brand-weight-bold: 700;

  /* ========== 行高 ========== */
  --brand-leading-tight: 1.2;
  --brand-leading-normal: 1.4;
  --brand-leading-relaxed: 1.6;

  /* ========== 间距 ========== */
  --brand-space-2xs: 0.25rem;
  --brand-space-xs: 0.5rem;
  --brand-space-sm: 0.75rem;
  --brand-space-md: 1rem;
  --brand-space-lg: 1.5rem;
  --brand-space-xl: 2rem;
  --brand-space-2xl: 2.5rem;
  --brand-space-3xl: 3.625rem;
  --brand-space-4xl: 5.5rem;
  --brand-space-section: 2.5rem;
  /* Figma 辅助档位（仅语义化引用，避免魔法数字散落） */
  --brand-space-18: 1.125rem;
  --brand-space-20: 1.25rem;
  --brand-space-36: 2.25rem;
  --brand-space-45: 2.8125rem;
  --brand-space-54: 3.375rem;

  /* ========== 语义间距（组合档位，对齐 Figma 走查） ========== */
  --brand-space-page-top: var(--brand-space-2xl);
  --brand-space-stack: var(--brand-space-section);
  --brand-space-section-heading: var(--brand-space-3xl);
  --brand-space-nav-x: var(--brand-space-2xl);
  --brand-space-nav-links: var(--brand-space-lg);
  --brand-space-header-tools: var(--brand-space-36);
  --brand-space-hero-teams: var(--brand-space-2xl);
  --brand-space-hero-dots: var(--brand-space-20);
  --brand-space-hero-dots-bottom: var(--brand-space-lg);
  --brand-space-tab-pad-y: var(--brand-space-2xs);
  --brand-space-tab-pad-x: var(--brand-space-xs);
  --brand-space-nav-item-pad-y: var(--brand-space-2xs);
  --brand-space-nav-item-pad-b: var(--brand-space-xs);
  --brand-space-standings-stats: var(--brand-space-45);
  --brand-space-teams-list: var(--brand-space-18);
  --brand-space-team-name-gap: var(--brand-space-xs);
  --brand-space-watch-btn-x: var(--brand-space-36);
  --brand-space-footer-top-gap: var(--brand-space-xs);
  --brand-space-empty-y: var(--brand-space-2xl);
  --brand-space-empty-x: var(--brand-space-md);
  --brand-empty-visual-w: 7.5rem;
  --brand-space-expert-cards: var(--brand-space-54);
  /* 回到顶部浮标（靠右下） */
  --brand-back-top-btn: 3rem;
  --brand-back-top-btn-sm: 2.75rem;
  --brand-back-top-offset-end: var(--brand-space-md);
  --brand-back-top-offset-y: var(--brand-space-lg);
  /* 专家推荐轮播：箭头与内容区间距 16px */
  --brand-expert-carousel-gap-inline: 1rem;
  /* 专家推荐轮播箭头图标（约 24×42px @16） */
  --brand-expert-carousel-arrow-w: 1.5rem;
  --brand-expert-carousel-arrow-h: 2.625rem;
  --brand-expert-carousel-arrow-hit-w: 2.875rem;
  --brand-expert-carousel-arrow-hit-h: 2.75rem;
  /* 专家头像：外层正方形容器边长（与 .brand-expert-card-top 高度对齐） */
  --brand-expert-avatar-outer: 6rem;
  /* 内层斜切区域：左上+右下较小，右上+左下较大（顺时针 TL TR BR BL） */
  --brand-expert-avatar-inner-radius-sharp: 1.555rem;
  --brand-expert-avatar-inner-radius-loose: 2.85rem;

  /* 热门直播：斑马纹。浅色行用 #5E5E5ECC 须叠在浅底上才可见，故表容器用 --brand-bg-page */
  --brand-bg-live-table: var(--brand-bg-page);
  --brand-bg-live-row: #5e5e5e;
  --brand-bg-live-row-alt: #5e5e5ecc;
  /* 赛程页侧栏：当前联赛项 */
  --brand-bg-live-sidebar-active: #3e3e3e;
  /* 情报卡底（Figma 有利 / 不利） */
  --brand-intel-fav-bg: #ebf9ec;
  --brand-intel-unfav-bg: #ffebe9;
  /* 深底列表比分区 */
  --brand-score-pill-bg: rgba(255, 255, 255, 0.1);
  --brand-radius-score-pill: 1rem;
  /* 排行榜：胜平负列与积分列与数字等宽对齐（表头与行共用） */
  --brand-standings-col-wdl: minmax(4.75rem, max-content);
  --brand-standings-col-pts: minmax(2.75rem, max-content);
  --brand-standings-header-bg: #1d2129;
  --brand-standings-dot-on: #285aff;
  --brand-standings-dot-off: #151515;
  --brand-live-league-min-width: 8.5rem;
  --brand-live-tag-bg: rgba(52, 199, 89, 0.22);
  --brand-live-tag-border: rgba(52, 199, 89, 0.45);

  /* ========== 布局 ========== */
  /* 主栏:侧栏 = 2:1，与中间 gap 之和 = content */
  --brand-layout-content: 90rem;
  --brand-layout-page: 120rem;
  --brand-layout-header-h: 5.25rem;
  --brand-layout-main-gap: 1.5rem;
  --brand-layout-main-width: 59rem;
  --brand-layout-sidebar-width: 29.5rem;

  /* ========== 圆角 ========== */
  --brand-radius-sm: 0.25rem;
  --brand-radius-md: 0.5rem;
  --brand-radius-pill: 6.25rem;

  /* ========== 阴影 ========== */
  --brand-shadow-card: 0.625rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
}