/* ============================================================================
   iFolo 设计令牌 —— 唯一真相源
   ----------------------------------------------------------------------------
   色彩来自 logo 自身的三原色几何构成。不引入外部流行色，不用渐变，不用发光。

   最容易出错的地方：品牌标准色 #5CA3FF 白底对比度只有 2.58，
   所以它只能做填充，不能承载文字。界面里「干活的蓝」是 blue-700 #0965DC。
   ========================================================================= */

:root {
  /* ---------- 品牌色源（与 logo 官方色值一致） ---------- */
  --ifolo-blue:   #5CA3FF;   /* 主色 Primary   214° 100% 68% */
  --ifolo-green:  #69CF3D;   /* 辅助色 Secondary 102° 60% 53% */
  --ifolo-orange: #FFA51F;   /* 强调色 Accent    36° 100% 56% */
  --ifolo-gray:   #E8E8E8;   /* 标识灰：仅用于 logo 内部，不进入界面色板 */

  /* ---------- 主色阶 Blue ---------- */
  --blue-50:  #F0F6FF;
  --blue-100: #DBEBFF;
  --blue-200: #B8D7FF;
  --blue-300: #8FBFFF;
  --blue-400: #70AEFF;
  --blue-500: #5CA3FF;   /* 品牌标准色 · 仅填充 */
  --blue-600: #2380FB;
  --blue-700: #0965DC;   /* 可读蓝 · 白底 5.38:1 AA */
  --blue-800: #0D4DA0;
  --blue-900: #0F376B;

  /* ---------- 辅助色阶 Green ---------- */
  --green-50:  #F3FAEF;
  --green-100: #E3F5DB;
  --green-200: #C7EAB8;
  --green-300: #A4E08A;
  --green-400: #84D760;
  --green-500: #69CF3D;
  --green-600: #53B927;
  --green-700: #41961D;
  --green-800: #337218;  /* 绿文字 · 白底 5.90:1 AA */
  --green-900: #275214;

  /* ---------- 强调色阶 Orange ---------- */
  --orange-50:  #FFF7EB;
  --orange-100: #FFEFD6;
  --orange-200: #FFE0B2;
  --orange-300: #FFCE85;
  --orange-400: #FFBA52;
  --orange-500: #FFA51F;
  --orange-600: #ED8F02;
  --orange-700: #BD7305;
  --orange-800: #905A09;  /* 橙文字 · 白底 5.75:1 AA */
  --orange-900: #68440D;

  /* ---------- 危险色阶 Red（唯一不在 logo 中的色相） ---------- */
  --red-50:  #FFEBEB;
  --red-100: #FEDCDD;
  --red-200: #FCBABD;
  --red-300: #F89194;
  --red-400: #EF6166;
  --red-500: #E43A3F;
  --red-600: #D52026;
  --red-700: #A91E22;   /* 白底 7.25:1 AAA */
  --red-800: #831B1E;
  --red-900: #62181B;

  /* ---------- 中性色阶 Ink（214° 低饱和，与主色同色相） ---------- */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFC;
  --ink-50:  #F5F7FA;
  --ink-100: #EBEFF4;
  --ink-200: #DAE0E7;
  --ink-300: #BEC6D0;
  --ink-400: #959FAC;
  --ink-500: #707B89;
  --ink-600: #57606B;
  --ink-700: #40464F;
  --ink-800: #292D33;
  --ink-900: #191C1F;

  /* ---------- 语义别名 ---------- */
  --text-primary:   #22262E;   /* 柔和深墨，降低 17:1 刺眼极黑硬度，更加温润高级 */
  --text-secondary: #5A6474;   /* 优雅中性次级灰，保持清晰同时层级柔和 */
  --text-tertiary:  #8490A0;   /* 弱化辅助信息（时间、图标等） */
  --text-disabled:  var(--ink-300);

  --border-subtle: var(--ink-100);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);

  --accent:        var(--blue-700);   /* #0965DC 可读蓝 */
  --accent-fill:   var(--blue-500);   /* #5CA3FF 品牌标准色·仅填充 */
  --accent-subtle: var(--blue-50);
  --accent-border: var(--blue-200);

  --success:      var(--green-800);   /* #337218 辅助绿文字 */
  --success-fill: var(--green-500);   /* #69CF3D 填充 */
  --success-soft: var(--green-50);

  --warn:      var(--orange-800);     /* #905A09 提醒橙文字 */
  --warn-fill: var(--orange-500);     /* #FFA51F 填充 */
  --warn-soft: var(--orange-50);

  --danger:      var(--red-700);      /* #A91E22 危险红文字 */
  --danger-fill: var(--red-500);      /* #E43A3F 填充 */
  --danger-soft: var(--red-50);

  /* ---------- 原型基础别名（与 product-analysis.html :root 100% 对齐） ---------- */
  --bg:             var(--ink-50);       /* #F5F7FA 画布底色 */
  --panel:          var(--ink-0);        /* #FFFFFF 面板表面 */
  --ink:            var(--ink-900);      /* #191C1F 正文文本 (17.11:1 AAA) */
  --ink2:           var(--ink-700);      /* #40464F 次级说明 (AA) */
  --muted:          var(--ink-500);      /* #707B89 弱化文本 */
  --line:           var(--ink-200);      /* #DAE0E7 标准边框 */
  --line2:          var(--ink-100);      /* #EBEFF4 分隔细线 */
  --accent-soft:    var(--blue-50);      /* #F0F6FF 浅蓝底 */
  --secondary:      var(--orange-700);   /* #BD7305 强调橙文字 */
  --secondary-soft: var(--orange-50);    /* #FFF7EB 强调橙浅底 */
  --good:           var(--green-800);    /* #337218 辅助绿文字 (5.90:1 AA) */
  --good-soft:      var(--green-50);     /* #F3FAEF 辅助绿浅底 */
  --bad:            var(--red-700);      /* #A91E22 危险红文字 (7.25:1 AAA) */
  --bad-soft:       var(--red-50);       /* #FFEBEB 危险红浅底 */

  /* ---------- 表面（只允许 3 层） ---------- */
  --canvas:         var(--ink-50);
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;   /* 靠阴影抬升，不靠换色 */
  --surface-sunken: var(--ink-50);     /* #F5F7FA 对齐原型 .ui-tab / .ui-code */

  /* ---------- 面板 ---------- */
  --panel-width: 432px;
  --panel-radius: 16px;
  --panel-inset: 12px;

  /* 面板背景不透明度：与模糊材质解耦，两者独立可调 */
  --panel-opacity: 1;
  /* 卡片不透明度：独立调节控件，默认 90%（0.90），支持 40% ~ 100% 动态无级调节 */
  --card-opacity: 0.90;

  --panel-bg: rgba(250, 251, 253, var(--panel-opacity));
  /* ---------- 交互微状态（解耦实心底色，适配任意半透明度） ---------- */
  --hover-bg: rgba(0, 0, 0, 0.045);
  --active-bg: rgba(0, 0, 0, 0.08);

  /* 卡片流层级（由 --card-opacity 独立无级调控，兼顾透亮与文字承托力） */
  --card-bg: rgba(255, 255, 255, calc(0.40 + 0.60 * var(--card-opacity)));
  --card-bg-hover: rgba(255, 255, 255, calc(0.55 + 0.45 * var(--card-opacity)));
  --card-bg-active: var(--blue-50);
  --card-bg-pinned: rgba(250, 252, 255, calc(0.50 + 0.50 * var(--card-opacity)));
  --card-border-color: rgba(0, 0, 0, calc(0.03 + 0.04 * var(--card-opacity)));
  --card-border-color-hover: rgba(0, 0, 0, calc(0.06 + 0.04 * var(--card-opacity)));
  --card-border-color-pinned: var(--blue-200);
  --card-border-color-active: var(--blue-200);
  --card-border: 1px solid var(--card-border-color);
  --card-border-pinned: 1px solid var(--card-border-color-pinned);
  --card-border-active: 1px solid var(--card-border-color-active);
  --card-shadow: 0 1px 3px rgba(16, 24, 40, 0.03), 0 1px 2px rgba(16, 24, 40, 0.015);

  /* 输入框与交互控件 */
  --control-bg: rgba(255, 255, 255, calc(0.40 + 0.58 * var(--card-opacity)));
  --control-bg-hover: rgba(255, 255, 255, calc(0.55 + 0.45 * var(--card-opacity)));
  --control-bg-focus: #FFFFFF;
  --control-border-color: rgba(0, 0, 0, 0.07);
  --control-border-color-hover: rgba(0, 0, 0, 0.13);
  --control-border: 1px solid var(--control-border-color);
  --control-border-hover: 1px solid var(--control-border-color-hover);
  /* 分割线与边界 */
  --bar-border: rgba(0, 0, 0, 0.06);

  /* 悬浮弹出层（命令面板、全局菜单） */
  --popover-bg: rgba(255, 255, 255, 0.96);
  --popover-backdrop: blur(28px) saturate(190%);
  --popover-border: 1px solid rgba(0, 0, 0, 0.08);

  /* 搜索高亮配色 */
  --search-match-bg: rgba(254, 240, 138, 0.75);
  --search-match-border: rgba(234, 179, 8, 0.40);
  --search-match-color: #22262E;
  --search-active-bg: rgba(245, 158, 11, 0.90);
  --search-active-color: #FFFFFF;
  --search-active-border: transparent;

  /* 待办打勾背景 */
  --task-check-done-bg: var(--green-700);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
             "Hiragino Sans GB", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  --t-h1: 20px;     --t-h1-w: 700; --t-h1-lh: 1.28; --t-h1-tr: -0.02em;
  --t-h2: 16px;     --t-h2-w: 650; --t-h2-lh: 1.32; --t-h2-tr: -0.015em;
  --t-h3: 14px;     --t-h3-w: 650; --t-h3-lh: 1.36; --t-h3-tr: -0.01em;
  --t-body: 13px;   --t-body-w: 400; --t-body-lh: 1.60;
  --t-code: 12px;   --t-code-lh: 1.70;
  --t-chrome: 13px; --t-chrome-w: 400; --t-chrome-lh: 1.45;
  --t-control: 13px; --t-control-w: 600;
  --t-caption: 10.5px; --t-caption-w: 550; --t-caption-tr: 0.01em;

  --paragraph-spacing: 14px;

  /* ---------- 间距（8 点栅格 + 2/4/6 半档） ---------- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 7px; --r-lg: 8px;
  --r-xl: 10px; --r-2xl: 11px; --r-panel: 16px;

  /* ---------- 阴影（对齐原型 product-analysis.html L27 & L270） ---------- */
  --shadow-popover: 0 10px 34px rgba(20, 22, 40, .18), 0 1px 3px rgba(20, 22, 40, .10);
  --shadow-raised:  0 24px 46px -28px rgba(16, 24, 40, .26), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-panel:   -18px 0 60px rgba(20, 22, 40, .16);

  /* ---------- 动效 ---------- */
  --ease-slide: cubic-bezier(.32, .72, 0, 1);
  --ease-out:   cubic-bezier(.2, .8, .3, 1);
  --dur-slide:  320ms;
  --dur-window: 260ms;
  --dur-popover: 140ms;
  --dur-hover:  120ms;

  /* ---------- 代码语法高亮（严格对齐原型 .ui-code L321-326，绝不使用外来紫色） ---------- */
  --syn-kw:    var(--orange-700);  /* #BD7305 关键字 */
  --syn-fn:    var(--blue-700);    /* #0965DC 函数 */
  --syn-str:   var(--green-700);   /* #41961D 字符串 */
  --syn-num:   var(--orange-700);  /* #BD7305 数字 */
  --syn-com:   var(--ink-400);     /* #959FAC 注释 */
  --syn-punct: var(--ink-800);     /* #292D33 标点与变量 */

  /* ---------- 尺寸 ---------- */
  --toolbar-h: 34px;
  --topbar-h: 36px;
}

