/**
 * Portal 主题变量：颜色、字号、间距
 * 支持：明亮模式(light) | 暗黑模式(dark) | 跟随系统(system)
 * 通过 html 的 data-portal-theme 属性或 .portal-theme-* 类切换
 */

/* ========== 字号/间距变量（可在后台「主题设置」调整） ========== */
/* 5 档字号：相对 html 根字号（rem），根字号在 portal.css 用 vmin+clamp 控制，低分辨率必变小 */
:root {
  --portal-font-content: 1rem;
  --portal-font-caption: 0.875rem;
  --portal-font-block: 1.0625rem;
  --portal-font-subtitle: 1.125rem;
  --portal-font-title: 1.5rem;
  --portal-font-xs: 0.8125rem;
  --portal-font-md: 1rem;
  --portal-font-2xl: 1.3125rem;
  --portal-font-sm: var(--portal-font-caption);
  --portal-font-base: var(--portal-font-content);
  --portal-font-lg: var(--portal-font-block);
  --portal-font-xl: var(--portal-font-subtitle);
  --portal-font-3xl: var(--portal-font-title);

  /*
   * 间距：全部用 rem，随 html 根字号与文字同比例缩放。
   * 后台 portal_space_* 若注入 px 仍会覆盖对应变量。
   */
  --portal-space-micro: 0.125rem;
  --portal-space-3: 0.1875rem;
  --portal-space-5: 0.3125rem;
  --portal-space-2xs: 0.25rem;
  --portal-space-xs: 0.375rem;
  --portal-space-sm: 0.5rem;
  --portal-space-md: 0.75rem;
  --portal-space-16: 1rem;
  --portal-space-10: 0.625rem;
  --portal-space-14: 0.875rem;
  --portal-space-15: 0.9375rem;
  --portal-space-18: 1.125rem;
  --portal-space-xl: 1.25rem;
  --portal-space-lg: 1.5rem;
  --portal-space-2xl: var(--portal-space-lg);
  --portal-space-3xl: 2rem;
  --portal-space-40: 2.5rem;
  --portal-space-48: 3rem;
  --portal-space-56: 3.5rem;
  --portal-space-80: 5rem;
  --portal-content-width: 70%;
  --portal-content-max: 1400px;
  --portal-content-sidebar-ratio: 7;
  --portal-sidebar-ratio: 3;
  --portal-header-h: clamp(3.25rem, 2.5vh + 2.75rem, 4.75rem);
  --portal-radius-sm: 0.25rem;
  --portal-radius-md: 0.375rem;
  /*
   * 页面/卡片边距：rem + vmin，与正文字号同步缩小，低分辨率不再「边距死大」。
   */
  --portal-page-padding: clamp(0.625rem, 2.2vmin, 1.5rem);
  --portal-page-padding-lg: clamp(1.25rem, 4vmin, 3.75rem);
  --portal-page-padding-sm: clamp(0.625rem, 2.5vmin, 1rem);
  --portal-page-padding-xs: clamp(0.5rem, 2vmin, 0.75rem);
  --portal-page-padding-2xs: clamp(0.375rem, 1.5vmin, 0.5rem);
  --portal-card-padding: clamp(0.75rem, 2vmin, 1.5rem);
  --portal-card-padding-mobile: clamp(0.625rem, 2.2vmin, 1rem);

  /* 图片/图标/头像：与根字号联动（全站引用） */
  --portal-img-logo-max-h: 2.5rem;
  --portal-img-logo-max-w: min(15rem, 42vw);
  --portal-icon-sm: 1.5rem;
  --portal-icon-md: 2.25rem;
  --portal-icon-lg: 2.5rem;
  --portal-icon-xl: 2rem;
  --portal-thumb-48: 3rem;
  --portal-thumb-64: 4rem;
  /* 移动端队徽等略小于 64 的方块 */
  --portal-thumb-52: 3.25rem;
  --portal-hero-play-btn: 3.75rem;
  --portal-sidebar-thumb-w: 6.25rem;
  --portal-sidebar-thumb-h: var(--portal-hero-play-btn);
  --portal-video-player-max-h: min(28rem, 70vh);
  /* 首页赛程卡片宽度：随根字号与视口 */
  --portal-schedule-card-width: min(15rem, 72vw);
  --portal-block-min-tall: 7.5rem;
  --portal-empty-pad-y: 2.5rem;
  /* 回到顶部浮标（靠右下） */
  --portal-back-top-btn: var(--portal-space-48);
  --portal-back-top-btn-sm: 2.75rem;
  --portal-back-top-offset-end: var(--portal-space-16);
  --portal-back-top-offset-y: var(--portal-space-lg);
}

