/* frontend/variables/_spacing.css */
/**
 * 变量：间距变量定义
 * 
 * 定义统一的间距系统变量
 * 字段
 * @meta.name {default="间距变量",name="间距变量",description="间距变量，用于描述变量的名称"}
 * @meta.description {default="定义统一的间距系统，包括基础间距、组件间距、布局间距等",name="定义统一的间距系统，包括基础间距、组件间距、布局间距等",description="定义统一的间距系统，包括基础间距、组件间距、布局间距等，用于描述变量的用途"}
 * @meta.category {default="variables",name="分类",description="分类，用于标识该文件所属的分类"}
 * @meta.panel {default="spacing",name="panel",description="panel"}
 * @meta.disk_kind {default="variables",name="disk_kind",description="disk_kind"}
 */

:root {
    /* ========== 基础间距 ========== */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    
    /* ========== 组件间距 ========== */
    --spacing-component-padding: var(--spacing-md);
    --spacing-component-gap: var(--spacing-sm);
    --spacing-section-margin: var(--spacing-xl);
    
    /* ========== 布局间距 ========== */
    /*
     * 版心（container）契约 —— 全站唯一来源。
     * 所有壳层（header 行、footer、breadcrumb、正文、bottom-slot）必须消费这两个 token，
     * 禁止再写 width: calc(100% - Npx) 或按断点各写一个 padding，否则 Header/正文/Footer 会不同步。
     *
     * 沟槽用 clamp 做连续缩放：窄屏 16px → 宽屏 40px，不需要任何 @media 覆写。
     */
    --weline-container-gutter: clamp(1rem, 0.9rem + 1.5vw, 2.5rem);
    /*
     * 页面画布（page canvas）：主题要换底色/纸纹只设这四个 token，
     * 禁止再写 html body{...!important} 去和骨架打架。
     */
    --weline-page-canvas-color: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--color-bg-canvas, var(--weline-theme-canvas, #ffffff))));
    --weline-page-canvas-image: none;
    --weline-page-canvas-size: auto;
    --weline-page-canvas-repeat: repeat;
    --weline-page-canvas-position: 0 0;

    --spacing-container-padding: var(--weline-container-gutter);
    --spacing-container-max-width: 1440px;
    --spacing-grid-gap: var(--spacing-md);
    --layout-header-height: 70px;
    --layout-sidebar-width: 280px;
    --header-height: var(--layout-header-height);
    --sidebar-width: var(--layout-sidebar-width);

    /* ========== REQ-THEME-0007 扩展刻度（禁止业务硬编码） ========== */
    --spacing-px: 1px;
    --spacing-0_5: 0.125rem;   /* 2px */
    --spacing-1_5: 0.375rem;   /* 6px */
    --spacing-2_5: 0.625rem;   /* 10px */
    --spacing-3_5: 0.875rem;   /* 14px */
    --spacing-4_5: 1.125rem;   /* 18px */
    --spacing-5_5: 1.375rem;   /* 22px */
    --spacing-7: 1.75rem;      /* 28px */
    --spacing-9: 2.25rem;      /* 36px */
    --spacing-11: 2.75rem;     /* 44px */
    --spacing-13: 3.25rem;     /* 52px */
    --spacing-15: 3.75rem;     /* 60px */
    /* ========== 控件高度刻度（叶子默认 = 提取前硬编码；改盘即全局生效） ========== */
    --control-height-xs: 28px;
    --control-height-sm: 35px;
    --control-height-md: 40px;
    --control-height: 42px;
    --control-height-lg: 44px;
    --control-height-xl: 48px;
    --control-height-2xl: 56px;
    --size-control-xs: var(--control-height-xs);
    --size-control-sm: var(--control-height-sm);
    --size-control-md: var(--control-height-md);
    --size-control-lg: var(--control-height-lg);
    --size-control-xl: var(--control-height-xl);
    --size-control-2xl: var(--control-height-2xl);
    --size-control-42: var(--control-height);
    --size-control-50: 50px;
    --size-icon-sm: 16px;
    --size-icon-md: 20px;
    --size-icon-lg: 24px;
    --size-scrollbar: 6px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --spacing-neg-px: -1px;
    --spacing-neg-0_5: -2px;
    --spacing-neg-2_5: -10px;
    --spacing-0_4: 0.4rem;
    --spacing-0_45: 0.45rem;
    --spacing-0_55: 0.55rem;
    --spacing-0_65: 0.65rem;
    --spacing-0_7: 0.7rem;
    --spacing-0_9: 0.9rem;
    --spacing-0_95: 0.95rem;
    --spacing-1_05: 1.05rem;
    --spacing-2_25: 2.25rem;
    --spacing-5rem: 5rem;
    --size-panel-120: 120px;
    --size-panel-180: 180px;
    --size-panel-220: 220px;
    --size-panel-300: 300px;
    --size-content-640: 640px;
    --size-content-1180: 1180px;
    --size-modal-sm: 420px;
    --size-modal-md: var(--size-content-640);
    --size-modal-lg: 860px;
    --size-modal-xl: 1120px;
    --breakpoint-xs: 480px;

    --spacing-0_2: 0.2rem;
    --spacing-0_8: 0.8rem;
    --spacing-0_85: 0.85rem;
    --spacing-1_2: 1.2rem;
    --spacing-2_75: 2.75rem;
    --spacing-neg-1_5: -3px;
    --size-panel-150: 150px;
    --size-panel-200: 200px;
    --size-panel-360: 360px;
    --size-panel-400: 400px;
    --size-content-720: 720px;
    --size-content-900: 900px;
    --size-content-960: 960px;
    --size-control-42: var(--control-height);
    --font-size-13: 0.8125rem;
    --token-size-34px: var(--control-height-sm);
    --token-size-35px: var(--control-height-sm);
    --token-size-36px: var(--control-height-sm);
    --token-size-40px: var(--control-height-md);
    --token-size-42px: var(--control-height);
    --token-size-44px: var(--control-height-lg);
    --token-size-48px: var(--control-height-xl);

    /* ========== foundation 间距叶子（主题包自带，不依赖 UI foundation 是否加载） ========== */
    --weline-space-1: 0.25rem;
    --weline-space-2: 0.5rem;
    --weline-space-3: 0.75rem;
    --weline-space-4: 1rem;
    --weline-space-5: 1.25rem;
    --weline-space-6: 1.5rem;
    --weline-space-8: 2rem;
    --weline-space-9: 2.25rem;
    --weline-space-10: 2.5rem;
    --weline-space-12: 3rem;
    --weline-space-15: 3.75rem;
    --transition-fast: 0.16s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.32s ease;

    /* ========== foundation 控件高度（与 theme 组件默认联动） ========== */
    --weline-control-height-sm: var(--control-height-sm);
    --weline-control-height: var(--control-height);
    --weline-control-height-lg: var(--control-height-lg);

    /* ========== 数字刻度别名（兼容 var(--spacing-N) / 布局桥接） ========== */
    --spacing-1: var(--weline-space-1);
    --spacing-2: var(--weline-space-2);
    --spacing-3: var(--weline-space-3);
    --spacing-4: var(--weline-space-4);
    --spacing-5: var(--weline-space-5);
    --spacing-6: var(--weline-space-6);
    --spacing-8: var(--weline-space-8);
    --spacing-10: var(--weline-space-10);
    --spacing-12: var(--weline-space-12);
    --layout-max-width: var(--spacing-container-max-width);
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-overlay: 998;
    --z-index-drawer: 1045;
    --loader-border-width: 3px;
    --container-max-width: var(--layout-max-width);
    /* 可视化 Banner 默认高度；部件实例可用主题 token 或历史 CSS 长度覆盖。 */
    --size-hero-height: 560px;

    /* ========== weshop / 历史桥接别名（布局不得空） ========== */
    --weshop-spacing-xs: var(--spacing-xs);
    --weshop-spacing-sm: var(--spacing-sm);
    --weshop-spacing-md: var(--spacing-md);
    --weshop-spacing-lg: var(--spacing-lg);
    --weshop-spacing-xl: var(--spacing-xl);
    --weshop-spacing-2xl: var(--spacing-2xl);
    --weshop-spacing-3xl: var(--spacing-3xl);
    --weshop-container-max-width: var(--layout-max-width);
    --weshop-container-padding: var(--spacing-container-padding);
    --weline-layout-content-max-width: var(--layout-max-width);
    /*
     * 内容区左右内边距：恒等于 --spacing-container-padding。
     * 禁止再用「视口≥版心则内沿归零」公式——Header/独立壳/contents 提升轨会贴边。
     * 宽屏外沿由 max-width + margin:auto 提供；内沿 padding 永不撤掉。
     */
    --weline-layout-content-padding-inline: var(--weline-container-gutter);
    --weshop-control-height: var(--control-height);
    --weshop-border-width: var(--border-width);
    --weshop-line-height-tight: var(--line-height-tight);
    --weshop-line-height-normal: var(--line-height-normal);
    --weshop-line-height-relaxed: var(--line-height-relaxed);

    /* Layout stability skeleton / line clamp (Theme mechanism; design themes may override) */
    --weline-skeleton-card-min-h: 14rem;
    --weline-lines-lh: 1.4;
}

/* frontend/variables/_auto-literals.css */
/**
 * 自动收编的业务字面量 Token（REQ-THEME-0007）
 * 叶子值允许出现在 variables/；业务 CSS/PHTML 只引用 var(--token-*)。
 * @meta.name {default="自动字面量Token",name="自动字面量Token",description="自动字面量Token"}
 * @meta.category {default="variables",name="分类",description="分类"}
 * @meta.panel {default="spacing",name="panel",description="panel"}
 * @meta.disk_kind {default="variables",name="disk_kind",description="disk_kind"}
 */

:root {

    /* sizes */
    --token-size-0-02em: -0.02em;
    --token-size-0-02em: 0.02em;
    --token-size-0-03em: -0.03em;
    --token-size-0-04em: 0.04em;
    --token-size-0-05em: 0.05em;
    --token-size-0-08em: 0.08em;
    --token-size-0-15rem: 0.15rem;
    --token-size-0-1em: -0.1em;
    --token-size-0-1rem: 0.1rem;
    --token-size-0-24rem: 0.24rem;
    --token-size-0-375rem: 0.375rem;
    --token-size-0-3rem: 0.3rem;
    --token-size-0-5px: 0.5px;
    --token-size-0-6rem: 0.6rem;
    --token-size-0-76rem: 0.76rem;
    --token-size-0-77rem: 0.77rem;
    --token-size-0-78rem: 0.78rem;
    --token-size-0-8rem: 0.8rem;
    --token-size-0-92rem: 0.92rem;
    --token-size-1-15rem: 1.15rem;
    --token-size-1-1rem: 1.1rem;
    --token-size-1-35rem: 1.35rem;
    --token-size-1-4rem: 1.4rem;
    --token-size-1-55rem: 1.55rem;
    --token-size-1-5em: 1.5em;
    --token-size-1-5rem: 1.5rem;
    --token-size-1-65rem: 1.65rem;
    --token-size-1-6rem: 1.6rem;
    --token-size-1000px: 1000px;
    --token-size-100px: 100px;
    --token-size-10px: 10px;
    --token-size-1100px: 1100px;
    --token-size-1120px: 1120px;
    --token-size-11px: 11px;
    --token-size-1200px: 1200px;
    --token-size-12rem: 12rem;
    --token-size-132px: 132px;
    --token-size-14px: 14px;
    --token-size-15px: 15px;
    --token-size-160px: 160px;
    --token-size-168px: 168px;
    --token-size-17px: 17px;
    --token-size-19px: 19px;
    --token-size-2-35rem: 2.35rem;
    --token-size-2-4rem: 2.4rem;
    --token-size-2-5rem: 2.5rem;
    --token-size-2-85rem: 2.85rem;
    --token-size-20px: -20px;
    --token-size-20px: 20px;
    --token-size-22-5rem: 22.5rem;
    /* Positive leaf: width/height consumers (mini-cart swatch, toast) reject negative. */
    --token-size-22px: 22px;
    --token-size-240px: 240px;
    --token-size-250px: 250px;
    --token-size-25px: 25px;
    --token-size-260px: 260px;
    --token-size-26px: 26px;
    --token-size-280px: 280px;
    --token-size-3-5rem: 3.5rem;
    --token-size-30px: 30px;
    --token-size-34px: 34px;
    --token-size-38px: 38px;
    --token-size-420px: 420px;
    --token-size-440px: 440px;
    --token-size-450px: 450px;
    --token-size-45px: 45px;
    --token-size-46px: 46px;
    --token-size-46rem: 46rem;
    --token-size-4px: -4px;
    --token-size-4rem: 4rem;
    --token-size-500px: 500px;
    --token-size-520px: 520px;
    --token-size-550px: 550px;
    --token-size-560px: 560px;
    --token-size-56rem: 56rem;
    --token-size-5px: -5px;
    --token-size-600px: 600px;
    --token-size-620px: 620px;
    --token-size-64px: 64px;
    --token-size-6px: -6px;
    --token-size-6px: 6px;
    --token-size-6rem: 0.6rem;
    --token-size-6rem: 6rem;
    --token-size-700px: 700px;
    --token-size-72px: 72px;
    --token-size-760px: 760px;
    --token-size-800px: 800px;
    --token-size-80px: -80px;
    --token-size-860px: 860px;
    --token-size-8px: -8px;
    --token-size-90px: -90px;
    --token-size-92px: 92px;
    --token-size-9999px: -9999px;
    --token-size-9px: 9px;
    /* breakpoints */
    --token-bp-1024px: 1024px;
    --token-bp-1100px: 1100px;
    --token-bp-520px: 520px;
    --token-bp-560px: 560px;
    --token-bp-575-98px: 575.98px;
    --token-bp-620px: 620px;
    --token-bp-720px: 720px;
    --token-bp-760px: 760px;
    --token-bp-767px: 767px;
    --token-bp-769px: 769px;
    --token-bp-820px: 820px;
    --token-bp-860px: 860px;
    --token-bp-880px: 880px;
    --token-bp-900px: 900px;
    --token-bp-980px: 980px;
    --token-bp-991-98px: 991.98px;
    --token-bp-992px: 992px;

    /* widget token migrate sizes */
    --token-size-0-01em: 0.01em;
    --token-size-0-05rem: 0.05rem;
    --token-size-0-06em: 0.06em;
    --token-size-0-12em: 0.12em;
    --token-size-0-14em: 0.14em;
    --token-size-0-18em: 0.18em;
    --token-size-0-18rem: 0.18rem;
    --token-size-0-22em: 0.22em;
    --token-size-0-22rem: 0.22rem;
    --token-size-0-28rem: 0.28rem;
    --token-size-0-2em: 0.2em;
    --token-size-0-32em: 0.32em;
    --token-size-0-35rem: 0.35rem;
    --token-size-0-52rem: 0.52rem;
    --token-size-0-5625rem: 0.5625rem;
    --token-size-0-65em: 0.65em;
    --token-size-0-68rem: 0.68rem;
    --token-size-0-75em: 0.75em;
    --token-size-0-7em: 0.7em;
    --token-size-0-82rem: 0.82rem;
    --token-size-0-84rem: 0.84rem;
    --token-size-0-86rem: 0.86rem;
    --token-size-0-9375rem: 0.9375rem;
    --token-size-0-98rem: 0.98rem;
    --token-size-01em: 01em;
    --token-size-02em: 02em;
    --token-size-1-0625rem: 1.0625rem;
    --token-size-1-125em: 1.125em;
    --token-size-1-12rem: 1.12rem;
    --token-size-1-2em: 1.2em;
    --token-size-1-3rem: 1.3rem;
    --token-size-1-45em: 1.45em;
    --token-size-1-45rem: 1.45rem;
    --token-size-1-5px: 1.5px;
    --token-size-1-85rem: 1.85rem;
    --token-size-1023px: 1023px;
    --token-size-10rem: 10rem;
    --token-size-11-25rem: 11.25rem;
    --token-size-11-5rem: 11.5rem;
    --token-size-110px: 110px;
    --token-size-11rem: 11rem;
    --token-size-12-5rem: 12.5rem;
    --token-size-125rem: 125rem;
    --token-size-13-25rem: 13.25rem;
    --token-size-13-5rem: 13.5rem;
    --token-size-13-75rem: 13.75rem;
    --token-size-13px: 13px;
    --token-size-148px: 148px;
    --token-size-15-5rem: 15.5rem;
    --token-size-15rem: 15rem;
    --token-size-16rem: 16rem;
    --token-size-18em: 18em;
    --token-size-18px: 18px;
    --token-size-18rem: 18rem;
    --token-size-19-5rem: 19.5rem;
    --token-size-2-15em: 2.15em;
    --token-size-2-1rem: 2.1rem;
    --token-size-2-5em: 2.5em;
    --token-size-20rem: 20rem;
    --token-size-21rem: 21rem;
    --token-size-22rem: 22rem;
    --token-size-230px: 230px;
    --token-size-24rem: 24rem;
    --token-size-25rem: 25rem;
    --token-size-26rem: 26rem;
    --token-size-28em: 28em;
    --token-size-28rem: 28rem;
    --token-size-2em: 2em;
    --token-size-2rem: 2rem;
    --token-size-3-5em: 3.5em;
    --token-size-320px: 320px;
    --token-size-32rem: 32rem;
    --token-size-35rem: 35rem;
    --token-size-36px: 36px;
    --token-size-36rem: 36rem;
    --token-size-39-99rem: 39.99rem;
    --token-size-4-1rem: 4.1rem;
    --token-size-4-25rem: 4.25rem;
    --token-size-4-5rem: 4.5rem;
    --token-size-40rem: 40rem;
    --token-size-42rem: 42rem;
    --token-size-47-99rem: 47.99rem;
    --token-size-5-5rem: 5.5rem;
    --token-size-52px: 52px;
    --token-size-52rem: 52rem;
    --token-size-559px: 559px;
    --token-size-55rem: 55rem;
    --token-size-6-5rem: 6.5rem;
    --token-size-625rem: 625rem;
    --token-size-65rem: 65rem;
    --token-size-7-25rem: 7.25rem;
    --token-size-7-4rem: 7.4rem;
    --token-size-7-5rem: 7.5rem;
    --token-size-75rem: 75rem;
    --token-size-7px: 7px;
    --token-size-7rem: 7rem;
    --token-size-8-5rem: 8.5rem;
    --token-size-8-75rem: 8.75rem;
    --token-size-8125rem: 8125rem;
    --token-size-85rem: 85rem;
    --token-size-875rem: 875rem;
    --token-size-88px: 88px;
    --token-size-8rem: 8rem;
    --token-size-9-5rem: 9.5rem;
    --token-size-920px: 920px;
    --token-size-96px: 96px;
    --token-size-999px: 999px;
    --token-size-9rem: 9rem;

    /* widget migrate fixup sizes */
    --token-size-0-625rem: 0.625rem;
    --token-size-1-05rem: 1.05rem;
    --token-size-1-1em: 1.1em;
}

/* frontend/variables/_typography.css */
/**
 * 变量：字体变量定义
 *
 * 定义字体系统相关的变量
 * 字段
 * @meta.name {default="字体变量",name="字体变量",description="字体变量，用于描述变量的名称"}
 * @meta.description {default="定义字体系统相关的变量，包括字体族、字体大小、字体粗细、行高等",name="定义字体系统相关的变量，包括字体族、字体大小、字体粗细、行高等",description="定义字体系统相关的变量，包括字体族、字体大小、字体粗细、行高等，用于描述变量的用途"}
 * @meta.category {default="variables",name="分类",description="分类，用于标识该文件所属的分类"}
 * @meta.panel {default="typography",name="panel",description="panel"}
 * @meta.disk_kind {default="variables",name="disk_kind",description="disk_kind"}
 */

:root {
    /* ========== 字体族 #font-family ========== */
    --font-family-base: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-family-display: var(--font-family-base);
    --font-family-ui: var(--font-family-base);
    --font-family-serif: Georgia, "Times New Roman", serif;
    --font-family-mono: "Courier New", Courier, monospace;

    /* ========== 字体大小 #font-size ========== */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.75rem;   /* 28px */
    --font-size-4xl: 2rem;      /* 32px */

    /* ========== 字体粗细 #font-weight ========== */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ========== 行高 #line-height ========== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ========== 字间距 #letter-spacing ========== */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* ========== 字体别名 ========== */
    --font-size-md: var(--font-size-base);
    --font-size-2_5xl: 1.375rem; /* 22px */
    --font-size-xxl: var(--font-size-2xl);

    /* ========== foundation 字体别名 ========== */
    --weline-font-sans: var(--font-family-base);
    --weline-font-serif: var(--font-family-serif);
    --weline-font-display: var(--font-family-display);
    --weline-font-ui: var(--font-family-ui);
    --weline-font-mono: var(--font-family-mono);
    --weline-font-size-xs: var(--font-size-xs);
    --weline-font-size-sm: var(--font-size-sm);
    --weline-font-size-base: var(--font-size-base);
    --weline-font-size-lg: var(--font-size-lg);
    --weline-font-size-xl: var(--font-size-xl);
    --weline-font-size-2xl: var(--font-size-2xl);
    --weline-font-size-3xl: var(--font-size-3xl);
    --weline-font-size-4xl: var(--font-size-4xl);
    --weline-font-weight-medium: var(--font-weight-medium);
    --weline-font-weight-semibold: var(--font-weight-semibold);
    --weline-font-weight-bold: var(--font-weight-bold);
    --weline-line-height: var(--line-height-normal);

    /* ========== weshop 字号桥接 ========== */
    --weshop-font-size-xs: var(--font-size-xs);
    --weshop-font-size-sm: var(--font-size-sm);
    --weshop-font-size-base: var(--font-size-base);
    --weshop-font-size-lg: var(--font-size-lg);
    --weshop-font-size-xl: var(--font-size-xl);
    --weshop-font-size-2xl: var(--font-size-2xl);
    --weshop-font-size-3xl: var(--font-size-3xl);
    --weshop-font-size-4xl: var(--font-size-4xl);
}

/* frontend/colors/_default.css */
/**
 * 色系：default
 *
 * Weline 框架默认品牌色板：中性电商（石青绿主色 + slate 顶栏），非 Commerce / 非水墨默认身份
 * 字段
 * @meta.name {default="default",name="default",description="default，用于描述色系的名称"}
 * @meta.description {default="默认主题品牌色：石青绿主色与中性 slate 交互面，对齐框架默认店面",name="默认主题品牌色：石青绿主色与中性 slate 交互面，对齐框架默认店面",description="默认主题品牌色：石青绿主色与中性 slate 交互面，对齐框架默认店面，用于描述色系的用途"}
 * @meta.theme {default="default",name="主题标识",description="主题标识，用于标识该色系对应的主题名称"}
 * @meta.panel {default="color",name="panel",description="panel"}
 * @meta.disk_kind {default="colors",name="disk_kind",description="disk_kind"}
 * @meta.palette_role {default="brand",name="palette_role",description="palette_role"}
 */

:root,
[data-theme="default"],
[data-theme="light"] {
    /* ========== 品牌色（石青绿） ========== */
    --color-primary: #0f766e;
    --color-primary-light: #14b8a6;
    --color-primary-dark: #0d5f59;
    --color-primary-border: #0a4f4a;
    --color-primary-rgb: 15, 118, 110;
    --color-primary-hover: #0d5f59;
    --color-primary-active: #0a4f4a;
    --color-primary-bg-subtle: #f0fdfa;
    --color-primary-border-subtle: #99f6e4;
    --color-primary-text-emphasis: #115e59;
    --color-on-primary: #f8fafc;

    /* ========== 文本色（默认可继承） ========== */
    --color-text: #111827;
    --color-text-rgb: 17, 24, 39;
    --color-emphasis-rgb: 17, 24, 39;
    --color-text-primary: var(--color-text);
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #6b7280;
    --color-text-subtle: #6b7280;
    --color-text-disabled: #c7c7c7;
    --color-text-dark: #111827;
    --color-text-muted: #4b5563;
    --color-text-placeholder: #9ca3af;
    --color-text-inverse: #ffffff;
    --color-text-light: #f8fafc;
    --color-text-light-secondary: #e5e7eb;
    --color-text-on-dark: #f8fafc;
    --color-text-on-dark-muted: #cbd5e1;

    /* ========== 背景 / 表面（默认可继承） ========== */
    --color-bg-canvas: #ffffff;
    --color-bg-canvas-rgb: 255, 255, 255;
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f3f4f6;
    --color-bg-tertiary: #e5e7eb;
    --color-bg-dark: #1f2937;
    --color-bg-dark-secondary: #111827;
    --color-bg-dark-tertiary: #374151;
    --color-bg-overlay: rgb(15 23 42 / 0.42);
    --color-surface: var(--color-bg-primary);
    --color-surface-subtle: var(--color-bg-secondary);
    --color-surface-muted: var(--color-bg-tertiary);
    --color-surface-hover: #f3f4f6;
    --color-surface-disabled: #f3f4f6;
    --color-on-dark-soft: rgba(255, 255, 255, 0.08);

    /* ========== 边框色（默认可继承） ========== */
    --color-border-default: #e5e7eb;
    --color-border-subtle: #f3f4f6;
    --color-border-strong: #9ca3af;
    --color-border-emphasis: #9ca3af;
    --color-border-focus: #0f766e;
    --color-border-light: #f3f4f6;

    /* ========== 强调色 ========== */
    --color-accent: #0f766e;
    --color-accent-hover: #0d5f59;
    --color-accent-light: rgba(15, 118, 110, 0.08);
    --color-accent-medium: rgba(15, 118, 110, 0.14);
    --color-accent-dark: rgba(15, 118, 110, 0.22);

    /* ========== 次色（secondary 全家 — 默认可继承） ========== */
    --color-secondary: #475569;
    --color-secondary-rgb: 71, 85, 105;
    --color-secondary-hover: #334155;
    --color-secondary-active: #1e293b;
    --color-on-secondary: #ffffff;
    --color-secondary-bg-subtle: #e2e8f0;
    --color-secondary-border-subtle: #94a3b8;
    --color-secondary-text-emphasis: #334155;

    /* ========== 功能色（status 全家 — 默认可继承） ========== */
    --color-success: #15803d;
    --color-success-rgb: 21, 128, 61;
    --color-success-hover: #166534;
    --color-success-active: #14532d;
    --color-on-success: #ffffff;
    --color-success-bg-subtle: #dcfce7;
    --color-success-border-subtle: #86efac;
    --color-success-text-emphasis: #166534;
    --color-warning: #d97706;
    --color-warning-rgb: 217, 119, 6;
    --color-warning-hover: #b45309;
    --color-warning-active: #92400e;
    --color-on-warning: #ffffff;
    --color-warning-bg-subtle: #fef3c7;
    --color-warning-border-subtle: #fcd34d;
    --color-warning-text-emphasis: #92400e;
    --color-danger: #dc2626;
    --color-danger-rgb: 220, 38, 38;
    --color-danger-hover: #b91c1c;
    --color-danger-active: #991b1b;
    --color-on-danger: #ffffff;
    --color-danger-bg-subtle: #fee2e2;
    --color-danger-border-subtle: #fca5a5;
    --color-danger-text-emphasis: #991b1b;
    --color-error: var(--color-danger);
    --color-error-hover: var(--color-danger-hover);
    --color-error-light: rgba(220, 38, 38, 0.08);
    --color-info: #0369a1;
    --color-info-rgb: 3, 105, 161;
    --color-info-hover: #075985;
    --color-info-active: #0c4a6e;
    --color-on-info: #ffffff;
    --color-info-bg-subtle: #e0f2fe;
    --color-info-border-subtle: #7dd3fc;
    --color-info-text-emphasis: #075985;

    /* ========== 链接色（与主色同族） ========== */
    --color-link: #0f766e;
    --color-link-hover: #115e59;
    --color-link-visited: #5b21b6;

    /* ========== Header（slate） ========== */
    --color-header-bg: #111827;
    --color-header-bg-hover: #1f2937;
    --color-header-border-hover: #374151;
    --color-header-shadow: rgba(17, 24, 39, 0.18);
    --color-header-focus-ring: rgba(15, 118, 110, 0.35);
    --color-header-dropdown-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);

    /* ========== chrome 同步 ========== */
    --weline-chrome-primary: var(--color-primary);
    --weline-chrome-primary-light: var(--color-primary-light);
    --weline-chrome-primary-dark: var(--color-primary-dark);
    --weline-chrome-border-focus: var(--color-border-focus);
    --weline-chrome-body-link-hover: var(--color-primary);
    --weline-chrome-menu-panel-text-hover: var(--color-primary);
    --weline-chrome-bg-dark: var(--color-bg-dark-secondary);
    --weline-chrome-bg-dark-secondary: var(--color-bg-dark);
    --weline-chrome-bg-primary: var(--color-bg-primary);
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --weline-chrome-bg-secondary: var(--color-bg-secondary);
    --weline-chrome-bg-tertiary: var(--color-bg-tertiary);
    --weline-chrome-border-default: var(--color-border-default);
    --weline-chrome-text-primary: var(--color-text-primary);
    --weline-chrome-text-secondary: var(--color-text-secondary);
    --weline-chrome-text-muted: var(--color-text-placeholder);
    --weline-chrome-text-light: var(--color-text-light);
    --weline-chrome-text-light-secondary: var(--color-text-light-secondary);

    /* ========== 商品标签色 ========== */
    --color-product-label-new-bg: #ecfdf5;
    --color-product-label-new-text: #047857;
    --color-product-label-sale-bg: #fef2f2;
    --color-product-label-sale-text: #9f1239;
    --weline-product-label-new-bg: var(--color-product-label-new-bg);
    --weline-product-label-new-text: var(--color-product-label-new-text);
    --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
    --weline-product-label-sale-text: var(--color-product-label-sale-text);

    /* ========== 滚动条 ========== */
    --scrollbar-width: 4px;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
    --scrollbar-track: transparent;
}

