/* ============================================================
 * 日语学习站 · 基础样式（base.css）
 * 职责：主题变量、全局基础排版、表单控件聚焦、滚动条补偿。
 * 所有页面首屏加载，必须先于其他样式文件引入。
 * ============================================================ */

/* ---------- 主题变量 ---------- */
:root {
  /* 和风色板 */
  --paper: #faf6ee;
  --paper-2: #f2ead9;
  --paper-3: #eae0ca;
  --ink: #2f2a24;
  --ink-soft: #6f675a;
  --ink-faint: #9c927f;
  --cinnabar: #b23a2e;      /* 朱红 */
  --cinnabar-deep: #8e2c22;
  --sakura: #f6e3dd;        /* 樱粉 */
  --sakura-deep: #d99a8d;
  --indigo: #33475f;        /* 蓝染 */
  --indigo-soft: #e3eaf1;
  --gold: #b9923e;
  --gold-soft: #f3e9d2;
  --green: #4c6b3f;
  --green-soft: #e6ecdf;

  /* 渐变（纵向，进度页 7 天图表柱条等使用） */
  --gradient-wa: linear-gradient(180deg, var(--cinnabar), var(--gold));

  /* 字体 */
  --font-serif: "Noto Serif JP", "Noto Serif SC", "STZhongsong", "SimSun", serif;
  --font-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;

  /* Bootstrap 主题色覆盖 */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-primary: var(--cinnabar);
  --bs-primary-rgb: 178, 58, 46;
  --bs-link-color: var(--cinnabar);
  --bs-link-hover-color: var(--cinnabar-deep);
  --bs-border-color: #e5dcc8;
  --bs-border-radius: 0.75rem;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(47, 42, 36, .08);
  --shadow-md: 0 6px 20px rgba(47, 42, 36, .10);
  --shadow-lg: 0 12px 40px rgba(47, 42, 36, .14);
}

/* ---------- 基础 ---------- */
/* 始终保留垂直滚动条槽位：页面切换时各页内容长度不同，
   滚动条时有时无会让视口宽度变化、文字重新换行而抖动 */
html {
  overflow-y: scroll;
}

/* 现代浏览器：固定滚动条槽位（效果同上，二者叠加兼容性最好） */
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

/* ---------- Bootstrap Modal 滚动条补偿覆盖 ---------- */
/* html 已通过 scrollbar-gutter / overflow-y 常驻滚动条槽位，
   Bootstrap 打开 modal 时仍会向 body 与 .modal 注入 padding-right 补偿，
   导致内容可用宽度突变、栅格重排、页面水平抖动——这里强制归零 */
body.modal-open,
.modal {
  padding-right: 0 !important;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(217, 154, 141, .10), transparent 60%),
    radial-gradient(900px 400px at -10% 20%, rgba(179, 146, 62, .08), transparent 55%),
    var(--paper);
  padding-bottom: 72px; /* 给移动端底部导航留空间 */
}

/* 字体就绪前隐藏页面内容（html.fonts-loading 由 head 内联脚本添加）：
   防止先以系统字体渲染、Noto 字体加载后再切换造成的文字抖动 */
html.fonts-loading body {
  visibility: hidden;
}

@media (min-width: 992px) {
  body { padding-bottom: 0; }
}

/* ---------- 表单控件（和风聚焦） ---------- */
/* 覆盖 Bootstrap 默认蓝色聚焦边框/光环：聚焦边框用蓝染，光环用淡蓝染 */
.form-control:focus,
.form-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 .25rem rgba(51, 71, 95, .12);
}

/* 关闭按钮聚焦：覆盖 Bootstrap 默认蓝色光环，改为和风朱红（细边框、深色） */
.btn-close:focus {
  box-shadow: 0 0 0 .125rem rgba(178, 58, 46, .45);
}

h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  letter-spacing: .02em;
}