/* =====================================================
   星连星科技 · 设计令牌（Design Tokens）
   双主题：html[data-theme="light"] / html[data-theme="dark"]
   规则：组件样式只允许引用变量，禁止硬编码色值
   ===================================================== */

:root {
  /* 品牌色（两主题共用色相，仅明度调整） */
  --brand-700: #083FB2;
  --brand-600: #0B4FD8;
  --brand-500: #1A66F0;
  --brand-400: #4C8DFF;
  --sky-400: #12A6F5;
  --cyan-400: #22D3EE;
  --violet-400: #6D4AFF;
  --green-500: #16803C;
  --green-400: #34D399;

  --gradient-brand: linear-gradient(120deg, #0B4FD8 0%, #12A6F5 55%, #22D3EE 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(11, 79, 216, .12), rgba(34, 211, 238, .10));
  --gradient-text: linear-gradient(100deg, #0B4FD8 0%, #1A66F0 45%, #12A6F5 100%);

  /* 排版 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
               'Microsoft YaHei', 'Source Han Sans CN', 'Inter', sans-serif;
  --font-latin: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --fs-12: .75rem;   --fs-13: .8125rem;  --fs-14: .875rem;
  --fs-16: 1rem;     --fs-18: 1.125rem;  --fs-20: 1.25rem;
  --fs-24: 1.5rem;   --fs-30: 1.875rem;  --fs-38: 2.375rem;
  --fs-48: 3rem;     --fs-60: 3.75rem;

  /* 间距（8pt 栅格） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px;

  /* 结构：--container 是“内容区宽度”（不含两侧留白），
     .shell 用 calc 叠加 gutter，保证 gutter 变化时内容区宽度恒定 */
  --container: 1176px;
  --gutter: 20px;
  /* 移动端吸底条占位高度：<768px 时由 components.css 赋值，
     body 底部留白与 .fab-top 定位共用，避免两处写死不同步 */
  --mobilebar-h: 0px;
  /* 直角化：星图语言里没有「圆润」，全部收到 0–3px，
     视觉上靠 hairline 与留白建立层次，而不是阴影和圆角 */
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 3px;
  --radius-pill: 2px;

  /* 图纸网格：单元格之间用 1px 线共边，形成连续格架 */
  --hairline: 1px;
  --cell: var(--surface);
  /* 两个主题都保持深色的底：用于「印章」这类需要固定深色承载的内容
     （注意不要用 --ink-reverse，它在夜间主题是浅色） */
  --surface-invert: #060A14;

  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

/* ---------------- 日间主题 ---------------- */
:root,
html[data-theme="light"] {
  color-scheme: light;

  --bg-0: #FFFFFF;
  --bg-1: #F5F7FB;
  --bg-2: #EDF1F8;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-glass: rgba(255, 255, 255, .78);
  /* 吸顶条专用：78% 的玻璃会让下方截图透上来干扰阅读，
     吸顶元素必须接近不透明 */
  --surface-glass-solid: rgba(255, 255, 255, .94);

  --text-1: #0B1220;
  --text-2: #41506B;
  /* 三档灰的取值链：白底 5.9 / bg-1 5.5 / 最浅的 tint 底 5.0。
     原先 #66707F 在带色底的区块上只有 4.18–4.48，未达 WCAG AA 4.5 */
  --text-3: #5B6574;
  --text-inv: #FFFFFF;

  --border: rgba(11, 18, 32, .09);
  --border-strong: rgba(11, 18, 32, .16);
  --border-brand: rgba(11, 79, 216, .22);

  --accent: var(--brand-600);
  --accent-soft: rgba(11, 79, 216, .08);
  --accent-soft-2: rgba(11, 79, 216, .14);
  /* 实心填充面（按钮底色）：与 .btn 上的白字必须满足 AA 4.5，
     所以不能直接用 --accent —— 深色主题的 --accent 是浅蓝，白字只有 3.2 */
  --accent-fill: var(--brand-600);
  --accent-fill-hover: var(--brand-700);

  --shadow-xs: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-sm: 0 2px 8px rgba(11, 18, 32, .06);
  --shadow-md: 0 12px 32px rgba(11, 18, 32, .08);
  --shadow-lg: 0 24px 64px rgba(11, 18, 32, .12);
  --shadow-brand: 0 10px 30px rgba(11, 79, 216, .18);

  --grid-line: rgba(11, 18, 32, .05);
  --rule: rgba(11, 18, 32, .10);
  --rule-strong: rgba(11, 18, 32, .2);
  --ink-reverse: #060A14;
  --glow: radial-gradient(circle at 50% 0%, rgba(11, 79, 216, .10), transparent 62%);
  --glow-2: radial-gradient(circle at 88% 18%, rgba(34, 211, 238, .14), transparent 58%);
  --noise-opacity: .022;
  --header-bg: rgba(255, 255, 255, .82);
}

/* ---------------- 夜间主题 ---------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #060A14;
  --bg-1: #0A1120;
  --bg-2: #101a2e;
  --surface: #0E1729;
  --surface-2: #131E33;
  --surface-glass: rgba(14, 23, 41, .66);
  --surface-glass-solid: rgba(6, 10, 20, .95);

  --text-1: #F2F6FF;
  --text-2: #A8B6CE;
  --text-3: #7386A3;
  --text-inv: #060A14;

  --border: rgba(148, 178, 220, .14);
  --border-strong: rgba(148, 178, 220, .26);
  --border-brand: rgba(76, 141, 255, .34);

  --accent: #4C8DFF;
  --accent-soft: rgba(76, 141, 255, .12);
  --accent-soft-2: rgba(76, 141, 255, .20);
  /* #1A66F0 上的白字 4.99 —— 浅蓝 #4C8DFF 只有 3.2，实心面必须压深一档 */
  --accent-fill: var(--brand-500);
  --accent-fill-hover: var(--brand-600);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, .6);
  --shadow-brand: 0 12px 36px rgba(26, 102, 240, .28);

  --grid-line: rgba(148, 178, 220, .06);
  --rule: rgba(148, 178, 220, .16);
  --rule-strong: rgba(148, 178, 220, .30);
  --ink-reverse: #F2F6FF;
  --glow: radial-gradient(circle at 50% 0%, rgba(26, 102, 240, .22), transparent 60%);
  --glow-2: radial-gradient(circle at 85% 15%, rgba(34, 211, 238, .16), transparent 55%);
  --noise-opacity: .045;
  --header-bg: rgba(6, 10, 20, .74);

  --gradient-text: linear-gradient(100deg, #7FB0FF 0%, #4C8DFF 45%, #22D3EE 100%);
}

/* ---------------- 兼容层：旧页面变量别名 ---------------- */
/* 未迁移的页面仍引用旧变量名，这里做映射，保证换主题不炸版 */
:root {
  --deep-0: var(--bg-0);
  --deep-1: var(--bg-1);
  --deep-2: var(--surface);
  --deep-3: var(--surface-2);
  --deep-4: var(--border);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --border-subtle: var(--border);
  --border-glow: var(--border-brand);
  --gradient-primary: var(--gradient-brand);
  --gradient-soft: var(--gradient-brand-soft);
  --shadow-glow: var(--shadow-brand);
}