/* ============================================================
   news-en · base.css

   设计 token + reset + 全局基础样式 + frosted-glass utility
   两套配色跟随系统 (prefers-color-scheme)
   ============================================================ */

/* ---- 颜色 token (浅色为默认；深色 @media 覆盖) ----
   主色：报纸暖红 NYT-ish（#c8482a 类），不饱和、editorial
   中性：warm-tinted 灰 / paper white（配合暖红更协调）
*/
:root {
  /* 背景层（warm-tinted） */
  --bg:           #fafaf7;      /* paper warm white */
  --bg-2:         #f4f3ee;      /* 区段底 */
  --bg-card:      #ffffff;      /* 卡片底 */
  --bg-hover:     #efeee8;      /* hover 态 */
  --bg-active:    #e6e4dc;      /* active 态 */

  /* 文字（warm-tinted dark） */
  --text:         #1a1816;      /* 正文 */
  --text-2:       #57534e;      /* 次要 */
  --text-3:       #a8a29e;      /* 弱化 */
  --text-link:    var(--accent);

  /* 边框 / 分隔 */
  --border:       #e7e5e0;
  --border-soft:  #f0eee9;

  /* 主色 / 状态色（暖红主调 + 配套 warm 状态色） */
  --accent:        #c8482a;       /* warm brick red, editorial */
  --accent-hover:  #a83a20;
  --accent-soft:   #fce4dc;       /* 主色淡背景 */
  --danger:        #b91c1c;       /* deeper red 区别于主色 */
  --danger-soft:   #fde8e8;
  --warning:       #b45309;       /* amber, 偏暖 */
  --warning-soft:  #fef3c7;
  --success:       #047857;       /* deep emerald, editorial */
  --success-soft:  #d1fae5;

  /* 字幕里命中生词本的词的底色（warm-tinted 配合暖红主调） */
  --vocab-new-bg:      hsl(10,  75%, 91%);    /* 淡暖红 */
  --vocab-learning-bg: hsl(38,  85%, 88%);    /* 暖黄 */
  /* known 不标 */

  /* 当前句高亮 */
  --cue-active-stripe: var(--accent);
  --cue-active-bg:     rgba(200, 72, 42, 0.06);

  /* 毛玻璃 frosted */
  --frost-bg:     rgba(255, 254, 250, 0.72);
  --frost-border: rgba(0, 0, 0, 0.08);
  --frost-blur:   12px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* 圆角 */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* 字号 */
  --t-xs:   0.75rem;     /* 12 */
  --t-sm:   0.875rem;    /* 14 */
  --t-base: 1rem;        /* 16 */
  --t-lg:   1.125rem;    /* 18 */
  --t-xl:   1.25rem;     /* 20 */
  --t-2xl:  1.5rem;      /* 24 */
  --t-3xl:  1.875rem;    /* 30 */
  --t-4xl:  2.25rem;     /* 36 */

  /* 行高 */
  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  /* 间距 (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* 过渡 */
  --tr-fast: 120ms ease;
  --tr:      200ms ease;

  /* z-index 层级 */
  --z-nav:    10;
  --z-popover: 50;
  --z-modal:  100;
  --z-toast:  200;
}

/* 深色 token —— 公共 mixin（通过 :where() 让 :not(...) 那条不增加 specificity）
   两个触发场景：
     1. data-theme="dark" 强制 dark
     2. (无 data-theme 或 data-theme="auto") + 系统是 dark
*/
:root[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: dark;
}
:root:not([data-theme="light"]):not([data-theme="dark"]),
:root[data-theme="auto"] {
  color-scheme: light dark;
}

