/* ========== CSS 变量 ========== */
/* 概念图配色：奶油米色背景 + 白色卡片 + #FFE600 作为主装饰色 */

:root {
  /* ---- 背景：奶油米色渐变（核心色） ---- */
  --bg-page-top:    #F5EFE0;   /* 上方更深米色 */
  --bg-page-bottom: #FAF7EC;   /* 下方更浅米色 */
  --bg-page:        #F5EFE0;   /* 兼容旧引用 */
  --bg-card:        #FFFFFF;   /* 卡片纯白 */
  --bg-elevated:    #FFFFFF;   /* 弹窗 */
  --bg-input:       #FFFFFF;
  --bg-hover:       #F4EFE0;   /* 米色 hover */
  --bg-active:      #EBE3CC;   /* 米色激活 */
  --bg-subtle:      #F7F2E5;   /* 米色装饰背景 */

  /* ---- 主色 #FFE600（更突出地作为装饰色） ---- */
  --brand:          #FFE600;
  --brand-deep:     #F5D800;   /* 深一点用于 active */
  --brand-soft:     rgba(255, 230, 0, 0.18);
  --brand-soft-2:   rgba(255, 230, 0, 0.35);  /* 装饰主圆点 */
  --brand-border:   rgba(255, 230, 0, 0.45);
  --brand-text-on:  #1A1A1A;

  /* ---- 文字层级 ---- */
  --text-primary:   #0A0A0A;   /* 接近黑 */
  --text-secondary: #4A4A4A;   /* 中灰（深一些，更可读） */
  --text-tertiary:  #8A8A8A;   /* 浅灰 */
  --text-muted:     #C8C8C8;

  /* ---- 边框（米色调） ---- */
  --border-subtle:  #E8E0CC;   /* 米色浅边 */
  --border-default: #D4CCB6;   /* 米色重边 */
  --border-strong:  #A8A090;
  --border-brand:   var(--brand-border);

  /* ---- 功能色 ---- */
  --status-todo:    #B8B0A0;
  --status-active:  #FFE600;
  --status-done:    #2BB673;
  --status-error:   #E54848;
  --status-warning: #F5A524;

  --danger:  #E54848;
  --warning: #F5A524;
  --success: #2BB673;

  /* ---- 8px 网格基础单位（所有间距/尺寸的对齐基准） ---- */
  --grid-unit:     8px;        /* 基础单位 8px */
  --grid-half:     4px;        /* 半个网格 4px（仅用于 1px 边等微调） */
  --gutter:        16px;       /* 浮动元素到屏幕边的距离（2 个网格） */
  --floating-gap:  12px;       /* 浮动面板之间的间距（1.5 个网格，向下取整按视觉） */

  /* ---- 间距（全部 8 的倍数） ---- */
  --space-xs:  4px;            /* 0.5u — 内部紧凑元素 */
  --space-sm:  8px;            /* 1u */
  --space-md:  16px;           /* 2u */
  --space-lg:  24px;           /* 3u */
  --space-xl:  32px;           /* 4u */
  --space-2xl: 48px;           /* 6u */
  --space-3xl: 64px;           /* 8u */
  --space-4xl: 96px;           /* 12u */
  --space-5xl: 128px;          /* 16u */

  /* ---- 字号 ---- */
  --font-xs:   11px;
  --font-sm:   12px;
  --font-md:   13px;
  --font-lg:   14px;
  --font-xl:   16px;
  --font-2xl:  18px;
  --font-3xl:  22px;
  --font-4xl:  32px;
  --font-5xl:  48px;
  --font-6xl:  64px;

  /* ---- 字体 ---- */
  --font-sans: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC',
               'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;

  /* ---- 圆角（卡片质感） ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;   /* 卡片主圆角 */
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---- 阴影：米色调，更柔和 ---- */
  --shadow-sm:  0 1px 2px rgba(120, 100, 60, 0.04);
  --shadow-md:  0 2px 8px rgba(120, 100, 60, 0.06), 0 1px 2px rgba(120, 100, 60, 0.04);
  --shadow-lg:  0 8px 24px rgba(120, 100, 60, 0.08), 0 2px 6px rgba(120, 100, 60, 0.04);
  --shadow-xl:  0 16px 48px rgba(120, 100, 60, 0.10), 0 4px 12px rgba(120, 100, 60, 0.06);
  --shadow-float: 0 12px 32px rgba(120, 100, 60, 0.08);
  --shadow-focus: 0 0 0 3px rgba(255, 230, 0, 0.35);

  /* ---- 动画 ---- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   200ms;
  --duration-normal: 400ms;
  --duration-slow:   600ms;

  /* ---- 布局尺寸（全部 8 倍数） ---- */
  --topbar-height:    48px;      /* 6u — 浮动顶栏高度 */
  --sidebar-width:    56px;      /* 7u — 浮动侧边栏宽度 */
  --sidebar-item-size: 40px;     /* 5u — 侧边栏单个按钮 */
  --chat-panel-width: 480px;     /* 60u — Chat 面板宽度（8 倍数） */
  --workspace-max-width: 1024px; /* 128u — 主工作区内容最大宽度（8 倍数） */
  --floating-offset:  16px;      /* 2u — 浮动元素到屏幕边的距离 */
  --log-drawer-height: 32px;     /* 4u — 日志抽屉默认把手高度 */
  --log-drawer-max-height: 224px; /* 28u — 展开后最大高度（8 倍数） */
}