/* ==========================================================================
   sao-cardinal / sao-tokens.css
   设计令牌：艾恩葛朗特苍穹（背景层） + 白之玻璃（内容层） + 曜石黑系统（交互层）
   依据 PLAN.md §1 —— 禁止在本文件之外散落硬编码色值
   Phase 2：天际背景层取代纯白底，玻璃面板需有高光白边与深邃投影才能成立
   ========================================================================== */

/* —— 本地字体（SAO UI 同人字体 by darkblackswords @ deviantart，页脚署名） —— */
@font-face {
  font-family: 'SAOUIWelcome';
  src: url('../fonts/SAOUIWelcome-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'SAOUI';
  src: url('../fonts/SAOUI-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'SAOUI';
  src: url('../fonts/SAOUI-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
/* HUD 数字字体（自托管 woff2，仅 Latin 子集） */
@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* —— 字体栈 —— */
  --font-sao-welcome: 'SAOUIWelcome', 'SAOUI', 'Rajdhani', sans-serif;
  --font-sao: 'SAOUI', 'Rajdhani', sans-serif;
  --font-hud: 'Rajdhani', 'SAOUI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* ==========================================================================
     A. 艾恩葛朗特苍穹（背景层）—— Phase 2 新增
     顶部深邃天空蓝灰 → 中下部冷银灰；白玻璃面板靠它才显出层次
     ========================================================================== */
  --sky-top:        #1E293B;
  --sky-upper:      #29374B;
  --sky-mid:        #334155;
  --sky-low:        #64748B;
  --sky-pale:       #CBD5E1;
  --sky-bottom:     #E2E8F0;

  /* 天际：一条竖向渐变，body / 降级背景共用 */
  --sky-gradient: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-upper) 14%,
    var(--sky-mid) 32%,
    var(--sky-low) 56%,
    var(--sky-pale) 80%,
    var(--sky-bottom) 100%
  );

  /* 暗角遮罩：给平坦渐变加出空间纵深，避免"大白纸"观感 */
  --sky-vignette: radial-gradient(
    ellipse 120% 80% at 50% 42%,
    transparent 38%,
    rgba(15, 23, 42, 0.16) 74%,
    rgba(15, 23, 42, 0.34) 100%
  );

  /* 地平线雾：3D 透视网格消失点处的冷光 */
  --horizon-glow: radial-gradient(
    ellipse 62% 26% at 50% 100%,
    rgba(186, 230, 253, 0.42) 0%,
    rgba(148, 163, 184, 0.16) 42%,
    transparent 72%
  );

  /* ==========================================================================
     B. 白之玻璃（内容层）
     ========================================================================== */
  --world-bg: #EEF2F7;            /* 极窄屏 / 不支持渐变时的兜底底色 */
  --world-bg-tint: #E4E9F1;

  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-bg-soft: rgba(255, 255, 255, 0.62);
  --glass-border: 1px solid rgba(255, 255, 255, 0.95);
  --glass-border-soft: 1px solid rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px) saturate(165%);
  --glass-blur-soft: blur(14px) saturate(150%);

  /* 深邃投影：外浮 + 顶部高光 + 底部暗部（玻璃四要素） */
  --glass-shadow:
    0 24px 60px rgba(15, 23, 42, 0.34),
    0 6px 18px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  --glass-shadow-soft:
    0 14px 34px rgba(15, 23, 42, 0.24),
    0 3px 10px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* 兼容旧变量名（main.css 仍在引用） */
  --panel-bg: var(--glass-bg);
  --panel-bg-strong: var(--glass-bg-strong);
  --panel-bg-solid: #FFFFFF;
  --panel-border: rgba(255, 255, 255, 0.95);
  --panel-shadow: var(--glass-shadow);

  --text-primary: #1A1F2B;
  --text-secondary: #55607A;      /* 略提对比，压在玻璃上更清晰 */
  --text-tertiary: #7B8499;
  --text-hud: #FFFFFF;
  --divider: rgba(90, 102, 130, 0.22);

  /* ==========================================================================
     C. 曜石黑系统（交互层）
     ========================================================================== */
  --sys-bg: rgba(11, 14, 20, 0.82);
  --sys-bg-hover: rgba(16, 20, 30, 0.92);
  --sys-bg-solid: #0B0E14;
  --sys-border: rgba(255, 255, 255, 0.85);
  --sys-shadow: 0 8px 22px rgba(11, 14, 20, 0.35);

  /* SAO 资讯窗口顶栏（卡片头部深色斜切条） */
  --window-header-bg: #232834;
  --window-header-bg-2: #161A23;
  --window-header-text: rgba(255, 255, 255, 0.92);

  /* ==========================================================================
     D. SAO 语义色
     ========================================================================== */
  --sao-amber: #FF9900;
  --sao-amber-soft: rgba(255, 153, 0, 0.14);
  --sao-amber-glow: rgba(255, 153, 0, 0.5);
  --sao-amber-line: rgba(255, 153, 0, 0.72);
  --sao-cyan: #00B8D4;
  --sao-cyan-bright: #00E5FF;
  --sao-cyan-soft: rgba(0, 184, 212, 0.1);
  --sao-hp-green: #38E54D;
  --sao-hp-green-deep: #1B9E2C;
  --sao-hp-yellow: #FBC02D;
  --sao-hp-yellow-deep: #F57F17;
  --sao-hp-red: #FF1744;
  --sao-hp-red-deep: #B71C1C;
  --sao-btn-ok: #2979FF;
  --sao-btn-cancel: #FF1744;

  /* 流光边框：琥珀与青交织（<rb-border-beam> 用） */
  --beam-amber: #FF9900;
  --beam-cyan: #00E5FF;
  --beam-track: rgba(255, 255, 255, 0.18);

  /* —— HP 三段渐变（状态机直用） —— */
  --hp-grad-green: linear-gradient(180deg, #80FF8E 0%, var(--sao-hp-green) 55%, var(--sao-hp-green-deep) 100%);
  --hp-grad-yellow: linear-gradient(180deg, #FFF176 0%, var(--sao-hp-yellow) 55%, var(--sao-hp-yellow-deep) 100%);
  --hp-grad-red: linear-gradient(180deg, #FF8A80 0%, var(--sao-hp-red) 55%, var(--sao-hp-red-deep) 100%);

  /* —— 金属横梁 —— */
  --metal-bar: linear-gradient(90deg, #8E96A8 0%, #E4E8F0 50%, #8E96A8 100%);

  /* ==========================================================================
     E. 几何：切角与镶边（SAO 面板的骨架）
     ========================================================================== */
  --clip-notch: 14px;             /* 八角切角尺寸 */
  --clip-corner: 22px;            /* 卡片对角切角尺寸 */
  --clip-hud: 8px;                /* HUD 小按钮切角 */

  /* 八角切角（Hero / 模态 / 大面板） */
  --poly-panel: polygon(
    var(--clip-corner) 0,
    calc(100% - var(--clip-corner)) 0,
    100% var(--clip-corner),
    100% calc(100% - var(--clip-corner)),
    calc(100% - var(--clip-corner)) 100%,
    var(--clip-corner) 100%,
    0 calc(100% - var(--clip-corner)),
    0 var(--clip-corner)
  );

  /* 对角切角卡片：左上大切 + 右下小切 */
  --poly-card: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--clip-corner)),
    calc(100% - var(--clip-corner)) 100%,
    0 100%
  );

  /* HUD 小按钮切角 */
  --poly-btn: polygon(
    var(--clip-hud) 0,
    100% 0,
    100% calc(100% - var(--clip-hud)),
    calc(100% - var(--clip-hud)) 100%,
    0 100%,
    0 var(--clip-hud)
  );

  /* ==========================================================================
     F. 动效时长（与 app.js TOKENS 常量同步）
     ========================================================================== */
  --dur-fast: 0.42s;
  --dur-open: 0.35s;
  --dur-close: 0.22s;

  /* ==========================================================================
     G. 层级（低 → 高）
     ========================================================================== */
  --z-bg: -2;
  --z-ambient: -1;
  --z-content: 10;
  --z-footer: 20;
  --z-rail: 880;
  --z-hud: 900;
  --z-menu: 950;
  --z-modal: 2000;
  --z-transition: 2500;
  --z-linkstart: 3000;
  --z-shard: 9900;
  --z-cursor: 9999;

  /* —— 布局 —— */
  --stage-max: 1240px;
  --article-max: 860px;
  --radius: 0px;
}

/* ==========================================================================
   暗色 ordinal 模式（可选开关，整层变量覆盖）
   ========================================================================== */
[data-theme='ordinal'] {
  --sky-top: #03060C;
  --sky-upper: #050A14;
  --sky-mid: #071120;
  --sky-low: #0A1A2E;
  --sky-pale: #0D2135;
  --sky-bottom: #091826;
  --sky-vignette: radial-gradient(
    ellipse 120% 80% at 50% 42%,
    transparent 30%,
    rgba(0, 0, 0, 0.42) 78%,
    rgba(0, 0, 0, 0.66) 100%
  );
  --horizon-glow: radial-gradient(
    ellipse 62% 26% at 50% 100%,
    rgba(0, 229, 255, 0.3) 0%,
    rgba(0, 140, 190, 0.1) 44%,
    transparent 72%
  );

  --world-bg: #070A10;
  --world-bg-tint: #0C1119;

  --glass-bg: rgba(14, 20, 34, 0.86);
  --glass-bg-strong: rgba(16, 23, 38, 0.94);
  --glass-bg-soft: rgba(12, 18, 30, 0.7);
  --glass-border: 1px solid rgba(0, 229, 255, 0.4);
  --glass-border-soft: 1px solid rgba(0, 229, 255, 0.2);
  --glass-shadow:
    0 24px 60px rgba(0, 0, 0, 0.62),
    0 6px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(0, 229, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --glass-shadow-soft:
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(0, 229, 255, 0.14);

  --text-primary: #EBF4FF;
  --text-secondary: #93A2B6;
  --text-tertiary: #667586;
  --divider: rgba(0, 229, 255, 0.18);

  --sys-bg: rgba(0, 12, 20, 0.85);
  --sys-border: rgba(0, 229, 255, 0.5);
  --sao-cyan: #00E5FF;
  --sao-amber-soft: rgba(255, 153, 0, 0.12);

  --window-header-bg: #0A1420;
  --window-header-bg-2: #050B13;
  --beam-track: rgba(0, 229, 255, 0.16);
}