/* ==========================================================================
   小宇宙科技教育 · 设计令牌 (Design Tokens)
   主色取自 logo 青蓝，底色深空蓝，点缀暖橙。
   全部硬编码色值都收在这里，改品牌色只改这一个文件。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- 品牌青蓝 */
  --brand-50:  #ECF9FC;
  --brand-100: #C9EEF6;
  --brand-200: #96DDEC;
  --brand-300: #5FC6DC;
  --brand-400: #22A6BF;
  --brand-500: #0E8FA8;   /* 主色 */
  --brand-600: #0B7A90;
  --brand-700: #076278;
  --brand-800: #054A5C;
  --brand-900: #053543;
  --brand-glow: rgba(14, 143, 168, .38);

  /* ---------------------------------------------------------- 深空蓝 */
  --ink-950: #020A12;
  --ink-900: #04121F;
  --ink-850: #051826;
  --ink-800: #071A2B;
  --ink-750: #0A2237;
  --ink-700: #0D2B44;
  --ink-600: #143A57;
  --ink-500: #1E4E70;

  /* ---------------------------------------------------------- 暖橙点缀 */
  --accent-300: #FCD9A8;
  --accent-400: #FBBF6B;
  --accent-500: #F59E42;
  --accent-600: #E07C1F;
  --accent-soft: #FFF4E6;

  /* ---------------------------------------------------------- 辅助色 */
  --violet-400: #8B85FF;
  --violet-500: #6C63FF;
  --violet-soft: #EFEDFF;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-soft: #E6FAF3;
  --sky-500: #2E9BE6;
  --sky-soft: #E8F4FE;
  --rose-500: #F2545B;
  --rose-soft: #FFECEC;
  --gold-500: #D4A017;
  --gold-soft: #FFF8E4;

  /* ---------------------------------------------------------- 中性色 */
  --n-0:   #FFFFFF;
  --n-25:  #FBFDFE;
  --n-50:  #F5F9FC;
  --n-100: #EDF3F8;
  --n-200: #DFE9F1;
  --n-300: #C6D5E1;
  --n-400: #93A8B9;
  --n-500: #6B8296;
  --n-600: #4C6275;
  --n-700: #35485A;
  --n-800: #22323F;
  --n-900: #101C26;

  --success: var(--emerald-500);
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* ---------------------------------------------------------- 语义别名 */
  --text-strong: var(--ink-900);
  --text-body:   var(--n-700);
  --text-muted:  var(--n-500);
  --text-invert: #FFFFFF;
  --text-invert-muted: rgba(255, 255, 255, .68);
  --line: var(--n-200);
  --line-soft: var(--n-100);
  --surface: #FFFFFF;
  --surface-alt: var(--n-50);
  --surface-sunken: var(--n-100);

  /* ---------------------------------------------------------- 字体 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-num: "DIN Alternate", "Barlow", "Inter", "SF Pro Display", system-ui,
    var(--font-sans);

  /* 字号阶 —— "大气"靠的就是大胆的字号对比 */
  --fs-display: clamp(2.75rem, 6.2vw, 5rem);
  --fs-h1: clamp(2.1rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3.1vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1rem, 1.35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-micro: .75rem;

  /* ---------------------------------------------------------- 间距节奏 */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 136px);
  --block-gap: clamp(36px, 5vw, 64px);

  /* ---------------------------------------------------------- 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------------------------------------------------------- 阴影 */
  --sh-xs: 0 1px 2px rgba(4, 18, 31, .04), 0 1px 3px rgba(4, 18, 31, .05);
  --sh-sm: 0 2px 6px rgba(4, 18, 31, .05), 0 6px 18px -8px rgba(4, 18, 31, .10);
  --sh-md: 0 10px 30px -12px rgba(4, 18, 31, .16), 0 2px 8px rgba(4, 18, 31, .05);
  --sh-lg: 0 26px 60px -24px rgba(4, 18, 31, .28), 0 6px 18px -10px rgba(4, 18, 31, .12);
  --sh-glow: 0 12px 40px -12px var(--brand-glow);
  --sh-accent: 0 12px 36px -14px rgba(245, 158, 66, .48);

  /* ---------------------------------------------------------- 动效 */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.4, 0, .2, 1);
  --e-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .18s;
  --t-base: .28s;
  --t-slow: .48s;

  /* ---------------------------------------------------------- 渐变 */
  --grad-brand: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
  --grad-ink: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-800) 45%, var(--brand-800) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-600) 100%);
  --grad-text: linear-gradient(100deg, var(--brand-300) 0%, var(--accent-400) 55%, var(--violet-400) 100%);

  --header-h: 74px;
  --header-h-mobile: 62px;
  --bottom-bar-h: 58px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 62px;
  }
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: .01ms;
    --t-base: .01ms;
    --t-slow: .01ms;
  }
}