/* frontend/colors/_ink.css */
/**
 * 色系：水墨
 *
 * 中国水墨美学品牌色盘：墨分五色、宣纸留白、朱砂点缀、石青石绿赭石辅色
 * 字段
 * @meta.name {default="水墨",name="水墨",description="水墨，用于描述色系的名称"}
 * @meta.description {default="中国水墨美学：宣纸底、墨色字阶、朱砂主色与石青链接，点到为止的彩墨点缀",name="中国水墨美学：宣纸底、墨色字阶、朱砂主色与石青链接，点到为止的彩墨点缀",description="中国水墨美学：宣纸底、墨色字阶、朱砂主色与石青链接，点到为止的彩墨点缀，用于描述色系的用途"}
 * @meta.theme {default="ink",name="主题标识",description="主题标识，用于标识该色系对应的主题名称"}
 * @meta.panel {default="color",name="panel",description="panel"}
 * @meta.disk_kind {default="colors",name="disk_kind",description="disk_kind"}
 * @meta.palette_role {default="brand",name="palette_role",description="palette_role"}
 */

/* 品牌盘叠在 _default 之上（:root = 当前激活品牌）；模式差异仍归 _light/_dark */
:root,
[data-theme="ink"] {
    /* ========== 品牌色（朱砂 — 印章红，点缀主色） ========== */
    --color-primary: #b84a3c;
    --color-primary-light: #d4786a;
    --color-primary-dark: #963b30;
    --color-primary-border: #963b30;
    --color-primary-rgb: 184, 74, 60;
    --color-primary-hover: #963b30;
    --color-primary-active: #7a3028;
    --color-primary-bg-subtle: #f8ede9;
    --color-primary-border-subtle: #e8c4bc;
    --color-primary-text-emphasis: #7a3028;
    /* Solid 朱砂 fills need true white on-fill; warm paper cream reads muddy/low-contrast on primary CTAs. */
    --color-on-primary: #ffffff;

    /* ========== 文本色（墨分五色：焦 / 浓 / 重 / 淡 / 清） ========== */
    --color-text: #1c1c1c;
    --color-text-rgb: 28, 28, 28;
    --color-emphasis-rgb: 28, 28, 28;
    --color-text-primary: var(--color-text);
    --color-text-secondary: #4a4a48;
    --color-text-tertiary: #7a7874;
    --color-text-subtle: #7a7874;
    --color-text-disabled: #b8b4ac;
    --color-text-dark: #1c1c1c;
    --color-text-muted: #5c5a56;
    --color-text-placeholder: #9a968e;
    --color-text-inverse: #f7f4ef;
    --color-text-light: #f7f4ef;
    --color-text-light-secondary: #d4cfc5;
    --color-text-on-dark: #f7f4ef;
    --color-text-on-dark-muted: #d4cfc5;

    /* ========== 背景色（宣纸留白） ========== */
    --color-bg-canvas: #f7f4ef;
    --color-bg-canvas-rgb: 247, 244, 239;
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --color-bg-primary: #fffefa;
    --color-bg-secondary: #ede9e1;
    --color-bg-tertiary: #e0dbd2;
    --color-bg-dark: #1f2124;
    --color-bg-dark-secondary: #16181a;
    --color-bg-dark-tertiary: #2c3034;
    --color-bg-overlay: rgb(28 28 28 / 0.42);
    --color-surface: var(--color-bg-primary);
    --color-surface-subtle: var(--color-bg-secondary);
    --color-surface-muted: var(--color-bg-tertiary);
    --color-surface-hover: #f0ebe3;
    --color-surface-disabled: #ede9e1;
    /* Dark header / inverse chrome ghost hover (must stay translucent, not paper surface). */
    --color-on-dark-soft: rgba(247, 244, 239, 0.10);

    /* ========== 边框色（淡墨线） ========== */
    --color-border-default: #d4cfc5;
    --color-border-subtle: #e8e4dc;
    --color-border-strong: #a8a299;
    --color-border-emphasis: #a8a299;
    --color-border-focus: #b84a3c;
    --color-border-light: #e8e4dc;

    /* ========== 强调色（朱砂） ========== */
    --color-accent: #b84a3c;
    --color-accent-hover: #963b30;
    --color-accent-light: rgba(184, 74, 60, 0.08);
    --color-accent-medium: rgba(184, 74, 60, 0.14);
    --color-accent-dark: rgba(184, 74, 60, 0.22);

    /* ========== 次色（secondary — 继承默认合同，水墨中性灰） ========== */
    --color-secondary: #5c5a56;
    --color-secondary-rgb: 92, 90, 86;
    --color-secondary-hover: #4a4a48;
    --color-secondary-active: #1c1c1c;
    --color-on-secondary: #f7f4ef;
    --color-secondary-bg-subtle: #ede9e1;
    --color-secondary-border-subtle: #a8a299;
    --color-secondary-text-emphasis: #4a4a48;

    /* ========== 功能色（石绿 / 赭石 / 胭脂 / 花青 — status 全家） ========== */
    --color-success: #4a7c59;
    --color-success-rgb: 74, 124, 89;
    --color-success-hover: #3d684a;
    --color-success-active: #31543c;
    --color-on-success: #ffffff;
    --color-success-bg-subtle: #e4efe7;
    --color-success-border-subtle: #a8cbb3;
    --color-success-text-emphasis: #31543c;
    --color-warning: #c4893f;
    --color-warning-rgb: 196, 137, 63;
    --color-warning-hover: #a87334;
    --color-warning-active: #8c602b;
    --color-on-warning: #ffffff;
    --color-warning-bg-subtle: #f8efe3;
    --color-warning-border-subtle: #e8cda3;
    --color-warning-text-emphasis: #8c602b;
    --color-danger: #a63d3d;
    --color-danger-rgb: 166, 61, 61;
    --color-danger-hover: #8b3333;
    --color-danger-active: #702929;
    --color-on-danger: #ffffff;
    --color-danger-bg-subtle: #f8ede9;
    --color-danger-border-subtle: #e8c4bc;
    --color-danger-text-emphasis: #702929;
    --color-error: var(--color-danger);
    --color-error-hover: var(--color-danger-hover);
    --color-error-light: rgba(166, 61, 61, 0.08);
    --color-info: #4a6b8a;
    --color-info-rgb: 74, 107, 138;
    --color-info-hover: #3d5a74;
    --color-info-active: #31495e;
    --color-on-info: #ffffff;
    --color-info-bg-subtle: #e8eef3;
    --color-info-border-subtle: #b3c5d4;
    --color-info-text-emphasis: #31495e;
    --color-success-focus-ring-color: rgba(74, 124, 89, 0.32);
    --color-danger-focus-ring-color: rgba(166, 61, 61, 0.32);

    /* ========== 链接色（石青 + 朱砂 hover） ========== */
    --color-link: #3d6b78;
    --color-link-hover: #b84a3c;
    --color-link-visited: #5c4a6e;

    /* ========== Header（玄墨） ========== */
    --color-header-bg: #1f2124;
    --color-header-bg-hover: #2c3034;
    --color-header-border-hover: #3a3f44;
    --color-header-shadow: rgba(28, 28, 28, 0.18);
    --color-header-focus-ring: rgba(184, 74, 60, 0.35);
    --color-header-dropdown-shadow: 0 4px 12px rgba(28, 28, 28, 0.14);

    /* ========== chrome 同步 ========== */
    --weline-chrome-primary: var(--color-primary);
    --weline-chrome-primary-light: var(--color-primary-light);
    --weline-chrome-primary-dark: var(--color-primary-dark);
    --weline-chrome-border-focus: var(--color-border-focus);
    --weline-chrome-body-link-hover: var(--color-primary);
    --weline-chrome-menu-panel-text-hover: var(--color-primary);
    --weline-chrome-bg-dark: var(--color-bg-dark-secondary);
    --weline-chrome-bg-dark-secondary: var(--color-bg-dark);
    --weline-chrome-bg-primary: var(--color-bg-primary);
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --weline-chrome-bg-secondary: var(--color-bg-secondary);
    --weline-chrome-bg-tertiary: var(--color-bg-tertiary);
    --weline-chrome-border-default: var(--color-border-default);
    --weline-chrome-text-primary: var(--color-text-primary);
    --weline-chrome-text-secondary: var(--color-text-secondary);
    --weline-chrome-text-muted: var(--color-text-placeholder);
    --weline-chrome-text-light: var(--color-text-light);
    --weline-chrome-text-light-secondary: var(--color-text-light-secondary);

    /* ========== 商品标签色 ========== */
    --color-product-label-new-bg: #e4efe7;
    --color-product-label-new-text: #3a6448;
    --color-product-label-sale-bg: #f8ede9;
    --color-product-label-sale-text: #7a3028;
    --weline-product-label-new-bg: var(--color-product-label-new-bg);
    --weline-product-label-new-text: var(--color-product-label-new-text);
    --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
    --weline-product-label-sale-text: var(--color-product-label-sale-text);

    /* ========== 滚动条 ========== */
    --scrollbar-width: 4px;
    --scrollbar-thumb: #c4bfb5;
    --scrollbar-thumb-hover: #a8a299;
    --scrollbar-track: transparent;
}