/* ============================================================================
   深色模式
   深色不是把颜色反过来 —— 三个品牌色在深底上的对比度反而更好
   （蓝 7.14 / 绿 9.31 / 橙 9.35），所以直接用 500 标准色。
   ========================================================================= */
[data-theme="dark"] {
  --text-primary:   #DFE4EC;   /* 柔润象牙冷白，消除刺眼白冷光眩光 */
  --text-secondary: #9AA6B8;   /* 细腻次级灰，温和清晰 */
  --text-tertiary:  #6E7A8C;   /* 柔和弱化文本 */
  --text-disabled:  #444E5E;

  --border-subtle: #232A38;
  --border:        #2A2F37;
  --border-strong: #3A4252;

  --accent:        var(--blue-500);
  --accent-subtle: #1E3550;
  --accent-border: #2C4A6E;

  --success:      #A4E08A;
  --success-soft: #22401A;

  --warn:      #FFCE85;
  --warn-soft: #4A3618;

  --danger:      #F89194;
  --danger-soft: #4A2226;

  /* 衍生与功能色阶暗色映射（消除硬编码浅亮底与反白缺陷） */
  --blue-50:  rgba(59, 130, 246, 0.16);
  --blue-100: rgba(59, 130, 246, 0.28);
  --blue-200: rgba(96, 165, 250, 0.40);

  --orange-50:  rgba(245, 158, 11, 0.15);
  --orange-100: rgba(245, 158, 11, 0.25);
  --orange-200: rgba(245, 158, 11, 0.35);
  --orange-800: #FFCE85;

  --green-50:  rgba(34, 197, 94, 0.15);
  --green-100: rgba(34, 197, 94, 0.25);
  --green-800: #A4E08A;

  --red-50:  rgba(239, 68, 68, 0.15);
  --red-100: rgba(239, 68, 68, 0.25);
  --red-700: #F89194;
  --red-800: #F89194;

  --ink-50:  rgba(255, 255, 255, 0.04);
  --ink-100: rgba(255, 255, 255, 0.08);
  --ink-200: rgba(255, 255, 255, 0.14);
  --ink-300: rgba(255, 255, 255, 0.22);
  --ink-500: #7E8899;
  --ink-600: #A8B2C0;
  --ink-700: #CBD5E1;
  --ink-800: #E9EDF3;
  --ink-900: #F8FAFC;

  /* ---------- 原型基础别名 (深色模式) ---------- */
  --bg:             #15181D;
  --panel:          #1D2127;
  --ink:            #E9EDF3;
  --ink2:           #A8B2C0;
  --muted:          #7E8899;
  --line:           #2A2F37;
  --line2:          #232A38;
  --accent-soft:    #1E3550;
  --secondary:      #FFBA52;
  --secondary-soft: #4A3618;
  --good:           #A4E08A;
  --good-soft:      #22401A;
  --bad:            #F89194;
  --bad-soft:       #4A2226;

  --canvas:         #15181D;
  --surface:        #1D2127;
  --surface-raised: #242931;
  --surface-sunken: #181C22;

  --panel-bg: rgba(24, 27, 33, var(--panel-opacity));

  /* ---------- 交互微状态 (深色) ---------- */
  --hover-bg: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(255, 255, 255, 0.10);

  /* 卡片流层级（深色模式：中性温润石墨色系，由 --card-opacity 独立调控） */
  --card-bg: rgba(33, 37, 45, calc(0.40 + 0.60 * var(--card-opacity)));
  --card-bg-hover: rgba(41, 46, 56, calc(0.55 + 0.45 * var(--card-opacity)));
  --card-bg-active: rgba(30, 53, 80, calc(0.65 + 0.35 * var(--card-opacity)));
  --card-bg-pinned: rgba(35, 41, 52, calc(0.50 + 0.50 * var(--card-opacity)));
  --card-border-color: rgba(255, 255, 255, calc(0.05 + 0.05 * var(--card-opacity)));
  --card-border-color-hover: rgba(255, 255, 255, calc(0.09 + 0.05 * var(--card-opacity)));
  --card-border-color-pinned: var(--blue-200);
  --card-border-color-active: rgba(96, 165, 250, 0.45);
  --card-border: 1px solid var(--card-border-color);
  --card-border-pinned: 1px solid var(--card-border-color-pinned);
  --card-border-active: 1px solid var(--card-border-color-active);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14);
  /* 输入框与交互控件 */
  --control-bg: rgba(255, 255, 255, calc(0.04 + 0.04 * var(--card-opacity)));
  --control-bg-hover: rgba(255, 255, 255, calc(0.08 + 0.04 * var(--card-opacity)));
  --control-bg-focus: rgba(36, 42, 52, 0.92);
  --control-border-color: rgba(255, 255, 255, 0.09);
  --control-border-color-hover: rgba(255, 255, 255, 0.16);
  --control-border: 1px solid var(--control-border-color);
  --control-border-hover: 1px solid var(--control-border-color-hover);
  /* 分割线与边界 */
  --bar-border: rgba(255, 255, 255, 0.08);

  /* 悬浮弹出层 */
  --popover-bg: rgba(26, 30, 37, 0.95);
  --popover-backdrop: blur(32px) saturate(180%);
  --popover-border: 1px solid rgba(255, 255, 255, 0.12);

  /* 搜索高亮配色 (深色) */
  --search-match-bg: rgba(202, 138, 4, 0.35);
  --search-match-border: rgba(234, 179, 8, 0.45);
  --search-match-color: #FEF08A;
  --search-active-bg: rgba(217, 119, 6, 0.85);
  --search-active-color: #FFFFFF;
  --search-active-border: transparent;

  /* 待办打勾背景 (深色) */
  --task-check-done-bg: #22C55E;

  --syn-kw:    #FFBA52;
  --syn-fn:    #8FBFFF;
  --syn-str:   #A4E08A;
  --syn-num:   #FFCE85;
  --syn-com:   #7E8899;
  --syn-punct: #E9EDF3;
  --shadow-popover: 0 12px 38px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-raised:  0 24px 46px -28px rgba(0, 0, 0, .7);
  --shadow-panel:   -18px 0 60px rgba(0, 0, 0, .5);
}