/* ==========================================================================
   秋泽吉数 · 网页前端 · 主题适配层（单一主题：宣纸浅色 + 靛蓝）
   --------------------------------------------------------------------------
   职责：把 shared/design-tokens.css 的全局令牌，映射到前端既有的
        --bg/--bg2/--panel/--panel2/--ink/--ink-dim/--gold/--gold-hi/
        --gold-deep/--violet/--line 这套语义变量上。

   为什么需要这一层：前端既有 700+ 行 CSS 使用自己的变量命名（--gold 表示
   主强调色、--panel 表示卡片面）。直接改成 --brand 会波及全部既有规则。
   这里做一次映射，共享层换色时前端自动跟随，既有规则无需改动。

   设计要求：全站只允许一个主题，不提供换肤。
   历史沿革：本文件原含五套主题（玄学星夜 / 日漫·马卡龙 / 粉樱 / 天空 /
   薄荷）的 body[data-theme] 定义，现全部移除，统一为一套。
   ========================================================================== */

/* ==========================================================================
   1. 主题映射（唯一一套）
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- 前端既有变量名 → 新设计系统取值 ---- */
  /* 表面 */
  --bg:        #f7f7f9;   /* 页面底 */
  --bg2:       #f2f2f6;   /* 次级底 */
  --panel:     #ffffff;   /* 卡片面 */
  --panel2:    #f7f7f9;   /* 卡片内浅底 */

  /* 文字 */
  --ink:       #2c2c3d;   /* 正文 */
  --ink-dim:   #5c5c70;   /* 次要文字 */

  /* 强调色（前端把 --gold 当主强调色用） */
  --gold:      #3d4db7;   /* 主色 · 靛蓝 */
  --gold-hi:   #33419c;   /* 悬停 / 高亮 */
  --gold-deep: #2a3682;   /* 深色 */
  --violet:    #0f8b8d;   /* 辅助色 · 青竹 */

  /* 分割线 */
  --line:      #e3e3ea;

  /* ---- 映射到共享层令牌 ---- */
  --brand:        #3d4db7;
  --brand-deep:   #2a3682;
  --brand-soft:   #eef0fb;
  --brand-softer: #f6f7fd;
  --brand-ring:   rgba(61,77,183,.26);
  --brand-line:   #c7cdf0;

  --bg-app:       #f7f7f9;
  --bg-sunk:      #ebebf1;
  --card:         #ffffff;
  --card-raised:  #ffffff;
  --ink-app:      #2c2c3d;
  --ink-strong:   #16161f;
  --dim:          #5c5c70;
  --dim-2:        var(--dim-2);
  --line-app:     #e3e3ea;
  --line-soft:    #eeeef3;
  --line-strong:  #d0d0da;

  --green:  #12894a;  --green-soft:  #e6f5ec;  --green-ink:  #0c6335;
  --red:    #c5304a;  --red-soft:    #fdecef;  --red-ink:    #97223a;
  --orange: #b55a00;  --orange-soft: #fdf0e3;  --orange-ink: #8a4400;
  --blue:   #1a63b8;  --blue-soft:   #e8f1fb;  --blue-ink:   #124a8a;
  --purple: var(--purple);  --purple-soft: var(--purple-soft);  --purple-ink: #502d8a;
  --gold-app: #9a7200; --gold-app-soft: var(--gold-soft); --gold-app-ink: var(--gold-ink);

  /* 渐变 */
  --grad-brand:   linear-gradient(135deg, #4a5ac4, #3d4db7);
  --grad-brand-r: linear-gradient(135deg, #3d4db7, #4a5ac4);
  --grad-soft:    linear-gradient(135deg, #f6f7fd, #eef0fb);
  --grad-glow:    linear-gradient(135deg, rgba(61,77,183,.14), rgba(15,139,141,.10));

  /* 焦点与阴影 */
  --focus-ring:   0 0 0 3px rgba(61,77,183,.26);
  --shadow-xs:    0 1px 2px rgba(28,28,42,.04);
  --shadow-sm:    0 1px 2px rgba(28,28,42,.04), 0 2px 6px rgba(28,28,42,.05);
  --shadow:       0 1px 3px rgba(28,28,42,.05), 0 6px 16px rgba(28,28,42,.06);
  --shadow-md:    0 2px 4px rgba(28,28,42,.05), 0 10px 24px rgba(28,28,42,.07);
  --shadow-lg:    0 4px 8px rgba(28,28,42,.06), 0 18px 40px rgba(28,28,42,.09);
  --shadow-xl:    0 8px 16px rgba(28,28,42,.07), 0 28px 64px rgba(28,28,42,.12);
  --shadow-pop:   0 24px 72px rgba(28,28,42,.22), 0 4px 12px rgba(28,28,42,.08);
  --brand-glow:   rgba(61,77,183,.18);

  /* body 背景光晕（前端原有的双层径向渐变，改为跟随主题） */
  --bg-glow-a: rgba(61,77,183,.08);
  --bg-glow-b: rgba(15,139,141,.06);

  /* 强调色底上的文字色 / 文字专用色
     亮强调色只能做装饰，做文字在浅底上不达标 —— 这三档是经对比度计算的文字安全色 */
  --on-accent:        #ffffff;
  --text-accent:      #3d4db7;   /* 白底 8.0:1 */
  --text-accent-soft: #5a5a78;   /* 白底 7.4:1 */
  --text-violet:      #0a6365;   /* 白底 7.0:1 */
}

/* ==========================================================================
   2. 主题按钮（单主题下不再切换，仅作状态展示）
   ========================================================================== */
.theme-btn {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--dim);
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.theme-btn:hover {
  color: var(--brand);
  border-color: var(--brand-line);
  background: var(--brand-softer);
}

/* ==========================================================================
   3. 组件在单主题下的外观
   说明：以下规则原本按主题分支（body[data-theme="anime"] 等），
   统一主题后合并为一条，取值全部走令牌。
   ========================================================================== */

/* 时钟数字用主色 */
.clock .t b { color: var(--brand); }

/* 号码格：白底 + 主色描边 + 柔光内高光 */
.tile, .tile.gold {
  background: linear-gradient(180deg, #ffffff, var(--panel2));
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}
.tile .num { text-shadow: 0 0 14px rgba(61,77,183,.18); }

/* 选中态：柔光扩散，不用重投影 */
.tab.on, .game-btn.on, .mode-chip.on, .kj-game.on {
  box-shadow: var(--shadow-brand);
}

/* 主操作按钮：主色投影 */
.go-btn, .gen-btn, .luck-chip {
  box-shadow: var(--shadow-brand);
}

/* 星点装饰改用主色 */
.stars .star { background: rgba(61,77,183,.42); }

/* ==========================================================================
   4. 旧属性兜底
   若浏览器残留 data-theme（旧版本曾写入 localStorage），
   下面的规则确保任何 data-theme 取值都不会改变外观。
   ========================================================================== */
body[data-theme] {
  --bg:        #f7f7f9;
  --bg2:       #f2f2f6;
  --panel:     #ffffff;
  --panel2:    #f7f7f9;
  --ink:       #2c2c3d;
  --ink-dim:   #5c5c70;
  --gold:      #3d4db7;
  --gold-hi:   #33419c;
  --gold-deep: #2a3682;
  --violet:    #0f8b8d;
  --line:      #e3e3ea;
}