/* ============================================================ 主题皮肤系统 —— 20 套主题（原 14 套 + 2026-09-26 新增 6 套） 每套主题定义：壁纸、文字色、主色、玻璃质感参数 新增 6 套还带「字体 / 间距 / 圆角 / 阴影」组件级覆写（见文件尾部）。 注意：--radius* 由 applyPref 按用户圆角滑杆内联在 上， 主题想改圆角必须直接覆写组件选择器（下方各主题块就是这么做的）， 在 [data-theme] 块里写 --radius 会被内联样式压住、不生效。 ============================================================ */ :root { /* 玻璃参数（可由用户调节） */ --glass-alpha: 0.2; --glass-blur: 26px; --glass-sat: 180%; /* 可读性地板兜底值，实际由 app.js 按主题与透明度注入 */ --glass-floor: rgba(255, 255, 255, 0.24); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; /* 中性色 */ --white: #ffffff; --black: #000000; /* 状态色 */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; --nav-w: 254px; --top-h: 66px; --ease: cubic-bezier(.22, .61, .36, 1); --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: "SF Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace; } /* ------------------------------------------------------------ 1. Aurora 极光（默认 · 亮） ------------------------------------------------------------ */ [data-theme="aurora"] { --bg: linear-gradient(135deg, #e0e7ff 0%, #f0e7ff 25%, #dcf2ff 55%, #e6fbf4 100%); --text-1: #111a33; --text-2: #394561; --text-3: #68738f; --accent: #6366f1; --accent-2: #06b6d4; --accent-soft: rgba(99, 102, 241, .13); --accent-grad: linear-gradient(135deg, #6366f1, #06b6d4); --glass-bg: rgba(255, 255, 255, .2); --glass-bg-strong: rgba(255, 255, 255, .42); --glass-bg-weak: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .55); --shadow: 0 10px 34px rgba(70, 90, 160, .13); --shadow-sm: 0 4px 14px rgba(70, 90, 160, .09); --wall-1: #c7d2fe; --wall-2: #a5f3fc; --wall-3: #ddd6fe; } /* ------------------------------------------------------------ 2. Sakura 樱花（亮） ------------------------------------------------------------ */ [data-theme="sakura"] { --bg: linear-gradient(140deg, #ffe7f0 0%, #ffd9e8 30%, #f5e6ff 65%, #e8f0ff 100%); --text-1: #331826; --text-2: #5f3c4c; --text-3: #85596c; --accent: #ec4899; --accent-2: #a855f7; --accent-soft: rgba(236, 72, 153, .12); --accent-grad: linear-gradient(135deg, #f472b6, #a855f7); --glass-bg: rgba(255, 255, 255, .24); --glass-bg-strong: rgba(255, 255, 255, .46); --glass-bg-weak: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .6); --shadow: 0 10px 34px rgba(190, 90, 140, .14); --shadow-sm: 0 4px 14px rgba(190, 90, 140, .1); --wall-1: #fbcfe8; --wall-2: #f5d0fe; --wall-3: #bae6fd; } /* ------------------------------------------------------------ 3. Ocean 深海（亮） ------------------------------------------------------------ */ [data-theme="ocean"] { --bg: linear-gradient(150deg, #dbeafe 0%, #cffafe 40%, #d1fae5 75%, #eff6ff 100%); --text-1: #09223a; --text-2: #24485f; --text-3: #5f8298; --accent: #0284c7; --accent-2: #14b8a6; --accent-soft: rgba(2, 132, 199, .12); --accent-grad: linear-gradient(135deg, #0ea5e9, #14b8a6); --glass-bg: rgba(255, 255, 255, .22); --glass-bg-strong: rgba(255, 255, 255, .44); --glass-bg-weak: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .58); --shadow: 0 10px 34px rgba(20, 90, 130, .14); --shadow-sm: 0 4px 14px rgba(20, 90, 130, .1); --wall-1: #93c5fd; --wall-2: #a5f3fc; --wall-3: #6ee7b7; } /* ------------------------------------------------------------ 4. Forest 森林（亮） ------------------------------------------------------------ */ [data-theme="forest"] { --bg: linear-gradient(140deg, #dcfce7 0%, #e7f9e0 30%, #d9f3e5 60%, #eefbe8 100%); --text-1: #0f2a19; --text-2: #2f503a; --text-3: #64896d; --accent: #16a34a; --accent-2: #84cc16; --accent-soft: rgba(22, 163, 74, .12); --accent-grad: linear-gradient(135deg, #22c55e, #84cc16); --glass-bg: rgba(255, 255, 255, .22); --glass-bg-strong: rgba(255, 255, 255, .45); --glass-bg-weak: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .58); --shadow: 0 10px 34px rgba(40, 110, 60, .13); --shadow-sm: 0 4px 14px rgba(40, 110, 60, .09); --wall-1: #bbf7d0; --wall-2: #d9f99d; --wall-3: #a7f3d0; } /* ------------------------------------------------------------ 5. Sunset 日落（亮） ------------------------------------------------------------ */ [data-theme="sunset"] { --bg: linear-gradient(150deg, #ffedd5 0%, #ffe4e6 35%, #fef3c7 70%, #fff7ed 100%); --text-1: #381c09; --text-2: #5c3b22; --text-3: #8c6543; --accent: #ea580c; --accent-2: #f43f5e; --accent-soft: rgba(234, 88, 12, .12); --accent-grad: linear-gradient(135deg, #f97316, #f43f5e); --glass-bg: rgba(255, 255, 255, .23); --glass-bg-strong: rgba(255, 255, 255, .45); --glass-bg-weak: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .58); --shadow: 0 10px 34px rgba(170, 90, 30, .14); --shadow-sm: 0 4px 14px rgba(170, 90, 30, .1); --wall-1: #fed7aa; --wall-2: #fecdd3; --wall-3: #fde68a; } /* ------------------------------------------------------------ 6. Lavender 薰衣草（亮） ------------------------------------------------------------ */ [data-theme="lavender"] { --bg: linear-gradient(145deg, #ede9fe 0%, #e4e0ff 30%, #f3e8ff 60%, #eef2ff 100%); --text-1: #221840; --text-2: #43355f; --text-3: #786e9a; --accent: #7c3aed; --accent-2: #d946ef; --accent-soft: rgba(124, 58, 237, .12); --accent-grad: linear-gradient(135deg, #8b5cf6, #d946ef); --glass-bg: rgba(255, 255, 255, .22); --glass-bg-strong: rgba(255, 255, 255, .45); --glass-bg-weak: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .58); --shadow: 0 10px 34px rgba(100, 70, 180, .14); --shadow-sm: 0 4px 14px rgba(100, 70, 180, .1); --wall-1: #ddd6fe; --wall-2: #f5d0fe; --wall-3: #c7d2fe; } /* ------------------------------------------------------------ 7. Ice 冰川（亮） ------------------------------------------------------------ */ [data-theme="ice"] { --bg: linear-gradient(150deg, #f0f9ff 0%, #e0f2fe 35%, #ecfeff 70%, #f8fafc 100%); --text-1: #0a2130; --text-2: #2c4d60; --text-3: #658a9e; --accent: #0891b2; --accent-2: #2563eb; --accent-soft: rgba(8, 145, 178, .11); --accent-grad: linear-gradient(135deg, #06b6d4, #3b82f6); --glass-bg: rgba(255, 255, 255, .26); --glass-bg-strong: rgba(255, 255, 255, .5); --glass-bg-weak: rgba(255, 255, 255, .16); --glass-line: rgba(255, 255, 255, .68); --shadow: 0 10px 34px rgba(50, 110, 150, .13); --shadow-sm: 0 4px 14px rgba(50, 110, 150, .09); --wall-1: #bae6fd; --wall-2: #cffafe; --wall-3: #dbeafe; } /* ------------------------------------------------------------ 8. Coral 珊瑚（亮） ------------------------------------------------------------ */ [data-theme="coral"] { --bg: linear-gradient(140deg, #ffe4e6 0%, #ffe9d6 35%, #fff1f2 65%, #fef2f2 100%); --text-1: #3c1620; --text-2: #6e3a47; --text-3: #976b76; --accent: #e11d48; --accent-2: #fb7185; --accent-soft: rgba(225, 29, 72, .11); --accent-grad: linear-gradient(135deg, #f43f5e, #fb923c); --glass-bg: rgba(255, 255, 255, .24); --glass-bg-strong: rgba(255, 255, 255, .47); --glass-bg-weak: rgba(255, 255, 255, .13); --glass-line: rgba(255, 255, 255, .6); --shadow: 0 10px 34px rgba(180, 70, 90, .14); --shadow-sm: 0 4px 14px rgba(180, 70, 90, .1); --wall-1: #fecdd3; --wall-2: #fed7aa; --wall-3: #ffe4e6; } /* ------------------------------------------------------------ 9. Midnight 午夜（暗） ------------------------------------------------------------ */ [data-theme="midnight"] { --is-dark: 1; --bg: linear-gradient(150deg, #0f172a 0%, #131c33 40%, #1a1035 75%, #0b1120 100%); --text-1: #f2f5ff; --text-2: #b7c3de; --text-3: #9aa9cd; --accent: #818cf8; --accent-2: #22d3ee; --accent-soft: rgba(129, 140, 248, .18); --accent-grad: linear-gradient(135deg, #6366f1, #22d3ee); --glass-bg: rgba(255, 255, 255, .07); --glass-bg-strong: rgba(255, 255, 255, .13); --glass-bg-weak: rgba(255, 255, 255, .04); --glass-line: rgba(148, 163, 205, .22); --shadow: 0 12px 40px rgba(0, 0, 0, .45); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .3); --wall-1: #1e1b4b; --wall-2: #0e7490; --wall-3: #312e81; } /* 深色主题玻璃顶/底内高光减弱（2026-09-17 吴总反馈夜间白边太白、锯齿感强）： .glass 的 inset 高光走 var(--glass-hi)/var(--glass-lo)，日间主题不定义走默认 70%/26%， 四套深色统一降到 12%/5%——深底上 70% 白线是「刺眼白边」的主犯 */ [data-theme="midnight"], [data-theme="graphite"], [data-theme="cyber"], [data-theme="emerald"], [data-theme="retro"], [data-theme="noir"] { --glass-hi: 12%; --glass-lo: 5%; /* 开关「关」态实色（2026-09-26 吴总反馈开关不要透明）： 深底上浅灰轨道 + 稍亮的描边，保证黑白分明 */ --switch-off: #454e63; --switch-off-line: #5b667e; } /* ------------------------------------------------------------ 10. Graphite 石墨（暗） ------------------------------------------------------------ */ [data-theme="graphite"] { --is-dark: 1; --bg: linear-gradient(150deg, #18181b 0%, #202024 40%, #1c1c22 70%, #101014 100%); --text-1: #f7f7f8; --text-2: #b2b2ba; --text-3: #a3a3ab; --accent: #a1a1aa; --accent-2: #60a5fa; --accent-soft: rgba(161, 161, 170, .16); --accent-grad: linear-gradient(135deg, #94a3b8, #60a5fa); --glass-bg: rgba(255, 255, 255, .06); --glass-bg-strong: rgba(255, 255, 255, .11); --glass-bg-weak: rgba(255, 255, 255, .03); --glass-line: rgba(168, 168, 178, .18); --shadow: 0 12px 40px rgba(0, 0, 0, .5); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .34); --wall-1: #27272a; --wall-2: #334155; --wall-3: #1f2937; } /* ------------------------------------------------------------ 11. Cyber 赛博（暗） ------------------------------------------------------------ */ [data-theme="cyber"] { --is-dark: 1; --bg: linear-gradient(150deg, #0b0f2b 0%, #16093a 35%, #041b2e 70%, #0a0a18 100%); --text-1: #eaf8ff; --text-2: #a2c4e8; --text-3: #93b7dd; --accent: #22d3ee; --accent-2: #a855f7; --accent-soft: rgba(34, 211, 238, .16); --accent-grad: linear-gradient(135deg, #22d3ee, #a855f7); --glass-bg: rgba(34, 211, 238, .07); --glass-bg-strong: rgba(34, 211, 238, .14); --glass-bg-weak: rgba(255, 255, 255, .03); --glass-line: rgba(34, 211, 238, .26); --shadow: 0 12px 40px rgba(0, 0, 0, .55); --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4); --wall-1: #0e7490; --wall-2: #6b21a8; --wall-3: #1e1b4b; } /* ------------------------------------------------------------ 12. Emerald Night 翡翠夜（暗） ------------------------------------------------------------ */ [data-theme="emerald"] { --is-dark: 1; --bg: linear-gradient(150deg, #04201a 0%, #062e26 40%, #0a3b2e 70%, #021712 100%); --text-1: #ebfff8; --text-2: #a8d8c8; --text-3: #97c4b3; --accent: #34d399; --accent-2: #a3e635; --accent-soft: rgba(52, 211, 153, .15); --accent-grad: linear-gradient(135deg, #10b981, #a3e635); --glass-bg: rgba(255, 255, 255, .06); --glass-bg-strong: rgba(52, 211, 153, .12); --glass-bg-weak: rgba(255, 255, 255, .03); --glass-line: rgba(110, 231, 183, .2); --shadow: 0 12px 40px rgba(0, 0, 0, .48); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .32); --wall-1: #065f46; --wall-2: #14532d; --wall-3: #0f766e; } /* ------------------------------------------------------------ 13. Rose Gold 玫瑰金（亮） ------------------------------------------------------------ */ [data-theme="rosegold"] { --bg: linear-gradient(145deg, #fdf2f8 0%, #fce7f3 30%, #fef3c7 65%, #fff1f2 100%); --text-1: #371829; --text-2: #5c3849; --text-3: #8e6a76; --accent: #be185d; --accent-2: #d97706; --accent-soft: rgba(190, 24, 93, .11); --accent-grad: linear-gradient(135deg, #db2777, #f59e0b); --glass-bg: rgba(255, 255, 255, .25); --glass-bg-strong: rgba(255, 255, 255, .48); --glass-bg-weak: rgba(255, 255, 255, .13); --glass-line: rgba(255, 255, 255, .62); --shadow: 0 10px 34px rgba(170, 70, 110, .13); --shadow-sm: 0 4px 14px rgba(170, 70, 110, .09); --wall-1: #fbcfe8; --wall-2: #fde68a; --wall-3: #fecdd3; } /* ------------------------------------------------------------ 14. Slate Pro 商务灰（亮） ------------------------------------------------------------ */ [data-theme="slate"] { --bg: linear-gradient(150deg, #f1f5f9 0%, #e2e8f0 35%, #eef2f7 70%, #f8fafc 100%); --text-1: #152232; --text-2: #3d5264; --text-3: #77879c; --accent: #334155; --accent-2: #0ea5e9; --accent-soft: rgba(51, 65, 85, .1); --accent-grad: linear-gradient(135deg, #475569, #0ea5e9); --glass-bg: rgba(255, 255, 255, .3); --glass-bg-strong: rgba(255, 255, 255, .55); --glass-bg-weak: rgba(255, 255, 255, .18); --glass-line: rgba(255, 255, 255, .72); --shadow: 0 10px 34px rgba(60, 80, 110, .12); --shadow-sm: 0 4px 14px rgba(60, 80, 110, .08); --wall-1: #cbd5e1; --wall-2: #bae6fd; --wall-3: #e2e8f0; } /* ============================================================ 2026-09-26 新增 6 套主题（15~20）—— 每套在配色之外， 还覆写 字体 / 间距 / 阴影 维度，风格辨识度强。 圆角不再在这里覆写（2026-09-26 吴总反馈滑杆失灵后改为偏移量方案）： 组件圆角消费的 --radius 是用户滑杆内联在 上的， 这里覆写会把它压死、滑杆失灵；主题性格改由 app.js 的 THEME_RADIUS_BIAS 偏移表表达（applyPref 算完再内联）。 唯一例外：糖果/马卡龙的胶囊按钮 999px——那是形状性格，不是圆角大小。 间距只动 .card/.kpi/.nav-item/table.data/.btn 等安全组件， 刻意不碰 table.items-grid（明细表列宽是零和像素预算）。 ============================================================ */ /* ------------------------------------------------------------ 15. Paper 纸墨（亮）—— 宣纸底 + 衬线字体 + 小圆角 + 宽松间距 + 柔和阴影 ------------------------------------------------------------ */ [data-theme="paper"] { --font: "Songti SC", "STSong", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif; --bg: linear-gradient(140deg, #f7f2e7 0%, #f3ecdc 35%, #efe7d3 70%, #f5efe1 100%); --text-1: #2b2415; --text-2: #4e4630; --text-3: #7a6f58; --accent: #b03a2e; --accent-2: #3f5d45; --accent-soft: rgba(176, 58, 46, .1); --accent-grad: linear-gradient(135deg, #b03a2e, #c88a3d); --glass-bg: rgba(255, 253, 246, .34); --glass-bg-strong: rgba(255, 253, 246, .58); --glass-bg-weak: rgba(255, 253, 246, .2); --glass-line: rgba(214, 201, 168, .75); --shadow: 0 8px 26px rgba(120, 96, 52, .12); --shadow-sm: 0 3px 10px rgba(120, 96, 52, .08); --wall-1: #e7dcc2; --wall-2: #dfd3b4; --wall-3: #ece2c9; } [data-theme="paper"] .card { padding: 24px; } [data-theme="paper"] .kpi { padding: 20px 22px; } [data-theme="paper"] .nav-item { padding: 12px 14px; } [data-theme="paper"] table.data thead th, [data-theme="paper"] table.data tbody td { padding: 13px 16px; } /* ------------------------------------------------------------ 16. Mono 极简（亮）—— 灰阶零彩色 + 直角 + 无阴影扁平 + 紧凑间距 ------------------------------------------------------------ */ [data-theme="mono"] { --font: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; --bg: linear-gradient(150deg, #fafafa 0%, #f2f2f2 45%, #ececec 80%, #f7f7f7 100%); --text-1: #111111; --text-2: #3a3a3a; --text-3: #6e6e6e; --accent: #111111; --accent-2: #6e6e6e; --accent-soft: rgba(17, 17, 17, .07); --accent-grad: linear-gradient(135deg, #111111, #555555); --glass-bg: rgba(255, 255, 255, .5); --glass-bg-strong: rgba(255, 255, 255, .78); --glass-bg-weak: rgba(255, 255, 255, .3); --glass-line: rgba(0, 0, 0, .14); --shadow: 0 1px 3px rgba(0, 0, 0, .08); --shadow-sm: none; --wall-1: #d4d4d4; --wall-2: #e5e5e5; --wall-3: #cccccc; } [data-theme="mono"] .card { padding: 12px 14px; margin-bottom: 10px; } [data-theme="mono"] .kpi { padding: 12px 14px; } [data-theme="mono"] .nav-item { padding: 7px 10px; } [data-theme="mono"] .btn { height: 32px; padding: 0 12px; } [data-theme="mono"] table.data thead th, [data-theme="mono"] table.data tbody td { padding: 6px 10px; } /* ------------------------------------------------------------ 17. Candy 糖果（亮）—— 高饱和糖色 + 圆体 + 超大圆角胶囊按钮 + Q弹彩影 ------------------------------------------------------------ */ [data-theme="candy"] { --font: "Yuanti SC", "YouYuan", "幼圆", "PingFang SC", "Microsoft YaHei", sans-serif; --bg: linear-gradient(140deg, #ffe3f1 0%, #e8e3ff 30%, #ddf1ff 60%, #fff6d9 100%); --text-1: #3d1d4e; --text-2: #64437a; --text-3: #8a6b9e; --accent: #ff4fa3; --accent-2: #7c5cff; --accent-soft: rgba(255, 79, 163, .13); --accent-grad: linear-gradient(135deg, #ff4fa3, #ffb84d); --glass-bg: rgba(255, 255, 255, .3); --glass-bg-strong: rgba(255, 255, 255, .55); --glass-bg-weak: rgba(255, 255, 255, .18); --glass-line: rgba(255, 255, 255, .7); --shadow: 0 14px 40px rgba(255, 79, 163, .22); --shadow-sm: 0 6px 18px rgba(124, 92, 255, .16); --wall-1: #ffc7e3; --wall-2: #c9bdff; --wall-3: #ffedb0; } [data-theme="candy"] .btn { border-radius: 999px; } [data-theme="candy"] .nav-item { padding: 12px 14px; } [data-theme="candy"] .card { padding: 22px; } [data-theme="candy"] .kpi { padding: 18px 20px; } [data-theme="candy"] table.data thead th, [data-theme="candy"] table.data tbody td { padding: 12px 15px; } /* ------------------------------------------------------------ 18. Retro 复古终端（暗）—— 黑底荧光绿 + 全等宽字体 + 直角 + 辉光阴影 + 紧凑 ------------------------------------------------------------ */ [data-theme="retro"] { --is-dark: 1; --font: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; --font-num: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; --bg: linear-gradient(160deg, #050a06 0%, #08120a 40%, #0a1810 75%, #040804 100%); --text-1: #c8ffd0; --text-2: #7dd489; --text-3: #4fae60; --accent: #33ff66; --accent-2: #b6ff33; --accent-soft: rgba(51, 255, 102, .14); --accent-grad: linear-gradient(135deg, #33ff66, #00cc44); --glass-bg: rgba(51, 255, 102, .06); --glass-bg-strong: rgba(51, 255, 102, .12); --glass-bg-weak: rgba(51, 255, 102, .03); --glass-line: rgba(51, 255, 102, .28); --shadow: 0 0 28px rgba(51, 255, 102, .22); --shadow-sm: 0 0 12px rgba(51, 255, 102, .14); --wall-1: #0d2b16; --wall-2: #11401f; --wall-3: #0a2111; } [data-theme="retro"] .card { padding: 12px 14px; margin-bottom: 10px; } [data-theme="retro"] .kpi { padding: 12px 14px; } [data-theme="retro"] .nav-item { padding: 7px 10px; } [data-theme="retro"] .btn { height: 32px; padding: 0 12px; } [data-theme="retro"] table.data thead th, [data-theme="retro"] table.data tbody td { padding: 6px 10px; } /* ------------------------------------------------------------ 19. Noir 黑金（暗）—— 纯黑底 + 金线细边 + 中小圆角 + 深邃阴影 ------------------------------------------------------------ */ [data-theme="noir"] { --is-dark: 1; --bg: linear-gradient(155deg, #0a0908 0%, #14110d 40%, #1a1510 75%, #070606 100%); --text-1: #f5ecd7; --text-2: #cbb98e; --text-3: #9c8a64; --accent: #d4af37; --accent-2: #b87333; --accent-soft: rgba(212, 175, 55, .14); --accent-grad: linear-gradient(135deg, #d4af37, #8c6a1f); --glass-bg: rgba(212, 175, 55, .05); --glass-bg-strong: rgba(212, 175, 55, .1); --glass-bg-weak: rgba(255, 255, 255, .03); --glass-line: rgba(212, 175, 55, .3); --shadow: 0 14px 44px rgba(0, 0, 0, .6); --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4); --wall-1: #2b2113; --wall-2: #3a2c15; --wall-3: #1f180d; } /* ------------------------------------------------------------ 20. Macaron 马卡龙（亮）—— 粉彩低饱和 + 大圆角胶囊按钮 + 蓬松阴影 + 宽松 ------------------------------------------------------------ */ [data-theme="macaron"] { --bg: linear-gradient(145deg, #fdf0e9 0%, #eef6f1 30%, #f3eefb 60%, #fdeef2 100%); --text-1: #413638; --text-2: #6b5c60; --text-3: #8f8286; --accent: #d16b86; --accent-2: #7fb5a3; --accent-soft: rgba(209, 107, 134, .12); --accent-grad: linear-gradient(135deg, #e8a2b4, #9fd3c3); --glass-bg: rgba(255, 255, 255, .32); --glass-bg-strong: rgba(255, 255, 255, .56); --glass-bg-weak: rgba(255, 255, 255, .18); --glass-line: rgba(255, 255, 255, .68); --shadow: 0 12px 36px rgba(190, 140, 150, .18); --shadow-sm: 0 5px 16px rgba(140, 170, 160, .14); --wall-1: #f6d4cf; --wall-2: #cfe8dc; --wall-3: #e3d7f4; } [data-theme="macaron"] .btn { border-radius: 999px; } [data-theme="macaron"] .nav-item { padding: 12px 14px; } [data-theme="macaron"] .card { padding: 22px; } [data-theme="macaron"] .kpi { padding: 18px 20px; } [data-theme="macaron"] table.data thead th, [data-theme="macaron"] table.data tbody td { padding: 12px 15px; }