/* ============================================================================
   NEXUS — Design Tokens（三层体系）
   ---------------------------------------------------------------------------
   依赖方向：Primitive → Semantic → Component → UI

   第 1 层 Primitive（本文件 · 「物质」原始值）
     颜色阶 --p-*、间距 --space-*、字号 --text-*、字重 --weight-*、
     字距 --tracking-*、行高 --leading-*、圆角 --radius-*、时长 --dur-*、
     缓动 --ease-*。
     · 颜色阶（--p-*）**只允许在本文件的 Semantic 层被引用**，
       业务 CSS 引用即视为越层（tools/check-tokens.mjs 会报错）。
     · 间距 / 字号 / 圆角 / 动效是「唯一刻度」，本身就是公共参数，
       组件按原名称引用属于合法用法（改名会波及全部样式，收益为零）。

   第 2 层 Semantic（本文件 · 明暗两套，共用同一批名字）
     背景、表面、文字、边框、强调、状态、遮罩、阴影、装饰。
     主题切换只替换这一层：`data-theme="nexus-dark" | "nexus-light"`。

   第 3 层 Component（本文件 · 组件尺寸与状态槽）
     --btn-h、--field-h、--icon-*、--radius-control…；同样分主题（默认同值）。

   运行时「可视化编辑器」的写入路径不变：document.documentElement.style
   .setProperty(...)（见 src/js/theme.js 的白名单）。
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVE — 颜色阶
   ========================================================================== */
:root {
  /* 墨色（深色主题的背景与表面） */
  --p-ink-1000: #05070a;
  --p-ink-950: #07080a;
  --p-ink-900: #0b0d10;
  --p-ink-850: #101318;
  --p-ink-800: #15181d;
  --p-ink-750: #1a1f26;
  --p-ink-700: #222932;
  --p-ink-600: #2f3844;

  /* 纸色（浅色主题的背景与表面） */
  --p-paper-50: #ffffff;
  --p-paper-100: #f9fafb;
  --p-paper-200: #f6f7f9;
  --p-paper-300: #eef1f5;
  --p-paper-400: #e4e8ee;

  /* 中性文字阶 */
  --p-slate-50: #edf1f6;
  --p-slate-100: #c1c9d4;
  --p-slate-200: #8b939f;
  --p-slate-250: #8f97a2;   /* B13：小字号元信息在深色面板上 ≥5.9:1 */
  --p-slate-150: #a3abb7;   /* B13：次级文字在深色面板上 ≥7.2:1 */
  --p-slate-300: #79818d;
  --p-ink-text-900: #12151a;
  --p-ink-text-700: #3a424e;
  --p-ink-text-500: #5a6472;
  --p-ink-text-450: #626c79;  /* B13：小字号元信息在浅色页面上 ≥4.8:1 */
  --p-ink-text-440: #586270;  /* S3-P0：晨光气氛下 11px 元信息落在灰面 (#dbdee4 一档) 上仍需 ≥4.5 */
  --p-ink-text-400: #6b7583;

  /* 强调（冰蓝 → 浅色下换成可读的深蓝） */
  --p-blue-200: #dff3ff;
  --p-blue-300: #c4eaff;
  --p-blue-400: #8fd4ff;
  --p-blue-500: #5cb2e6;
  --p-blue-600: #3f8cb8;
  --p-blue-700: #2172a8;
  --p-blue-800: #17547f;
  --p-blue-900: #0f3f5e;

  /* 状态 */
  --p-red-200: #ffd4d4;
  --p-red-300: #ffb8b8;
  --p-red-400: #e28585;
  --p-red-500: #c25a5a;
  --p-red-700: #b3403f;
  --p-red-800: #8f2f2e;
  --p-green-300: #9fd8b9;
  --p-green-400: #7fc7a1;
  --p-green-700: #237a52;
  --p-amber-400: #e0b184;
  --p-amber-700: #946319;

  /* 纯白 / 纯黑（只给遮罩与叠加层组合用） */
  --p-white: #ffffff;
  --p-black: #000000;

  /* -------------------------------------------------------------- 字体 */
  /* S3 第二阶段：系统字体栈优先，不外链任何字体（离线可用、零依赖） */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* 字号阶梯（8 档，从大到小严格递减，档位含义固定，不要绕过它写裸值） */
  --text-brand: 1.0625rem;                               /* 品牌字标：侧栏 / 手机顶栏的字标 */
  --text-h1: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);     /* 页面主标题：首页欢迎语 */
  --text-title: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);  /* 文档标题：笔记编辑器标题 */
  --text-h2: 1rem;                                       /* 区域标题：页面标题 / 浮层标题 */
  --text-md: 0.9375rem;                                  /* 正文与区块标题：面板标题 */
  --text-sm: 0.8125rem;                                  /* 控件与列表：按钮、输入、列表标题 */
  --text-xs: 0.75rem;                                    /* 标签与元信息：分类标签、计数、时间（12px） */
  --text-2xs: 0.6875rem;                                 /* 微型拉丁标签：只给大写短标签（11px） */

  /* 长文阅读优先：编辑器正文与行长单独成档，不跟 UI 字号绑定 */
  --text-editor: 1rem;                                   /* 编辑器正文 16px */
  --leading-editor: 1.75;                                /* 编辑器行高 1.75 */
  --editor-max-width: 680px;                             /* 编辑器行长上限 */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* 字距按语义分槽：品牌 / 拉丁大写标签 / 紧凑 / 正文 / 界面 / 中文 */
  --tracking-brand: 0.08em;
  --tracking-label: 0.08em;
  --tracking-tight: -0.008em;
  --tracking-body: 0em;
  --tracking-ui: 0em;
  --tracking-cn: 0em;

  /* 数字排版：会跳动的数字统一用它 */
  --numeric-tabular: tabular-nums;

  --leading-tight: 1.3;
  --leading-body: 1.7;

  /* -------------------------------------------------------------- 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* -------------------------------------------------------------- 圆角 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------- 动效 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 90ms;
  --dur: 140ms;
  --dur-slow: 220ms;
  --dur-splash: 2400ms;      /* 首次启动完整品牌动画 */
  --dur-splash-fast: 620ms;  /* 后续启动快速过渡 */

  /* -------------------------------------------------------------- 层级 */
  --z-space: 0;
  --z-shell: 1;
  --z-splash: 40;
  --z-skip: 60;
  --z-dialog: 80;
}