/* ========== 明亮模式（默认） ========== */
:root,
html.portal-theme-light,
[data-portal-theme="light"] {
  --portal-primary: #151515;
  --portal-primary-light: rgba(21, 21, 21, 0.1);
  --portal-rate: #dc2626;
  --portal-rate-light: #FFF2F0;
  --portal-success: #22c55e;
  --portal-success-light: #ECF9EC;
  --portal-warning: #f59e0b;
  --portal-live: #2563eb;
  --portal-special: #7c3aed;
  
  --portal-bg: #F4F5F5;
  --portal-bg-card: #ffffff;
  --portal-bg-hover: #F7F8F9;
  --portal-bg-muted: #f3f4f6;
  --portal-bg-alt: #e5e7eb;
  
  --portal-text: #1f2937;
  --portal-text-heading: #111827;
  --portal-text-secondary: #4E5969;
  --portal-text-muted: #86909c;
  --portal-text-placeholder: #9ca3af;
  --portal-text-inverse: #ffffff;
  
  --portal-border: #e6e6e6;
  --portal-border-light: #f0f0f0;
  --portal-border-muted: #E5E6EB;
  --portal-divider: #c9cdd4;
  
  --portal-header-bg: #ffffff;
  --portal-header-border: #e6e6e6;
  --portal-header-text: #333;
  --portal-header-text-muted: #6b7280;
  --portal-nav-item: #999;
  --portal-nav-item-hover: #333;
  --portal-nav-item-act-bg: #f0f0f0;
  
  --portal-footer-bg: #ffffff;
  --portal-footer-text: #374151;
  --portal-footer-text-muted: #6b7280;
  --portal-footer-border: rgba(0,0,0,.08);
  --portal-newsletter-input-bg: #f3f4f6;
  --portal-newsletter-btn-bg: #151515;
  --portal-newsletter-btn-icon: #ffffff;
  
  --portal-shadow: 0 4px 10px rgba(0,0,0,0.1);
  --portal-rank-1: #FF2D55;
  --portal-rank-2: #FF9500;
  --portal-rank-3: #FFBD18;
  --portal-rank-n: #BFBFBF;
}

