/* ==========================================================================
   薯灵感 · 设计系统（Design System）v1
   2026-09-30 建立
   参考：MotionSites 色彩规范 + Aceternity UI 层级观感 + Uiverse 微交互尺度
   原则：纯 token 层 + 极少量基础样式，不覆盖任何业务样式，零破坏性。
   加载位置：style.css 之后、interactive.css 之前。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     一、背景四层（由远及近，越近越亮，形成 z 轴纵深）
     Aceternity UI 的层次观感核心：不是靠边框分隔，而是靠明度递进
     ------------------------------------------------------------------ */
  --bg-base:     #FBF9FA;   /* 页面底色 */
  --bg-surface:  #FFFFFF;   /* 卡片/面板 */
  --bg-elevated: #FFFFFF;   /* 悬浮层：下拉、弹窗、Dock */
  --bg-overlay:  rgba(31, 27, 29, .38);  /* 遮罩 */
  /* 反色面（Hero、深色卡、Toast） */
  --bg-inverse:  #1F1B1D;

  /* ------------------------------------------------------------------
     二、主色三阶（小红书 #FF2442：浅 → 主 → 深）
     ------------------------------------------------------------------ */
  --brand-1: #FF7A90;              /* 浅：hover/描边/装饰 */
  --brand-2: #FF2442;              /* 主：行动点 */
  --brand-3: #E01230;              /* 深：按下态/强调 */
  --brand-soft:   #FFF5F6;         /* 极浅底 */
  --brand-softer: #FFEBEE;
  --brand-ring:   rgba(255, 36, 66, .18);   /* 聚焦环 */

  /* ------------------------------------------------------------------
     三、语义色四组（成功 / 警告 / 危险 / 信息）每组 fg + bg + bd
     ------------------------------------------------------------------ */
  --success:    #1E9E6A;  --success-bg: rgba(30, 158, 106, .10);  --success-bd: rgba(30, 158, 106, .26);
  --warning:    #D98E0B;  --warning-bg: rgba(217, 142, 11, .12);  --warning-bd: rgba(217, 142, 11, .28);
  --danger:     #E01230;  --danger-bg:  rgba(224, 18, 48, .10);   --danger-bd:  rgba(224, 18, 48, .26);
  --info:       #3B82C4;  --info-bg:    rgba(59, 130, 196, .10);  --info-bd:    rgba(59, 130, 196, .26);

  /* ------------------------------------------------------------------
     四、文字四级
     ------------------------------------------------------------------ */
  --text-1: #1F1B1D;   /* 标题/正文，最高对比 */
  --text-2: #5B5457;   /* 次级正文 */
  --text-3: #767076;   /* 辅助说明、元信息 */
  --text-4: #C9C3C5;   /* 占位符、禁用 */
  --text-inverse: #FFFFFF;

  /* ------------------------------------------------------------------
     五、边框三级（1 最轻 → 3 最重）
     ------------------------------------------------------------------ */
  --bd-1: #F4EFF0;   /* 卡片内分隔 */
  --bd-2: #E9E3E5;   /* 卡片描边 */
  --bd-3: #D8D1D3;   /* 输入框、强分隔 */

  /* ------------------------------------------------------------------
     六、8px 网格系统（所有间距取 8 的倍数；4px 为半步，仅用于图标间隙）
     ------------------------------------------------------------------ */
  --sp-0: 0px;
  --sp-h: 4px;    /* half step */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 80px;

  /* ------------------------------------------------------------------
     七、圆角分级 12 / 16 / 24 / 32
     ------------------------------------------------------------------ */
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-32: 32px;
  --r-pill: 999px;

  /* ------------------------------------------------------------------
     八、阴影四档 sm / md / lg / glow
     前三者负责纵深，glow 负责品牌呼吸（高级感的关键）
     ------------------------------------------------------------------ */
  --sh-sm: 0 1px 2px rgba(31, 27, 29, .04), 0 2px 6px rgba(31, 27, 29, .04);
  --sh-md: 0 2px 6px rgba(31, 27, 29, .05), 0 8px 24px rgba(31, 27, 29, .06);
  --sh-lg: 0 4px 12px rgba(31, 27, 29, .06), 0 18px 48px rgba(31, 27, 29, .10);
  --sh-glow: 0 0 0 1px rgba(255, 36, 66, .14), 0 8px 28px rgba(255, 36, 66, .22);
  --sh-glow-lg: 0 0 0 1px rgba(255, 36, 66, .20), 0 14px 44px rgba(255, 36, 66, .30);

  /* ------------------------------------------------------------------
     九、统一缓动体系（三条曲线覆盖全部场景）
     ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);        /* 入场：快出慢收 */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);       /* 位移/切换：两头缓 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);    /* 微交互回弹 */

  /* ------------------------------------------------------------------
     十、动效时长规范（微交互 200 / 组件 300 / 页面 450）
     ------------------------------------------------------------------ */
  --d-micro: 200ms;   /* hover、按压、ripple */
  --d-comp:  300ms;   /* 卡片展开、下拉、Toast */
  --d-page:  450ms;   /* 页级转场、Hero 入场 */

  /* ------------------------------------------------------------------
     兼容别名：把既有 token 映射到新体系，保证旧写法不失效
     ------------------------------------------------------------------ */
  --bg:   var(--bg-base);
  --card: var(--bg-surface);
  --ink:  var(--text-1);
  --ink2: var(--text-2);
  --ink3: var(--text-3);
  --ink4: var(--text-4);
  --line:  var(--bd-1);
  --line2: var(--bd-2);
  --primary:   var(--brand-2);
  --red:       var(--brand-2);
  --red-deep:  var(--brand-3);
  --red-light: var(--brand-soft);
  --green: var(--success);
  --amber: var(--warning);

  /* 字阶补齐（既有基础上增加展示级字号） */
  --fs-display: 34px;
  --fs-h4: 13px;
  --lh-tight: 1.15;
  --lh-body: 1.65;

  /* 层级 z-index 统一表 */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-cursor: 900;
}

/* ==========================================================================
   基础样式增强（仅新增，不覆盖）
   ========================================================================== */

/* 全局聚焦环：键盘可达性 + 高级感统一 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: var(--r-12);
}

/* 选中文字用品牌色，细节处见质感 */
::selection {
  background: rgba(255, 36, 66, .18);
  color: var(--text-1);
}

/* 滚动条：细、圆、低对比，不抢内容 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bd-3) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bd-3);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }

/* 8px 网格工具间距类（可选使用，不强制） */
.ds-gap   { display: flex; gap: var(--sp-2); }
.ds-stack > * + * { margin-top: var(--sp-2); }

/* ==========================================================================
   prefers-reduced-motion：全局降级（各动效模块另有独立开关，此处兜底）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 1ms;
    --d-comp: 1ms;
    --d-page: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}