/* ==========================================================================
   2. SEMANTIC — 深色（nexus-dark）
   所有主题共用同一批变量名；值不同，名字不变。
   ========================================================================== */
:root,
:root[data-theme="nexus-dark"] {
  color-scheme: dark;

  /* 面板底色的 RGB 分量：与 --panel-alpha 组合，编辑器可单独调透明度 */
  /* S3 第二阶段（Quiet Native）：面板是实色，层次靠明度差与一条发丝线，
     不再用半透明 + 磨砂模拟「空间感」。 */
  --surface-rgb: 33 35 38;
  --panel-alpha: 1;

  /* ---- 背景层 ---- */
  --color-void: #121315;
  --color-bg: #17181a;
  --color-bg-raised: #1c1d20;
  --color-graphite: #232428;

  /* ---- 表面（面板 / 浮层 / 输入） ---- */
  --color-panel: rgb(var(--surface-rgb) / var(--panel-alpha));
  --color-panel-strong: #26282b;
  --color-panel-hover: #26282b;
  --surface-field: #1b1c1f;
  --surface-inset: #191a1d;

  /* ---- 表面语义槽（S2-B-1） ----
     装饰高光、小芯片底、控件状态各归其位，不再与叠加阶梯共用同一个变量。
     深色这里的数值与旧 overlay-sheen / overlay-strong / overlay-loud 完全等价，
     因此深色渲染零变化；浅色才换成墨色叠加。 */
  --sheen-surface: transparent; /* 面板顶不再有渐亮：装饰性高光一律归零 */
  --surface-chip: rgba(255, 255, 255, 0.045); /* 标签 / 芯片这类小面积表面 */
  --control-hover: rgba(255, 255, 255, 0.05); /* 可交互控件 hover */
  --control-active: rgba(255, 255, 255, 0.09); /* 可交互控件 active */

  /* ---- 白色叠加阶梯（叠在表面上的层次） ---- */
  --overlay-hair: rgba(255, 255, 255, 0.02);
  --overlay-soft: rgba(255, 255, 255, 0.03);
  --overlay-veil: rgba(255, 255, 255, 0.03);

  /* 顶栏表面：吸顶时要用比面板更实的底，才能盖住滚动过去的内容 */
  /* 顶栏是实色：滚过去的内容被实色盖住，不需要模糊与渐变 */
  --topbar-sheen-top: #1b1c1f;
  --topbar-sheen-bottom: #1b1c1f;
  --overlay-mid: rgba(255, 255, 255, 0.04);
  --overlay: rgba(255, 255, 255, 0.045);
  --overlay-strong: rgba(255, 255, 255, 0.05);
  --overlay-louder: rgba(255, 255, 255, 0.08);
  --overlay-max: rgba(255, 255, 255, 0.12);

  /* ---- 边框与分隔 ---- */
  --color-panel-border: rgba(255, 255, 255, 0.085);
  --color-panel-border-strong: rgba(255, 255, 255, 0.14);
  --color-line: rgba(255, 255, 255, 0.07);
  --color-line-soft: rgba(255, 255, 255, 0.045);

  /* ---- 强调色：只保留一个去饱和的冷灰蓝 ----
     用途收窄到三处：当前导航、聚焦环、保存状态。不参与装饰与大面积底色。 */
  --color-ice: #8c9dae;
  --color-ice-strong: #a9b7c4;
  --color-ice-deep: #6c7f92;
  --color-ice-line: rgba(140, 157, 174, 0.34);
  --color-ice-soft: rgba(140, 157, 174, 0.14);
  --color-ice-ghost: rgba(140, 157, 174, 0.07);
  --accent-tint: rgba(140, 157, 174, 0.13);      /* 当前项底色 */
  --accent-hover: rgba(140, 157, 174, 0.2);      /* 当前项 hover 底 */
  --accent-ring: rgba(140, 157, 174, 0.22);      /* 聚焦外环 */
  --accent-strong-hover: #c3cdd7;                /* 强调文字 hover */

  /* ---- 强调发光（装饰，浅色下大幅收敛） ---- */
  --glow-mark: transparent;
  --glow-key: transparent;
  --glow-splash: transparent;

  /* ---- 文字 ---- */
  --color-text: #e6e7e8;
  --color-text-soft: #c9cbcd;
  --color-text-mute: #a8aaad;
  --color-text-faint: #97999d;                   /* 11px 元信息在实色面板上 ≥4.9:1 */

  /* ---- 状态 ---- */
  --color-focus: rgba(140, 157, 174, 0.7);
  --color-danger: #d98c8c;
  --color-danger-soft: rgba(217, 140, 140, 0.14);
  --color-danger-line: rgba(217, 140, 140, 0.32);
  --color-danger-tint: rgba(217, 140, 140, 0.16);
  --color-danger-hover: rgba(217, 140, 140, 0.22);
  --color-danger-strong: #e8b0b0;
  --color-danger-strong-hover: #f2cccc;
  --color-success: #93c6a8;
  --color-warning: #cdb083;

  /* ---- 遮罩（弹窗 / 全屏错误） ---- */
  --scrim: rgba(10, 10, 11, 0.55);
  --scrim-strong: rgba(10, 10, 11, 0.82);

  /* ---- 阴影 ---- */
  /* 悬浮投影清零：面板靠 1px 边界与明度差浮起，浮层只留一层极浅外投影 */
  --shadow-panel: none;
  --shadow-float: 0 16px 36px -24px rgba(0, 0, 0, 0.8);
  --shadow-field: none;

  /* ---- 滚动条 ---- */
  --scrollbar-thumb: rgba(255, 255, 255, 0.09);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);

  /* ---- 装饰：空间背景层 ---- */
  /* 背景：稳定纯色一档，四层装饰（网格 / 冷光 / 星点 / 暗角）全部关掉。
     这些变量保留名字与位置，改回去只改值。 */
  --space-bg-top: #17181a;
  --space-bg-mid: #17181a;
  --space-glow-ice: transparent;
  --space-glow-deep: transparent;
  --space-vignette: transparent;
  --space-vignette-top: transparent;
  --space-grid-color: transparent;
  --space-stars-image: none;

  /* ---- 装饰：开屏 ---- */
  --splash-bg-top: #17181a;
  --splash-bg-mid: #121315;
  --splash-ring: rgba(255, 255, 255, 0.14);
  --splash-ring-soft: rgba(255, 255, 255, 0.08);
  --splash-line: rgba(255, 255, 255, 0.1);

  /* ---- 布局尺寸 ---- */
  --shell-max: 1160px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --zone-gap: clamp(16px, 1.8vw, 24px);
  --panel-pad: 20px;
  --panel-blur: 0px;             /* 面板不磨砂：实色一档 */
  --zone-row-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  --hit-min: 44px;

  /* ---- 组件参数（第 3 层，见文件末尾说明） ---- */
  --tool-tile-min: 176px;
  --recent-item-pad: 10px 12px;
  --splash-mark-size: 74px;
}

