/* ============================================================
 * ZLRomi-UI v0.1 — 设计基石（Design Tokens）· 红色经典版
 * 命名空间：--zui-*
 * 品牌种子色：中国红 #C81623
 * 明暗两套，用 [data-theme] 切换，JS 负责持久化
 * ============================================================ */

:root {
  /* ---------- 品牌 ---------- */
  --zui-brand-seed: #c81623;
  --zui-brand-name: "红色经典";

  /* ---------- 主色（浅色·中国红） ---------- */
  --zui-primary: #c81623;
  --zui-on-primary: #ffffff;
  --zui-primary-container: #ffdad4;
  --zui-on-primary-container: #410001;

  --zui-secondary: #5f5b58;
  --zui-on-secondary: #ffffff;
  --zui-secondary-container: #e8dfd5;
  --zui-on-secondary-container: #1f1b16;

  --zui-tertiary: #7a5a00;
  --zui-on-tertiary: #ffffff;
  --zui-tertiary-container: #ffe1a4;
  --zui-on-tertiary-container: #261a00;

  --zui-error: #ba1a1a;
  --zui-on-error: #ffffff;
  --zui-error-container: #ffdad6;
  --zui-on-error-container: #410002;

  /* ---------- 表面（浅色·暖纸） ---------- */
  --zui-background: #fff9f5;
  --zui-on-background: #201a18;
  --zui-surface: #fff9f5;
  --zui-on-surface: #201a18;
  --zui-surface-variant: #eadcd2;
  --zui-on-surface-variant: #53433f;
  --zui-surface-1: #fff1e8;
  --zui-surface-2: #f9e8dd;
  --zui-surface-3: #f3ddcf;
  --zui-outline: #85736c;
  --zui-outline-variant: #d7c2b6;

  /* ---------- 字体 ---------- */
  --zui-font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --zui-font-mono: "JetBrains Mono", "Cascadia Code", Consolas,
    "Noto Sans Mono", monospace;

  --zui-text-display: clamp(2.5rem, 5vw, 3.5rem);
  --zui-text-h1: clamp(1.75rem, 3vw, 2.25rem);
  --zui-text-h2: 1.4rem;
  --zui-text-body: 1rem;
  --zui-text-small: 0.875rem;
  --zui-text-caption: 0.75rem;

  /* ---------- 间距（4pt 基准） ---------- */
  --zui-space-1: 4px;
  --zui-space-2: 8px;
  --zui-space-3: 12px;
  --zui-space-4: 16px;
  --zui-space-6: 24px;
  --zui-space-8: 32px;
  --zui-space-12: 48px;
  --zui-space-16: 64px;
  --zui-space-24: 96px;

  /* ---------- 圆角 ---------- */
  --zui-radius-xs: 4px;
  --zui-radius-sm: 8px;
  --zui-radius-md: 12px;
  --zui-radius-lg: 16px;
  --zui-radius-xl: 24px;
  --zui-radius-full: 9999px;

  /* ---------- 阴影（elevation·红调） ---------- */
  --zui-elevation-0: none;
  --zui-elevation-1: 0 1px 2px rgb(65 0 1 / 0.3), 0 1px 3px 1px rgb(65 0 1 / 0.15);
  --zui-elevation-2: 0 1px 2px rgb(65 0 1 / 0.3), 0 2px 6px 2px rgb(65 0 1 / 0.15);
  --zui-elevation-3: 0 1px 3px rgb(65 0 1 / 0.3), 0 4px 8px 3px rgb(65 0 1 / 0.15);
  --zui-elevation-4: 0 2px 3px rgb(65 0 1 / 0.3), 0 6px 10px 4px rgb(65 0 1 / 0.15);
  --zui-elevation-5: 0 4px 4px rgb(65 0 1 / 0.3), 0 8px 12px 6px rgb(65 0 1 / 0.15);

  /* ---------- 状态层 ---------- */
  --zui-state-hover: rgb(200 22 35 / 0.08);
  --zui-state-focus: rgb(200 22 35 / 0.12);
  --zui-state-pressed: rgb(200 22 35 / 0.12);

  /* ---------- 动效 ---------- */
  --zui-duration-fast: 150ms;
  --zui-duration-base: 250ms;
  --zui-duration-slow: 400ms;
  --zui-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --zui-ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);

  /* ---------- 布局 ---------- */
  --zui-container-max: 1120px;
  --zui-header-height: 64px;
}

/* ---------- 深色 ---------- */
[data-theme="dark"] {
  --zui-primary: #ffb4a6;
  --zui-on-primary: #680002;
  --zui-primary-container: #930010;
  --zui-on-primary-container: #ffdad4;

  --zui-secondary: #d8c2b8;
  --zui-on-secondary: #332925;
  --zui-secondary-container: #4d4440;
  --zui-on-secondary-container: #eadcd2;

  --zui-tertiary: #eac33f;
  --zui-on-tertiary: #3a2f00;
  --zui-tertiary-container: #544600;
  --zui-on-tertiary-container: #ffe1a4;

  --zui-error: #ffb4ab;
  --zui-on-error: #690005;
  --zui-error-container: #93000a;
  --zui-on-error-container: #ffdad6;

  --zui-background: #1a1110;
  --zui-on-background: #f0ded7;
  --zui-surface: #1a1110;
  --zui-on-surface: #f0ded7;
  --zui-surface-variant: #53433f;
  --zui-on-surface-variant: #d7c2b6;
  --zui-surface-1: #201413;
  --zui-surface-2: #251917;
  --zui-surface-3: #2a1d1b;
  --zui-outline: #a08c85;
  --zui-outline-variant: #53433f;

  --zui-state-hover: rgb(255 255 255 / 0.08);
  --zui-state-focus: rgb(255 255 255 / 0.12);
  --zui-state-pressed: rgb(255 255 255 / 0.12);
}