/* 深色 token 主体 — 两组选择器共用 */
:root[data-theme="dark"] {
  --bg:        #100f0e;
  --bg-2:      #17161a;
  --bg-card:   #1c1b1f;
  --bg-hover:  #25232a;
  --bg-active: #2e2c33;

  --text:      #f4f1ec;
  --text-2:    #a8a29e;
  --text-3:    #6b6863;
  --text-link: var(--accent);

  --border:      #2e2c33;
  --border-soft: #1f1e23;

  --accent:        #e87958;
  --accent-hover:  #f0907a;
  --accent-soft:   rgba(232, 121, 88, 0.16);
  --danger:        #fb7185;
  --danger-soft:   rgba(251, 113, 133, 0.16);
  --warning:       #fbbf24;
  --warning-soft:  rgba(251, 191, 36, 0.16);
  --success:       #34d399;
  --success-soft:  rgba(52, 211, 153, 0.16);

  --vocab-new-bg:      hsla(10,  65%, 55%, 0.20);
  --vocab-learning-bg: hsla(38,  80%, 55%, 0.18);

  --cue-active-bg:     rgba(232, 121, 88, 0.10);

  --frost-bg:     rgba(28, 27, 31, 0.65);
  --frost-border: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* 自动模式（没 data-theme 或 "auto"）+ 系统是 dark → 同样套用 dark tokens */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  :root[data-theme="auto"] {
    --bg:        #100f0e;
    --bg-2:      #17161a;
    --bg-card:   #1c1b1f;
    --bg-hover:  #25232a;
    --bg-active: #2e2c33;

    --text:      #f4f1ec;
    --text-2:    #a8a29e;
    --text-3:    #6b6863;
    --text-link: var(--accent);

    --border:      #2e2c33;
    --border-soft: #1f1e23;

    --accent:        #e87958;
    --accent-hover:  #f0907a;
    --accent-soft:   rgba(232, 121, 88, 0.16);
    --danger:        #fb7185;
    --danger-soft:   rgba(251, 113, 133, 0.16);
    --warning:       #fbbf24;
    --warning-soft:  rgba(251, 191, 36, 0.16);
    --success:       #34d399;
    --success-soft:  rgba(52, 211, 153, 0.16);

    --vocab-new-bg:      hsla(10,  65%, 55%, 0.20);
    --vocab-learning-bg: hsla(38,  80%, 55%, 0.18);

    --cue-active-bg:     rgba(232, 121, 88, 0.10);

    --frost-bg:     rgba(28, 27, 31, 0.65);
    --frost-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* ---- 字体栈 ---- */
:root {
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui,
    sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", Georgia, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---- Reset (modern minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- 全局基础 ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- 通用 utility ---- */

/* frosted glass 浮层（划词弹窗 / 折叠菜单 / admin 卡片 / 登录卡片） */
.frost {
  background: var(--frost-bg);
  backdrop-filter: blur(var(--frost-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(180%);
  border: 1px solid var(--frost-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* 普通卡片（主内容区，不毛玻璃） */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: var(--lh-tight);
  border-radius: var(--r);
  border: 1px solid transparent;
  background: var(--bg-hover);
  color: var(--text);
  transition: background var(--tr-fast), border-color var(--tr-fast);
  user-select: none;
  -webkit-user-select: none;
}
.btn:hover { background: var(--bg-active); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  color: white;
}
.btn--primary:hover { background: var(--accent-hover); color: white; }

.btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.btn--ghost:hover { background: var(--bg-hover); }

.btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* input */
.input {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-sm);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 容器 */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
@media (min-width: 768px) {
  .container { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

/* 视觉辅助 */
.hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--sp-6) 0; }

/* 文本色简写 */
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }

/* 字号简写 */
.t-xs { font-size: var(--t-xs); }
.t-sm { font-size: var(--t-sm); }
.t-lg { font-size: var(--t-lg); }
.t-xl { font-size: var(--t-xl); }

/* 隐藏滚动条但保留滚动能力 */
.scroll-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hidden::-webkit-scrollbar { display: none; }

/* 仅屏幕阅读器可见 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* iOS Safari 安全区域 */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* chip-group toggle 按钮组（主题切换 / vocab 筛选 / 字幕模式 多处用）*/
.chip-group {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 2px;
  font-size: var(--t-sm);
}
.chip-group button {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 4px;
  color: var(--text-2);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.chip-group button.is-active {
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}