/* ============================================================
   AUBUK · 设计令牌 tokens.css  v2 ——「深青墨 × 电光青 × 琥珀金」
   现代瑞士极简 · 数字终端气质（ui-ux-pro-max 驱动重做）
   ============================================================ */

/* 自托管可变字体：Space Grotesk（仅拉丁字符，中文字符自动回落系统黑体） */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 品牌深青（Teal-Ink，主交互/主按钮/链接） ---- */
  --brand-50:  #EFFAF7;
  --brand-100: #D7F3EC;
  --brand-200: #AEE7DB;
  --brand-300: #7AD6C6;
  --brand-400: #43C0AC;
  --brand-500: #17A894;
  --brand-600: #0D9488;
  --brand-700: #0F766E;   /* 主按钮底 / 正文级链接（AA 达标） */
  --brand-800: #0E5C57;
  --brand-900: #0B4441;
  --brand-950: #042524;

  /* ---- 电光青（Cyan，辅助强调 / 连接感） ---- */
  --cyan-50:  #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;

  /* ---- 琥珀金（Amber，屏幕高亮/数字点缀，克制使用） ---- */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-800: #92400E;

  /* ---- 墨蓝（Ink-Navy，深色背景/页脚/深卡） ---- */
  --ink-950: #050B16;
  --ink-900: #0A1424;
  --ink-800: #132239;
  --ink-700: #1B3354;
  --ink-600: #2C4B6E;

  /* ---- 中性色（冷灰，略带青味，保证三端统一） ---- */
  --n0:    #FFFFFF;
  --n50:   #F6F9F9;
  --n100:  #EDF2F1;
  --n200:  #DFE7E5;
  --n300:  #C5D2CF;
  --n400:  #98A8A4;
  --n500:  #71827D;
  --n600:  #51635E;
  --n700:  #3A4B47;
  --n800:  #24322F;
  --n900:  #131D1B;

  /* ---- 语义别名 ---- */
  --color-bg:         var(--n0);
  --color-bg-soft:    var(--n50);
  --color-bg-tint:    #EDF7F4;            /* 青绿浅区块底 */
  --color-bg-ivory:   #FBFDFC;            /* Hero 极浅底 */
  --color-border:     var(--n200);
  --color-border-strong: var(--n300);
  --color-text:       #1B2A38;            /* 正文主色 ≈ ink 灰化 */
  --color-text-2:     #5C7076;            /* 次要文字 */
  --color-text-3:     #8CA09B;            /* 弱化/占位 */
  --color-on-brand:   #FFFFFF;
  --color-link:       var(--brand-700);
  --color-link-hover: var(--brand-800);

  /* ---- 语义色 ---- */
  --success:      #0E9F6E;
  --success-bg:   #E5F6EF;
  --warning:      #B45309;
  --warning-bg:   #FEF0DA;
  --error:        #E5484D;
  --error-bg:     #FDECEC;
  --info:         #0E7490;
  --info-bg:      #E3F5F9;

  /* ---- 渐变 ---- */
  --grad-brand: linear-gradient(135deg, #0E5C57 0%, #0F766E 48%, #0D9488 100%);
  --grad-brand-bright: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
  --grad-ink: linear-gradient(140deg, #060D1B 0%, #0A2540 52%, #0C3F4A 100%);
  --grad-ink-card: linear-gradient(150deg, #0A2340 0%, #0C3B47 100%);
  --grad-live: linear-gradient(150deg, #083042 0%, #0E5E57 100%);
  --grad-soft: linear-gradient(180deg, #ECF6F3 0%, #FFFFFF 74%);
  --grad-amber: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --grad-fade: linear-gradient(180deg, rgba(13,148,136,0) 0%, rgba(13,148,136,.05) 100%);

  /* ---- 字体 ---- */
  --font-sans: 'Space Grotesk', 'HarmonyOS Sans SC', 'MiSans', 'PingFang SC',
               'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei',
               system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-num:  'Space Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ---- 排版：字号（响应式以 clamp 覆盖） ---- */
  --fs-hero: clamp(40px, 5.6vw, 64px);
  --fs-h1:   clamp(30px, 4vw, 44px);
  --fs-h2:   clamp(27px, 3.4vw, 38px);
  --fs-h3:   clamp(22px, 2.4vw, 28px);
  --fs-h4:   19px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-s:    14px;
  --fs-xs:   12.5px;

  --lh-hero: 1.12;
  --lh-h1:   1.22;
  --lh-heading: 1.35;
  --lh-body: 1.75;
  --lh-small: 1.62;

  --tracking-wide: .02em;
  --tracking-display: .01em;

  /* ---- 间距（基础单位 4px） ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-7: 32px;  --space-8: 40px;  --space-9: 48px;
  --space-10: 64px; --space-11: 80px; --space-12: 96px;
  --sec-y: clamp(72px, 8.5vw, 124px);
  --sec-gap: clamp(44px, 5vw, 72px);

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 2px rgba(10, 20, 36, .05), 0 2px 6px rgba(10, 20, 36, .05);
  --shadow-md: 0 10px 26px -8px rgba(10, 42, 44, .14);
  --shadow-lg: 0 26px 52px -16px rgba(7, 30, 34, .20);
  --shadow-lift: 0 20px 40px -14px rgba(10, 60, 64, .18);

  /* ---- 焦点与环 ---- */
  --ring-focus: 0 0 0 3px var(--n0), 0 0 0 6px rgba(13, 148, 136, .35);
  --ring-brand: 0 0 0 4px rgba(13, 148, 136, .18);

  /* ---- 动效 ---- */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(.2, .65, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);

  /* ---- 层级 ---- */
  --z-content: 1;
  --z-nav: 1000;
  --z-drawer: 1100;
  --z-modal: 2000;
  --z-toast: 3000;

  /* ---- 尺寸 ---- */
  --container: 1200px;
  --gutter: 24px;
  --gutter-mobile: 16px;
  --header-h: 68px;
  --header-h-mobile: 60px;
  --card-pad: 24px;
}