/* ==========================================================================
   2b. SEMANTIC — 浅色（nexus-light）
   只覆盖语义层：名字与深色完全一致，组件不需要任何分支。
   浅色不是反色：表面是"纸"，强调色改为可读的深蓝，阴影变浅而柔。
   ========================================================================== */
:root[data-theme="nexus-light"] {
  color-scheme: light;

  /* 暖白纸面：面板比页面亮一档就够，不需要透明度与模糊。 */
  --surface-rgb: 252 251 249;
  --panel-alpha: 1;

  /* ---- 背景层：页面比面板暗一档，纵深由此产生 ---- */
  --color-void: #efece7;
  --color-bg: #f3f1ed;
  --color-bg-raised: #eeebe6;
  --color-graphite: #e7e3dd;

  /* ---- 表面 ---- */
  --color-panel: rgb(var(--surface-rgb) / var(--panel-alpha));
  --color-panel-strong: #ffffff;
  --color-panel-hover: #f7f4f0;
  --surface-field: #fbfaf8;
  --surface-inset: #f1eee9;

  /* ---- 表面语义槽（S2-B-1）：浅色一律用墨色叠加，不用白色叠加 ----
     白色叠在纸色面板上等于不可见，这是 B10 的根因。 */
  --sheen-surface: transparent; /* 面板顶不再有渐亮 */
  --surface-chip: rgba(62, 54, 45, 0.05); /* 小芯片用墨色叠加，靠边框收边 */
  --control-hover: rgba(62, 54, 45, 0.045); /* 控件 hover */
  --control-active: rgba(62, 54, 45, 0.08); /* 控件 active */

  /* ---- 墨色叠加阶梯（深色用白、浅色用墨） ---- */
  --overlay-hair: rgba(62, 54, 45, 0.02);
  --overlay-soft: rgba(62, 54, 45, 0.03);
  --overlay-veil: rgba(62, 54, 45, 0.03);
  --topbar-sheen-top: #f4f2ee; /* 顶栏实色 */
  --topbar-sheen-bottom: #f4f2ee;
  --overlay-mid: rgba(62, 54, 45, 0.04);
  --overlay: rgba(62, 54, 45, 0.05);
  --overlay-strong: rgba(62, 54, 45, 0.06);
  --overlay-louder: rgba(62, 54, 45, 0.09);
  --overlay-max: rgba(62, 54, 45, 0.14);

  /* ---- 边框与分隔：收边，不承担分层 ---- */
  --color-panel-border: rgba(62, 54, 45, 0.12);
  --color-panel-border-strong: rgba(62, 54, 45, 0.18);
  --color-line: rgba(62, 54, 45, 0.1);
  --color-line-soft: rgba(62, 54, 45, 0.06);

  /* ---- 强调色：同一枚冷灰蓝在纸面上的深版 ---- */
  --color-ice: #5b7288;
  --color-ice-strong: #465b6e;
  --color-ice-deep: #3c4d5d;
  --color-ice-line: rgba(91, 114, 136, 0.32);
  --color-ice-soft: rgba(91, 114, 136, 0.12);
  --color-ice-ghost: rgba(91, 114, 136, 0.06);
  --accent-tint: rgba(91, 114, 136, 0.12);
  --accent-hover: rgba(91, 114, 136, 0.18);
  --accent-ring: rgba(91, 114, 136, 0.2);
  --accent-strong-hover: #33434f;

  /* ---- 发光全部关闭：纸面不发光 ---- */
  --glow-mark: transparent;
  --glow-key: transparent;
  --glow-splash: transparent;

  /* ---- 文字 ---- */
  --color-text: #1d1b18;
  --color-text-soft: #3b3833;
  --color-text-mute: #5b5750;
  --color-text-faint: #655f57;                   /* 11px 元信息在纸面/卡片底上 ≥4.85:1 */

  /* ---- 状态 ---- */
  --color-focus: rgba(91, 114, 136, 0.75);
  --color-danger: #a83b39;
  --color-danger-soft: rgba(168, 59, 57, 0.1);
  --color-danger-line: rgba(168, 59, 57, 0.28);
  --color-danger-tint: rgba(168, 59, 57, 0.12);
  --color-danger-hover: rgba(168, 59, 57, 0.18);
  --color-danger-strong: #8f2f2e;
  --color-danger-strong-hover: #7a2625;
  --color-success: #2a7350;
  --color-warning: #8a5c15;

  /* ---- 遮罩 ---- */
  --scrim: rgba(38, 33, 27, 0.32);
  --scrim-strong: rgba(38, 33, 27, 0.55);

  /* ---- 阴影：浅色下靠"边缘 + 极浅投影"，不靠黑雾 ---- */
  --shadow-panel: none;
  --shadow-float: 0 18px 40px -28px rgba(38, 33, 27, 0.45);
  --shadow-field: none;

  /* ---- 滚动条 ---- */
  --scrollbar-thumb: rgba(62, 54, 45, 0.16);
  --scrollbar-thumb-hover: rgba(62, 54, 45, 0.26);

  /* ---- 装饰：纸面纯色一档，装饰层全部关闭 ---- */
  --space-bg-top: #f3f1ed;
  --space-bg-mid: #f3f1ed;
  --space-glow-ice: transparent;
  --space-glow-deep: transparent;
  --space-vignette: transparent;
  --space-vignette-top: transparent;
  --space-grid-color: transparent;
  --space-stars-image: none;

  /* ---- 装饰：开屏（浅色下用描边叙事，不用发光） ---- */
  --splash-bg-top: #f5f3ef;
  --splash-bg-mid: #ece9e4;
  --splash-ring: rgba(62, 54, 45, 0.16);
  --splash-ring-soft: rgba(62, 54, 45, 0.08);
  --splash-line: rgba(62, 54, 45, 0.12);

  --panel-pad: 20px;
  --panel-blur: 0px;
}