/* ========== 暗黑模式 ========== */
html.portal-theme-dark,
[data-portal-theme="dark"] {
  --portal-primary: #6b7de8;
  --portal-primary-light: rgba(107, 125, 232, 0.2);
  --portal-rate: #f87171;
  --portal-rate-light: rgba(248, 113, 113, 0.15);
  --portal-success: #4ade80;
  --portal-success-light: rgba(74, 222, 128, 0.2);
  --portal-warning: #fbbf24;
  --portal-live: #60a5fa;
  --portal-special: #a78bfa;
  
  --portal-bg: #0f1419;
  --portal-bg-card: #1a1f26;
  --portal-bg-hover: #252b33;
  --portal-bg-muted: #252b33;
  --portal-bg-alt: #2d353e;
  
  --portal-text: #e5e7eb;
  --portal-text-heading: #f3f4f6;
  --portal-text-secondary: #9ca3af;
  --portal-text-muted: #6b7280;
  --portal-text-placeholder: #4b5563;
  --portal-text-inverse: #ffffff;
  
  --portal-border: #374151;
  --portal-border-light: #2d353e;
  --portal-border-muted: #374151;
  --portal-divider: #4b5563;
  
  --portal-header-bg: #1a1f26;
  --portal-header-border: #374151;
  --portal-header-text: #f3f4f6;
  --portal-header-text-muted: #9ca3af;
  --portal-nav-item: #9ca3af;
  --portal-nav-item-hover: #f3f4f6;
  --portal-nav-item-act-bg: rgba(255,255,255,0.1);
  
  --portal-footer-bg: #1a1f26;
  --portal-footer-text: #ffffff;
  --portal-footer-text-muted: #9ca3af;
  --portal-footer-border: rgba(255,255,255,.08);
  --portal-newsletter-input-bg: rgba(255, 255, 255, 0.2);
  --portal-newsletter-placeholder: rgba(255, 255, 255, 0.6);
  --portal-newsletter-btn-bg: #ffffff;
  --portal-newsletter-btn-icon: #1d2129;
  
  --portal-shadow: 0 4px 10px rgba(0,0,0,0.4);
  --portal-rank-1: #ff6b8a;
  --portal-rank-2: #fbbf24;
  --portal-rank-3: #fde047;
  --portal-rank-n: #6b7280;
}

/* ========== 跟随系统（仅在 prefers-color-scheme: dark 时应用暗黑变量） ========== */
@media (prefers-color-scheme: dark) {
  html.portal-theme-system,
  html[data-portal-theme="system"] {
    --portal-primary: #6b7de8;
    --portal-primary-light: rgba(107, 125, 232, 0.2);
    --portal-rate: #f87171;
    --portal-rate-light: rgba(248, 113, 113, 0.15);
    --portal-success: #4ade80;
    --portal-success-light: rgba(74, 222, 128, 0.2);
    --portal-warning: #fbbf24;
    --portal-live: #60a5fa;
    --portal-special: #a78bfa;
    --portal-bg: #0f1419;
    --portal-bg-card: #1a1f26;
    --portal-bg-hover: #252b33;
    --portal-bg-muted: #252b33;
    --portal-bg-alt: #2d353e;
    --portal-text: #e5e7eb;
    --portal-text-heading: #f3f4f6;
    --portal-text-secondary: #9ca3af;
    --portal-text-muted: #6b7280;
    --portal-text-placeholder: #4b5563;
    --portal-text-inverse: #ffffff;
    --portal-border: #374151;
    --portal-border-light: #2d353e;
    --portal-border-muted: #374151;
    --portal-divider: #4b5563;
    --portal-header-bg: #1a1f26;
    --portal-header-border: #374151;
    --portal-header-text: #f3f4f6;
    --portal-header-text-muted: #9ca3af;
    --portal-nav-item: #9ca3af;
    --portal-nav-item-hover: #f3f4f6;
    --portal-nav-item-act-bg: rgba(255,255,255,0.1);
    --portal-footer-bg: #1a1f26;
    --portal-footer-text: #ffffff;
    --portal-footer-text-muted: #9ca3af;
    --portal-footer-border: rgba(255,255,255,.08);
    --portal-newsletter-input-bg: rgba(255, 255, 255, 0.2);
    --portal-newsletter-placeholder: rgba(255, 255, 255, 0.6);
    --portal-newsletter-btn-bg: #ffffff;
    --portal-newsletter-btn-icon: #1d2129;
    --portal-shadow: 0 4px 10px rgba(0,0,0,0.4);
    --portal-rank-1: #ff6b8a;
    --portal-rank-2: #fbbf24;
    --portal-rank-3: #fde047;
    --portal-rank-n: #6b7280;
  }
}

/* ≤768px：卡片内边距用较小一档（与 PC 均为 clamp，移动端上限更低） */
@media (max-width: 768px) {
  :root {
    --portal-card-padding: var(--portal-card-padding-mobile);
  }
}