/* ============================================================
   tokens.css —— L1 设计系统
   来源：mu_aurora/aurora/tokens.py（Apple HIG 语义化变量）
        + mu_app/_data.py PALETTE / THEME_PRESETS / MOTION（运行时真实色板）

   设计原则（HIG）：
     1. 语义色而非具体色 —— 每个 token 表达"用途"，亮暗两套自动切换
     2. 暗色模式不是亮色反转 —— 重新设计配色，提高对比度、降低饱和度
     3. 暗色下阴影不可见 —— 改用 1px 微弱高光边框表达层级
     4. 间距 4/8/16/20/32 节奏，圆角 8/10/20 三档

   业务代码不得硬编码颜色，一律消费本文件的 CSS 变量。
   ============================================================ */

:root {
  /* ── 字体栈：对标 macOS HIG，Windows 上落到真实存在的等价字体 ── */
  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, "Segoe UI Variable Text",
    "Segoe UI", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "HarmonyOS Sans SC",
    "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Consolas", Menlo, monospace;

  /* ── 字号阶梯（tokens.UI_PT_LADDER：7.5/9/10.5/12/15/18/22.5 pt）
        pt→px 按 72/96 折算，正好是 10/12/14/16/20/24/30 px ── */
  --fs-2xs: 0.625rem;   /* 10px  caption2  角标 */
  --fs-xs: 0.75rem;     /* 12px  footnote  次级说明（原 8.5~9.5pt 统一吸附到此档） */
  --fs-sm: 0.875rem;    /* 14px  callout   正文小（原 10.5~11pt） */
  --fs-base: 1rem;      /* 16px  body      正文（原 12~13pt） */
  --fs-lg: 1.25rem;     /* 20px  title1    页头大标题（原 15pt） */
  --fs-xl: 1.5rem;      /* 24px  largeTitle */
  --fs-2xl: 1.875rem;   /* 30px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── 间距节奏（tokens.SPACE） ── */
  --sp-xxxs: 2px;
  --sp-xxs: 4px;
  --sp-xs: 6px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;

  /* ── 圆角（tokens.RADIUS） ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-control: 8px;
  --r-card: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-sheet: 24px;
  --r-pill: 9999px;

  /* ── 控件高度阶梯（tokens.HEIGHT） ── */
  --h-sm: 26px;
  --h-md: 30px;
  --h-lg: 34px;
  --h-control: 30px;

  /* ── 动效时长（tokens.DURATION 与 _data.MOTION 合并） ── */
  --d-instant: 90ms;
  --d-micro: 120ms;
  --d-hover: 150ms;
  --d-state: 240ms;
  --d-page: 350ms;
  --d-modal-in: 260ms;
  --d-modal-out: 180ms;
  --d-toast-in: 320ms;
  --d-toast-out: 220ms;
  --d-reveal: 420ms;
  --d-press: 130ms;
  --d-slide: 280ms;
  --d-boot: 260ms;

  /* ── Apple 标准缓动曲线（tokens.CURVE，cubic-bezier 控制点） ── */
  --ease-apple: cubic-bezier(0.25, 0.10, 0.25, 1.00);      /* HIG 标准 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);     /* 弹性回弹 */
  --ease-decelerate: cubic-bezier(0.00, 0.00, 0.20, 1.00); /* 入场：快进慢出 */
  --ease-accelerate: cubic-bezier(0.40, 0.00, 1.00, 1.00); /* 退场：慢进快出 */
  --ease-emphasized: cubic-bezier(0.20, 0.00, 0.00, 1.00); /* 强调动作 */

  /* ── 弹簧缓动（JS 用解析解采样后覆盖，此处为兜底 cubic-bezier 近似） ── */
  --motion-snappy: cubic-bezier(0.34, 1.30, 0.64, 1.00);
  --motion-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --motion-smooth: cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --motion-gentle: cubic-bezier(0.33, 1.05, 0.68, 1.00);
  --motion-stiff: cubic-bezier(0.30, 1.20, 0.60, 1.00);
  --motion-scroll: cubic-bezier(0.22, 1.00, 0.36, 1.00);

  /* ── 字体缩放（设置页 ui_font_scale：小 0.85 / 标准 1.0 / 大 1.15） ── */
  --font-scale: 1;
}