/* frontend/colors/_light.css */
/**
 * 色系：亮色主题颜色
 * 
 * 亮色主题的颜色覆盖文件
 * 字段
 * @meta.name {default="亮色主题颜色",name="亮色主题颜色",description="亮色主题颜色，用于描述色系的名称"}
 * @meta.description {default="亮色主题的颜色覆盖，提供浅色背景和深色文本，通常与默认值一致",name="亮色主题的颜色覆盖，提供浅色背景和深色文本",description="亮色主题的颜色覆盖，提供浅色背景和深色文本，通常与默认值一致，用于描述色系的用途"}
 * @meta.theme {default="light",name="主题标识",description="主题标识，用于标识该色系对应的主题名称"}
 * @meta.panel {default="color",name="panel",description="panel"}
 * @meta.disk_kind {default="colors",name="disk_kind",description="disk_kind"}
 * @meta.palette_role {default="mode",name="palette_role",description="palette_role"}
 */

/* 模式盘：仅亮色选择器；未覆盖叶子继承 _default（禁止 :root 污染暗色） */
[data-theme="light"] {
    /* 文本色 */
    --color-text-primary: #111;
    --color-text-secondary: #767676;
    --color-text-tertiary: #a6a6a6;
    --color-text-disabled: #c7c7c7;
    --color-text-dark: #1e293b;
    --color-text-muted: #475569;
    --color-text-placeholder: #9ca3af;
    --color-text-light: #f1f5f9;
    --color-text-light-secondary: #cbd5e1;

    /* 背景色：canvas=页面 body 白；primary=卡片/菜单表面 */
    --color-bg-canvas: #ffffff;
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --color-bg-primary: #fff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e7e7e7;
    --color-bg-dark: #232f3e;
    --color-bg-dark-secondary: #1e293b;
    --color-bg-dark-tertiary: #334155;

    /* 边框色 */
    --color-border-default: #ddd;
    --color-border-emphasis: #a6a6a6;
    --color-border-focus: #e77600;
    --color-border-light: #e5e7eb;

    /* 强调色（蓝色系，用于交互元素） */
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-accent-light: rgba(59, 130, 246, 0.05);
    --color-accent-medium: rgba(59, 130, 246, 0.1);
    --color-accent-dark: rgba(59, 130, 246, 0.15);

    /* 功能色 */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-error-hover: #ef4444;
    --color-error-light: rgba(239, 68, 68, 0.05);
    --color-info: #17a2b8;

    /* 品牌色通常不变 */
    /* --color-primary: #f0c14b; */
    /* 使用默认值 */

    /* 滚动条色系（亮色主题） */
    --scrollbar-thumb: #a2adb7;
    --scrollbar-thumb-hover: #8590a5;
    --scrollbar-track: transparent;
}

