/* ==========================================================================
   设计令牌（design tokens）
   --------------------------------------------------------------------------
   风格参考 Google Material Design 3：以 token 驱动主题，组件层不出现裸色值。
   所有数值均为手工挑选，未引入 tailwind / bootstrap 等任何框架。
   ========================================================================== */

:root {
  /* ---------- 品牌主色（沿用 Google Blue，保证“Google 感”的识别度） ---------- */
  --md-primary: #1a73e8;
  --md-primary-hover: #1b66c9;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-primary-fixed-dim: #a8c7fa;

  /* ---------- 语义色：日出 / 日落 / 夜晚 ---------- */
  /* 这三个是本站的“内容色”，刻意与主色区分开：
     主色负责交互，语义色负责表达太阳状态，混用会让用户分不清哪个可点。 */
  --sun-rise: #f9ab00;
  --sun-rise-deep: #e8710a;
  --sun-set: #e8710a;
  --sun-set-deep: #d93025;
  --night: #1a3a8f;
  --night-soft: #4285f4;
  --twilight-civil: #7b61ff;
  --twilight-nautical: #4a3f9f;
  --twilight-astro: #2b2a5e;

  /* ---------- 中性面 ---------- */
  --md-bg: #f8f9fa;
  --md-surface: #ffffff;
  --md-surface-1: #f8fafd;
  --md-surface-2: #f1f4f9;
  --md-surface-3: #e9eef6;
  --md-surface-inverse: #303030;
  --md-on-surface: #1f1f1f;
  --md-on-surface-variant: #444746;
  --md-on-surface-faint: #6e7377;
  --md-outline: #dadce0;
  --md-outline-variant: #e8eaed;
  --md-outline-strong: #bdc1c6;

  /* ---------- 状态色 ---------- */
  --md-success: #1e8e3e;
  --md-warning: #f29900;
  --md-error: #d93025;
  --md-error-container: #fce8e6;

  /* ---------- 海拔阴影（Material elevation，两层叠加才有 Google 那种柔和感） ---------- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --md-elev-2: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);
  --md-elev-3: 0 1px 3px 0 rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --md-elev-4: 0 2px 3px 0 rgba(60, 64, 67, .30), 0 6px 10px 4px rgba(60, 64, 67, .15);

  /* ---------- 圆角（M3 的形状刻度） ---------- */
  --md-radius-xs: 4px;
  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-xl: 28px;
  --md-radius-full: 999px;

  /* ---------- 8px 栅格间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---------- 字体（全部走系统字体，不请求任何外部 webfont） ---------- */
  --font-sans: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* 时间数字用等宽：日出日落秒级跳动时，比例字体会让整行左右抖动 */
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "PingFang SC", monospace;

  --fs-display: clamp(40px, 11vw, 64px);
  --fs-h1: clamp(24px, 4.6vw, 32px);
  --fs-h2: clamp(19px, 3.2vw, 23px);
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;

  --lh-tight: 1.25;
  --lh-body: 1.7;

  /* ---------- 动效（M3 的标准缓动） ---------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.05, .7, .1, 1);
  --dur-short: 120ms;
  --dur-medium: 240ms;
  --dur-long: 400ms;

  /* ---------- 层级 ----------
     地图内部瓦片/控件层级很高，顶栏必须压过它们，否则滚动时会被地图盖住 */
  --z-map: 1;
  --z-sticky-under: 100;
  --z-header: 1200;
  --z-crumb: 1190;
  --z-dropdown: 1300;
  --z-fab: 1400;
  --z-toast: 1500;

  /* ---------- 由脚本实测写入 ----------
     窄屏顶栏会换行、面包屑栏高度也随字号变，锚点避让必须用实测值。 */
  --header-h: 60px;
  --crumb-h: 0px;
}

/* 跟随系统深色模式。地图形变、阴影与语义色都单独调过，
   不是简单地把背景刷黑——日落橙在深底上需要提高明度才不糊。 */
@media (prefers-color-scheme: dark) {
  :root {
    --md-bg: #131314;
    --md-surface: #1e1f20;
    --md-surface-1: #1b1c1d;
    --md-surface-2: #282a2c;
    --md-surface-3: #333537;
    --md-surface-inverse: #e3e3e3;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c4c7c5;
    --md-on-surface-faint: #9aa0a6;
    --md-outline: #444746;
    --md-outline-variant: #333537;
    --md-outline-strong: #5f6368;

    --md-primary: #a8c7fa;
    --md-primary-hover: #c2d7fb;
    --md-on-primary: #062e6f;
    --md-primary-container: #0842a0;
    --md-on-primary-container: #d3e3fd;

    /* 深色底上把两种橙的明度抬起来，否则 4.5:1 对比度不达标 */
    --sun-rise: #fdd663;
    --sun-rise-deep: #f9ab00;
    --sun-set: #fcad70;
    --sun-set-deep: #f28b82;
    --night: #8ab4f8;
    --night-soft: #a8c7fa;

    --md-error: #f28b82;
    --md-error-container: #5c1a16;

    --md-elev-1: 0 1px 2px 0 rgba(0, 0, 0, .6), 0 1px 3px 1px rgba(0, 0, 0, .4);
    --md-elev-2: 0 1px 2px 0 rgba(0, 0, 0, .6), 0 2px 6px 2px rgba(0, 0, 0, .4);
    --md-elev-3: 0 1px 3px 0 rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .4);
    --md-elev-4: 0 2px 3px 0 rgba(0, 0, 0, .6), 0 6px 10px 4px rgba(0, 0, 0, .4);
  }
}

/* 尊重“减少动态效果”：只保留必要的过渡，避免前庭不适 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}