/* ============================================================================
   设计令牌 · StillFit
   暖白 · 温润 · 陶土暖意 · 克制 · 适合长期使用
   仅定义变量与基础重置，不依赖具体页面结构。
   所有组件样式见 static/components.css；页面覆盖见 static/redesign.css。
   命名前缀 --att-* 保持稳定，便于 redesign.css 复用。
   ============================================================================ */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------------
     1. 颜色 · 品牌强调（陶土橙 / 赤陶）
     ------------------------------------------------------------------------ */
  --att-accent-900: #6e3520;
  --att-accent-800: #7e3f26;
  --att-accent-700: #8f4a2c;   /* 强调深：品牌字、hover */
  --att-accent-600: #a5553a;
  --att-accent-500: #b5613a;   /* 主强调：按钮、链接、选中 */
  --att-accent-400: #c67a52;
  --att-accent-300: #d99a78;
  --att-accent-200: #ebc4ac;
  --att-accent-100: #f6ece4;   /* 强调浅底：选中背景、soft */
  --att-accent-50:  #faf3ee;

  /* 兼容旧引用（redesign.css 中 --att-brand-* 指向陶土） */
  --att-brand-900: var(--att-accent-900);
  --att-brand-800: var(--att-accent-800);
  --att-brand-700: var(--att-accent-700);
  --att-brand-600: var(--att-accent-600);
  --att-brand-500: var(--att-accent-500);
  --att-brand-400: var(--att-accent-400);
  --att-brand-300: var(--att-accent-300);
  --att-brand-200: var(--att-accent-200);
  --att-brand-100: var(--att-accent-100);
  --att-brand-50:  var(--att-accent-50);

  /* ------------------------------------------------------------------------
     2. 颜色 · 表面与背景（暖白 / 浅米灰）
     ------------------------------------------------------------------------ */
  --att-bg: #faf8f4;              /* 页面背景：暖白米灰 */
  --att-surface: #ffffff;          /* 一级表面：内容卡/面板 */
  --att-surface-raised: #ffffff;   /* 抬升表面（与一级同，靠阴影区分） */
  --att-surface-inset: #f3efe8;    /* 二级/凹陷表面：输入底、分组底，暖米 */
  --att-surface-hover: #f7f2ec;    /* 悬浮表面：列表行 hover */
  --att-surface-active: #f1ebe2;   /* 按下表面 */

  /* ------------------------------------------------------------------------
     3. 颜色 · 边框与分割线（暖灰）
     ------------------------------------------------------------------------ */
  --att-border-subtle: #efe9e0;    /* 极淡分割线 */
  --att-border: #e6dfd5;           /* 默认边框 */
  --att-border-strong: #d3c9bb;    /* 输入/强调边框 */
  --att-border-focus: var(--att-accent-500);

  /* ------------------------------------------------------------------------
     4. 颜色 · 文字（深棕灰系）
     ------------------------------------------------------------------------ */
  --att-text-primary: #3a342e;     /* 主文字：深棕灰 */
  --att-text-secondary: #6b6258;   /* 次文字：棕灰 */
  --att-text-tertiary: #8a8077;    /* 弱文字 */
  --att-text-disabled: #b3aaa0;    /* 禁用文字 */
  --att-text-on-accent: #ffffff;   /* 强调色上的文字 */
  --att-text-link: var(--att-accent-600);
  --att-text-link-hover: var(--att-accent-700);

  /* ------------------------------------------------------------------------
     5. 颜色 · 业务状态（仅用于明确业务语义，不装饰）
        成对使用：底 + 文字；保持可辨识度，不因温和而模糊。
     ------------------------------------------------------------------------ */
  --att-success-700: #3d6b3a;
  --att-success-600: #4a7d46;
  --att-success-100: #e9f1e7;
  --att-success-50:  #f2f6f0;

  --att-warning-700: #8a6510;
  --att-warning-600: #a37714;
  --att-warning-100: #fdf3dc;
  --att-warning-50:  #fef8e8;

  --att-danger-700: #a8442e;
  --att-danger-600: #bd4f37;
  --att-danger-100: #f7e7e2;
  --att-danger-50:  #faf0ec;

  --att-info-700: #4a5568;
  --att-info-600: #566279;
  --att-info-100: #eef0f4;
  --att-info-50:  #f4f5f8;

  --att-neutral-700: #6b6258;
  --att-neutral-100: #efebe5;
  --att-neutral-50:  #f5f1ec;

  /* 状态语义映射（列表色条 / 胶囊 / toast 复用） */
  --att-status-unreported-bg: var(--att-warning-100);
  --att-status-unreported-text: var(--att-warning-700);
  --att-status-draft-bg: var(--att-info-100);
  --att-status-draft-text: var(--att-info-700);
  --att-status-ready-bg: var(--att-success-100);
  --att-status-ready-text: var(--att-success-700);
  --att-status-overdue-bg: var(--att-danger-100);
  --att-status-overdue-text: var(--att-danger-700);
  --att-status-waiting-bg: var(--att-neutral-100);
  --att-status-waiting-text: var(--att-neutral-700);
  --att-status-confirmed-bg: var(--att-success-100);
  --att-status-confirmed-text: var(--att-success-700);
  --att-status-locked-bg: var(--att-neutral-100);
  --att-status-locked-text: var(--att-neutral-700);
  --att-status-neutral-bg: var(--att-neutral-100);
  --att-status-neutral-text: var(--att-neutral-700);
  --att-status-pending-bg: var(--att-warning-100);
  --att-status-pending-text: var(--att-warning-700);

  /* ------------------------------------------------------------------------
     6. 排版（系统字体，不加载远程字体）
     ------------------------------------------------------------------------ */
  --att-font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --att-font-mono: ui-monospace, "SF Mono", "Segoe UI Mono", "Cascadia Code",
                   Consolas, monospace;

  /* 字号 / 行高 / 字重 组合（font shorthand 用） */
  --att-font-display: 700 26px/1.25 var(--att-font-family);  /* 大页标题 */
  --att-font-title:   700 20px/1.3 var(--att-font-family);    /* 区块大标题 */
  --att-font-heading: 700 17px/1.35 var(--att-font-family);   /* 区块标题 */
  --att-font-body:    400 15px/1.55 var(--att-font-family);   /* 正文 */
  --att-font-body-sm: 400 14px/1.55 var(--att-font-family);   /* 紧凑正文 */
  --att-font-caption: 400 13px/1.5 var(--att-font-family);    /* 辅助/标签 */
  --att-font-label:   600 14px/1.4 var(--att-font-family);    /* 表单标签 */
  --att-font-button:  600 15px/1.2 var(--att-font-family);    /* 按钮 */
  --att-font-button-sm: 600 14px/1.2 var(--att-font-family);
  --att-font-table:   400 14px/1.5 var(--att-font-family);    /* 表格文字 */
  --att-font-metric:  700 24px/1.15 var(--att-font-family);   /* 数字汇总 */
  --att-font-metric-sm: 700 18px/1.2 var(--att-font-mono);
  font-feature-settings: "tnum" 1; /* 表格数字等宽 */

  /* ------------------------------------------------------------------------
     7. 间距（4px 基准）
     ------------------------------------------------------------------------ */
  --att-space-0: 0;
  --att-space-1: 4px;
  --att-space-2: 8px;
  --att-space-3: 12px;
  --att-space-4: 16px;
  --att-space-5: 20px;
  --att-space-6: 24px;
  --att-space-8: 32px;
  --att-space-10: 40px;
  --att-space-12: 48px;
  --att-space-16: 64px;

  /* ------------------------------------------------------------------------
     8. 圆角
     ------------------------------------------------------------------------ */
  --att-radius-none: 0;
  --att-radius-xs: 4px;
  --att-radius-sm: 6px;
  --att-radius-md: 8px;
  --att-radius-lg: 12px;
  --att-radius-xl: 16px;
  --att-radius-2xl: 20px;
  --att-radius-full: 999px;

  /* ------------------------------------------------------------------------
     9. 控件尺寸
     ------------------------------------------------------------------------ */
  --att-control-h-sm: 32px;
  --att-control-h-md: 40px;
  --att-control-h-lg: 44px;   /* 默认表单控件高度（触控友好） */
  --att-control-h-xl: 48px;  /* 主操作按钮 */
  --att-control-px: 12px;
  --att-control-px-sm: 8px;

  --att-touch-min: 44px;       /* 最小触控目标 */
  --att-header-height: 56px;   /* 顶栏高度 */
  --att-tabbar-height: 56px;   /* 移动端底部操作栏 / tab bar */
  --att-sidebar-width: 240px;  /* 侧边栏宽度（预留，当前未用） */
  --att-row-height: 52px;      /* 列表行高 */
  --att-row-height-sm: 44px;

  --att-page-max: 880px;       /* 桌面内容最大宽度 */
  --att-content-max: 560px;    /* 窄表单最大宽度 */

  /* ------------------------------------------------------------------------
     10. 阴影（低对比度，暖灰基调）
     ------------------------------------------------------------------------ */
  --att-shadow-xs: 0 1px 2px rgba(58, 52, 46, 0.04);
  --att-shadow-sm: 0 1px 3px rgba(58, 52, 46, 0.06), 0 1px 2px rgba(58, 52, 46, 0.04);
  --att-shadow-md: 0 4px 12px rgba(58, 52, 46, 0.08);
  --att-shadow-lg: 0 8px 24px rgba(58, 52, 46, 0.10);
  --att-shadow-focus: 0 0 0 3px rgba(181, 97, 58, 0.18);

  /* ------------------------------------------------------------------------
     11. 动效（集中定义，组件不得各自随意写时间/曲线）
     ------------------------------------------------------------------------ */
  --att-duration-fast: 140ms;     /* 按钮/输入 hover、focus */
  --att-duration-normal: 200ms;   /* 下拉、浮层、状态色切换 */
  --att-duration-slow: 280ms;     /* 抽屉、弹窗、页面切换 */
  --att-duration-slower: 320ms;

  /* 自然减速曲线（主用） */
  --att-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --att-ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);
  /* 退出略快、略线性 */
  --att-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --att-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* 交互位移量 */
  --att-hover-lift: -1px;         /* hover 上移（向上为负） */
  --att-pressed-scale: 0.985;     /* pressed 缩放 */
  --att-overlay-opacity: 0.45;    /* 遮罩透明度 */

  /* ------------------------------------------------------------------------
     12. 层级 z-index
     ------------------------------------------------------------------------ */
  --att-z-base: 1;
  --att-z-sticky: 90;
  --att-z-header: 100;
  --att-z-dropdown: 200;
  --att-z-popover: 250;
  --att-z-toast: 300;
  --att-z-modal: 400;
  --att-z-modal-overlay: 390;

  /* ------------------------------------------------------------------------
     13. 响应式断点（mobile-first，min-width）
     ------------------------------------------------------------------------ */
  /* 用法：@media (min-width: 48rem) { ... }
     断点值（px 近似）：
     --bp-sm:  480px  (30rem)  大手机
     --bp-md:  768px  (48rem)  平板
     --bp-lg:  1024px (64rem)  桌面
     --bp-xl:  1280px (80rem)  宽桌面
     注：CSS 变量不能直接用于 @media 查询，此处仅作文档；
     实际媒体查询在各 CSS 中以 rem/px 显式书写。
     ------------------------------------------------------------------------ */
}

/* ============================================================================
   基础重置
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font: var(--att-font-body);
  font-family: var(--att-font-family);
  background: var(--att-bg);
  color: var(--att-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--att-text-link);
  text-decoration: none;
  transition: color var(--att-duration-fast) var(--att-ease-standard);
}

a:hover {
  color: var(--att-text-link-hover);
}

:focus-visible {
  outline: 2px solid var(--att-border-focus);
  outline-offset: 2px;
  border-radius: var(--att-radius-xs);
}

/* 数字等宽（工时/汇总） */
.tnum,
[data-tnum] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================================
   减少动态效果偏好（必须支持）
   取消位移 / 缩放 / 错峰，仅保留必要的状态可见性变化。
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}