/* Light-mode semantic overrides on top of _default（未列叶子继承 default） */
[data-theme="light"] {
    --color-text-body: #0f1111;
    --color-text: #172033;
    --color-text-primary: var(--color-text);
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #64748b;
    --color-text-disabled: #94a3b8;
    --color-text-placeholder: #64748b;
    --color-text-inverse: #ffffff;
    --color-bg-canvas: #ffffff;
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #e2e8f0;
    --color-surface: var(--color-bg-primary);
    --color-surface-subtle: var(--color-bg-secondary);
    --color-surface-muted: var(--color-bg-tertiary);
    --color-border-default: #e2e8f0;
    --color-border-subtle: #e2e8f0;
    --color-border-strong: #94a3b8;
    --color-border-focus: #2563eb;
    --color-primary: #2563eb;
    --color-primary-rgb: 37, 99, 235;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-bg-subtle: #dbeafe;
    --color-primary-border-subtle: #93c5fd;
    --color-primary-text-emphasis: #1d4ed8;
    --color-on-primary: #ffffff;
    --color-secondary: #475569; --color-secondary-rgb: 71, 85, 105; --color-secondary-hover: #334155; --color-secondary-active: #1e293b; --color-on-secondary: #ffffff; --color-secondary-bg-subtle: #e2e8f0; --color-secondary-border-subtle: #94a3b8; --color-secondary-text-emphasis: #334155;
    --color-link: #1d4ed8;
    --color-link-hover: #1e40af;
    --color-success: #15803d; --color-success-hover: #166534; --color-success-active: #14532d; --color-on-success: #ffffff; --color-success-bg-subtle: #dcfce7; --color-success-border-subtle: #86efac; --color-success-text-emphasis: #166534;
    --color-warning: #a16207; --color-warning-hover: #854d0e; --color-warning-active: #713f12; --color-on-warning: #ffffff; --color-warning-bg-subtle: #fef3c7; --color-warning-border-subtle: #fcd34d; --color-warning-text-emphasis: #92400e;
    --color-danger: #b91c1c; --color-danger-hover: #991b1b; --color-danger-active: #7f1d1d; --color-error: var(--color-danger); --color-on-danger: #ffffff; --color-danger-bg-subtle: #fee2e2; --color-danger-border-subtle: #fca5a5; --color-danger-text-emphasis: #991b1b;
    --color-info: #0369a1; --color-info-hover: #075985; --color-info-active: #0c4a6e; --color-on-info: #ffffff; --color-info-bg-subtle: #e0f2fe; --color-info-border-subtle: #7dd3fc; --color-info-text-emphasis: #075985;
    --shadow-xs: 0 1px 1px rgb(15 23 42 / 0.05); --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08); --shadow-md: 0 8px 24px rgb(15 23 42 / 0.10); --shadow-lg: 0 18px 44px rgb(15 23 42 / 0.14);
    --focus-ring-width: 3px; --focus-ring-color: rgb(37 99 235 / 0.35); --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
    --color-text-rgb: 23, 32, 51; --color-bg-canvas-rgb: 255, 255, 255; --color-emphasis-rgb: 23, 32, 51;
    --color-success-rgb: 21, 128, 61; --color-warning-rgb: 161, 98, 7; --color-danger-rgb: 185, 28, 28; --color-info-rgb: 3, 105, 161;
    --color-bg-overlay: rgb(15 23 42 / 0.42);
    --color-success-focus-ring-color: rgba(21, 128, 61, 0.32);
    --color-danger-focus-ring-color: rgba(185, 28, 28, 0.32);
    --color-surface-hover: #f3f3f3;
    --color-on-dark-soft: rgba(255, 255, 255, 0.08);
    --color-text-on-dark: #f8fafc;
    --color-text-on-dark-muted: #cbd5e1;
    --color-product-label-new-bg: #e6f2e6;
    --color-product-label-new-text: #007600;
    --color-product-label-sale-bg: #fde8ec;
    --color-product-label-sale-text: #9f1239;
    --weline-product-label-new-bg: var(--color-product-label-new-bg);
    --weline-product-label-new-text: var(--color-product-label-new-text);
    --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
    --weline-product-label-sale-text: var(--color-product-label-sale-text);
}