/* ==========================================================================
   3. COMPONENT — 组件尺寸与状态槽（两套主题共用；需要时在主题块里覆盖）
   ========================================================================== */
:root {
  /* ---- 控件尺寸栈：Button 3 档 / IconButton 3 档 / Field 3 档 ---- */
  --btn-h-sm: 28px;
  --btn-h: 32px;
  --btn-h-lg: 38px;

  --icon-btn-sm: 28px;
  --icon-btn: 34px;
  --icon-btn-lg: 38px;

  --field-h-sm: 28px;
  --field-h: 34px;
  --field-h-lg: 42px;

  /* ---- 图标：只有 3 档视觉尺寸，笔画统一 1.5 ---- */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-lg: 20px;

  /* ---- 控件内边距 ---- */
  --control-pad-x-sm: 10px;
  --control-pad-x: 12px;
  --control-pad-x-lg: 16px;

  /* ---- 圆角 / 聚焦 / 行高 ---- */
  --radius-control: var(--radius-sm);
  --radius-surface: var(--radius-lg);
  --radius-overlay: var(--radius-lg);
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --row-h: 30px;
  --chip-h: 30px;

  /* 原生下拉的弹出层不跟随 color-scheme 继承，必须显式给底色 */
  --option-bg: var(--p-ink-800);
}