/* ═══════════════════════════════════════════════════════════
   亮色语义色板（_data.PALETTE.light + tokens.light_palette）
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 表面 */
  --c-window: #f5f5f7;                       /* 窗口底（PALETTE.light.window_bg） */
  --c-content: #ffffff;
  --c-card: rgba(255, 255, 255, 0.82);       /* 卡片（半透明 → 材质感来源） */
  --c-card-strong: rgba(255, 255, 255, 0.95);/* 结果卡 / 弹层底 */
  --c-sidebar: #e8e8ea;
  --c-input: rgba(0, 0, 0, 0.045);
  --c-hover: rgba(0, 0, 0, 0.06);
  --c-pressed: rgba(0, 0, 0, 0.10);
  --c-selection: rgba(0, 122, 255, 0.12);
  --c-overlay: rgba(0, 0, 0, 0.32);

  /* 文本（Labels：label 黑 / secondary 60% / tertiary 30% / quaternary 18%） */
  --c-text: #1d1d1f;
  --c-text-2: #5f6368;
  --c-text-3: #74787d;
  --c-text-4: rgba(29, 29, 31, 0.42);
  --c-placeholder: #9a9aa0;
  --c-on-accent: #ffffff;

  /* 描边 */
  --c-border: rgba(0, 0, 0, 0.07);
  --c-border-strong: rgba(0, 0, 0, 0.14);
  --c-separator: rgba(0, 0, 0, 0.08);

  /* 系统强调色（Apple System Colors，亮色值） */
  --c-blue: #007aff;
  --c-green: #34c759;
  --c-red: #ff3b30;
  --c-orange: #ff9500;
  --c-yellow: #ffcc00;
  --c-teal: #30b0c7;
  --c-indigo: #5856d6;
  --c-purple: #af52de;
  --c-pink: #ff2d55;
  --c-gray: #8e8e93;

  /* 强调色绑定（由 JS 按 THEME_PRESETS 覆盖） */
  --c-accent: #007aff;
  --c-accent-hover: #0a84ff;
  --c-accent-pressed: #0069d9;
  --c-accent-subtle: rgba(0, 122, 255, 0.15);
  --c-accent-rgb: 0, 122, 255;

  /* 骨架屏微光 */
  --c-skeleton-base: rgba(0, 0, 0, 0.06);
  --c-skeleton-hl: rgba(255, 255, 255, 0.55);

  /* 材质（tokens.MATERIAL_LIGHT）：QSS 无 backdrop blur，用四层合成模拟毛玻璃 */
  --m-ultra-thin: rgba(255, 255, 255, 0.62);
  --m-thin: rgba(255, 255, 255, 0.78);
  --m-regular: rgba(255, 255, 255, 0.88);
  --m-thick: rgba(250, 250, 252, 0.96);
  --glass-hi: rgba(255, 255, 255, 0.84);     /* 顶缘高光 */
  --glass-shade: rgba(0, 0, 0, 0.06);        /* 底缘暗边 */

  /* 阴影（tokens.light_palette.Shadow） */
  --sh-subtle: 0 1px 6px rgba(0, 0, 0, 0.07);
  --sh-card: 0 2px 14px rgba(0, 0, 0, 0.10);
  --sh-raised: 0 8px 30px rgba(0, 0, 0, 0.15);
  --sh-sheet: 0 20px 60px rgba(0, 0, 0, 0.26);

  /* 滚动条 */
  --c-scroll-thumb: rgba(0, 0, 0, 0.22);
  --c-scroll-thumb-hover: rgba(0, 0, 0, 0.34);
}

/* ═══════════════════════════════════════════════════════════
   暗色语义色板（_data.PALETTE.dark）
   暗色下阴影不可见 → 用 1px 微弱高光边框表达层级
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --c-window: #26262a;
  --c-content: #2a2a2a;
  --c-card: rgba(52, 52, 56, 0.88);
  --c-card-strong: rgba(66, 66, 70, 0.95);
  --c-sidebar: #252527;
  --c-input: rgba(255, 255, 255, 0.11);
  --c-hover: rgba(255, 255, 255, 0.15);
  --c-pressed: rgba(255, 255, 255, 0.22);
  --c-selection: rgba(10, 132, 255, 0.22);
  --c-overlay: rgba(0, 0, 0, 0.52);

  --c-text: #f5f5f7;
  --c-text-2: #c6c6cc;
  --c-text-3: #a9a9b2;
  --c-text-4: rgba(245, 245, 247, 0.42);
  --c-placeholder: #7c7c85;
  --c-on-accent: #ffffff;

  --c-border: rgba(255, 255, 255, 0.16);
  --c-border-strong: rgba(255, 255, 255, 0.28);
  --c-separator: rgba(255, 255, 255, 0.18);

  /* Apple System Colors，暗色值（提高对比度、降低饱和度指"不发灰"） */
  --c-blue: #0a84ff;
  --c-green: #30d158;
  --c-red: #ff453a;
  --c-orange: #ff9f0a;
  --c-yellow: #ffd60a;
  --c-teal: #40c8e0;
  --c-indigo: #5e5ce6;
  --c-purple: #bf5af2;
  --c-pink: #ff375f;
  --c-gray: #98989d;

  --c-accent: #0a84ff;
  --c-accent-hover: #409cff;
  --c-accent-pressed: #0876e4;
  --c-accent-subtle: rgba(10, 132, 255, 0.19);
  --c-accent-rgb: 10, 132, 255;

  --c-skeleton-base: rgba(255, 255, 255, 0.07);
  --c-skeleton-hl: rgba(255, 255, 255, 0.20);

  --m-ultra-thin: rgba(38, 38, 40, 0.55);
  --m-thin: rgba(42, 42, 44, 0.69);
  --m-regular: rgba(48, 48, 50, 0.82);
  --m-thick: rgba(56, 56, 58, 0.93);
  --glass-hi: rgba(255, 255, 255, 0.08);
  --glass-shade: rgba(0, 0, 0, 0.25);

  /* 暗色阴影即便存在也不可见，保留极弱值仅用于"离屏层级"提示 */
  --sh-subtle: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh-card: 0 4px 18px rgba(0, 0, 0, 0.47);
  --sh-raised: 0 10px 34px rgba(0, 0, 0, 0.59);
  --sh-sheet: 0 24px 64px rgba(0, 0, 0, 0.74);

  --c-scroll-thumb: rgba(255, 255, 255, 0.22);
  --c-scroll-thumb-hover: rgba(255, 255, 255, 0.36);
}

/* ── 交通灯三色（macOS 固定值，不随主题变） ── */
:root {
  --c-traffic-close: #ff5f57;
  --c-traffic-min: #febc2e;
  --c-traffic-max: #28c840;
}

/* ── 页面水印状态色（pagemark.PAGE_MARK_STATES，hue 解析为 token） ── */
:root {
  --mark-idle: var(--c-accent);
  --mark-prompts: var(--c-teal);
  --mark-imaging: var(--c-indigo);
  --mark-chatting: var(--c-purple);
  --mark-directing: var(--c-pink);
  --mark-uploading: var(--c-orange);
  --mark-queued: var(--c-gray);
  --mark-done: var(--c-green);
  --mark-failed: var(--c-red);
  --mark-stopped: var(--c-gray);
}