/*
 * 设计令牌镜像 —— 颜色与 anime_ui/lib/pub/theme/colors.dart 一一对应，圆角对应 lib/pub/const/radius.dart。
 * 官网与产品同一套颜色，用户从首页进入 /anime/ 时视觉不跳。
 * 改令牌：先改产品端，再同步这里；全站只从这里取色，不在别处写色值。
 */
:root {
  /* 底色：最深 → 主 → 卡片 */
  --c-bg-deepest: #08090f;
  --c-bg: #0d0e14;
  --c-surface: #151620;
  --c-surface-2: #1a1b28;
  --c-surface-3: #212232;

  /* 主色紫：只做微光、主按钮、进行中的圆点，全页不出现第二种强调色 */
  --c-primary: #8b7cf6;
  --c-primary-soft: #a99ef0;
  --c-primary-deep: #6d5dd3;
  --c-primary-subtle: rgba(139, 124, 246, 0.12);
  --c-primary-glow: rgba(139, 124, 246, 0.35);
  --c-primary-aura: rgba(139, 124, 246, 0.16);
  /* 输入框聚焦描边：对应产品登录卡 auth_glass_card.dart 的 primary 55%，不用满色紫 */
  --c-primary-line: rgba(139, 124, 246, 0.55);

  /* 状态圆点：与产品同一套语义（完成 = 绿，进行中 = 主色，待处理 = 灰） */
  --c-success: #22c55e;

  /* 文字 */
  --c-text: #e4e4ed;
  --c-text-strong: #f5f5fb;
  --c-text-2: #c9c9d6;
  --c-text-3: #9898ac;
  --c-text-4: #6b6b7e;

  /* 线与玻璃 */
  --c-line: #222230;
  --c-line-2: #2a2b3c;
  --c-hairline: rgba(255, 255, 255, 0.08);
  --c-glass: rgba(21, 22, 32, 0.72);

  --c-error: #ef4444;

  /*
   * 按钮：对齐 anime_ui/lib/pub/theme/app_button_styles.dart。
   * 主操作 = 强调胶囊 emphasisPill（主色 16% 浅底 + 28% 同色描边 + 主色字），不用实心紫块（02.4 按钮体系）；
   * 次要 = 幽灵胶囊 ghostPill（主文字色 6% 弱底 + 10% 弱描边 + 86% 浅字）。
   * 悬停 = 产品里 Material 叠的那层 8% 同色；禁用 = 8% 底 + 42% 字。
   */
  --btn-emphasis-bg: rgba(139, 124, 246, 0.16);
  --btn-emphasis-bg-hover: rgba(139, 124, 246, 0.24);
  --btn-emphasis-border: rgba(139, 124, 246, 0.28);
  --btn-emphasis-border-hover: rgba(139, 124, 246, 0.44);
  --btn-emphasis-bg-disabled: rgba(139, 124, 246, 0.08);
  --btn-emphasis-fg-disabled: rgba(139, 124, 246, 0.42);
  --btn-ghost-bg: rgba(228, 228, 237, 0.06);
  --btn-ghost-bg-hover: rgba(228, 228, 237, 0.14);
  --btn-ghost-border: rgba(228, 228, 237, 0.1);
  --btn-ghost-border-hover: rgba(228, 228, 237, 0.2);
  --btn-ghost-fg: rgba(228, 228, 237, 0.86);
  /* 玻璃按钮上沿的一线高光：有「一片玻璃」的厚度，而不是贴在画面上的色块 */
  --btn-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /*
   * 按钮垫底：产品里的胶囊都画在深底（background）上。官网按钮常叠在视频上，
   * 先垫一层半透明主底色再叠浅底，颜色才和产品是同一个紫，不被暖色画面染成灰棕。
   */
  --btn-surface: rgba(13, 14, 20, 0.55);

  /*
   * 字体：文渊圆体子集（fonts.css），中英文同一套，圆润、通透。
   * 三个字重：300 细体给大标题与大数字，400 常规体给其余一切，500 只给按钮字（产品按钮用 w600，这里取 500 更柔）；
   * 系统字体只做兜底。
   */
  --f-sans: "XSJ Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* 字号：首屏主标 → 段标题 → 小标题 → 引导语 → 正文 */
  --fs-display: clamp(44px, 6.4vw, 100px);
  --fs-h2: clamp(32px, 3.8vw, 58px);
  --fs-h3: clamp(20px, 1.7vw, 24px);
  --fs-num: clamp(44px, 4.6vw, 68px);
  --fs-lead: clamp(16px, 1.3vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  /* 间距：屏与屏之间的大留白，是「大气」的主要来源 */
  --sp-section: clamp(120px, 15vw, 210px);
  --sp-xl: 72px;
  --sp-lg: 40px;
  --sp-md: 24px;
  --sp-sm: 14px;
  --sp-xs: 8px;
  --gutter: clamp(14px, 2.2vw, 28px);
  /* 页边距：内容离窗口两侧的最小距离，窗口越宽留得越多（大气靠两侧的空） */
  --page-x: clamp(24px, 6vw, 96px);
  --w-content: 1180px;
  --w-text: 760px;

  /* 圆角（radius.dart）：银幕 xxxl 32 · 卡片 xxl 24 · 面板 xl 20 · 控件 lg 16 · 小件 sm 12 */
  --r-stage: 32px;
  --r-card: 24px;
  --r-panel: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* 动效：慢而少；开场「睁眼」是全站唯一的长动画 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 240ms;
  --t-slow: 800ms;
  --t-fade: 1400ms;
  --t-open: 2000ms;

  --header-h: 76px;
}