:root[data-theme="nexus-light"] {
  --option-bg: var(--p-paper-50);
}

/* ==========================================================================
   4. ATMOSPHERE — 气氛（S3-P0）
   --------------------------------------------------------------------------
   气氛只覆盖「装饰层」：星点、网格、外发光、面板顶光、面板浓度、聚焦环。
   任何气氛都不改文字色、主色、字号、间距、圆角 —— 对比度口径因此不随气氛漂移。
   主题（data-theme）与气氛（data-atmo）是两个正交开关：
   midnight / quiet 属于深色，dawn / pure 属于浅色，由 ui/atmo.js 同时写入。
   ========================================================================== */
:root {
  /* 空间骨架尺寸：四端差异由 layout.css 的断点覆盖 */
  /* 笔记工作台（S3-P1：分类收进列表顶部，不再单独占一列）
     这三个也必须放在 :root —— 定义在主题块里会变成 0,2,0，断点压不住 */
  --notes-list-width: 320px;
  --notes-row-radius: var(--radius-sm);
  --notes-editor-max: 760px;

  --rail-w: 232px;
  --rail-w-compact: 72px;
  --content-max: 1040px;
  --topbar-h: 66px;
  --tabbar-h: 61px;
  --entry-min: 176px;
  --z-topbar: 5;
  --pad-x: clamp(24px, 2.4vw, 36px);
  --block-gap: 34px;
  --content-gap: 22px;

  /* 首页搜索框高度：定义在 :root 而不是主题块，
     否则主题选择器的特异性会压过 layout.css 的断点覆盖（S3-P0 修正） */
  --search-height: 58px;

  /* 安全区（P3-A）：刘海、灵动岛、横屏圆角。全部收成四个 0 兜底的自定义属性，
     页面只引用这四个名字、不直接写 env() —— 便于测试，也便于将来换实现。
     非全屏浏览器里 env() 恒为 0，桌面端因此不受影响。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* 四种气氛退化为「背景温度 + 面板一档」的微差：不再有星点、网格、光晕。
   midnight 是深色出厂值，不写覆盖；dawn 是浅色出厂值，也不写覆盖。 */

/* 深夜：比出厂再冷半度 */
:root[data-atmo="midnight"] {
  --space-bg-top: #161719;
  --space-bg-mid: #141517;
}

/* 静默：面板贴回页面，只剩一条边界（比出厂的面板暗半档） */
:root[data-atmo="quiet"] {
  --space-bg-top: #17181a;
  --space-bg-mid: #17181a;
  --color-panel: #1b1c1f;
}

/* 晨光：纸面抬亮半度，面板更白 */
:root[data-atmo="dawn"] {
  --space-bg-top: #f6f4f0;
  --space-bg-mid: #efede8;
  --color-panel: #fdfcfa;
}

/* 纯粹：没有温度差，面板也只比页面亮半档，靠边界说话 */
:root[data-atmo="pure"] {
  --space-bg-top: #f4f2ee;
  --space-bg-mid: #f4f2ee;
  --color-panel: #f8f6f3;
  --color-panel-border: rgba(62, 54, 45, 0.14);
}