/* ══════════════════════════════════════════════════════════════════════════ 主题：Organic —— 第二套视觉。 来源：CanteenOS/健康餐饮系统.dc.html + _ds/organic-/styles.css 两版的 DOM 结构逐字相同，差别只有三件事： ① 色板与字体（暖奶油底 + 赤陶 + 橄榄绿，Caprasimo 展示体） ② 圆角：8 / 16 / 28px，外加大量胶囊与圆形（工业风是 2 / 4 / 7 的近方角） ③ 没有 blueprint 四角定位标记 —— 那是工业风的签名，有机风不用 所以这一份只覆盖变量与形状，一行 JS 都不用改。 用法：。默认（无该属性）是 Industry。 ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="organic"] { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; --font-heading: "Caprasimo", "Noto Sans SC", system-ui, sans-serif; --font-heading-weight: 400; --font-body: "Figtree", "Noto Sans SC", system-ui, sans-serif; /* 间距比工业风松一档 —— 有机风靠留白，不靠线框 */ --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); } /* ── 形状：把工业风的直角线框换成有机风的圆角 ─────────────────────── */ :root[data-theme="organic"] { /* Caprasimo 是展示体，字重只有 400；标题的紧字距在它上面会挤 */ --heading-tracking: 0; } [data-theme="organic"] h1, [data-theme="organic"] h2, [data-theme="organic"] h3, [data-theme="organic"] h4, [data-theme="organic"] h5, [data-theme="organic"] h6 { letter-spacing: var(--heading-tracking); } /* blueprint：去掉四角标记，改为圆角卡片 —— 结构不动，只改观感 */ [data-theme="organic"] .blueprint { border-radius: var(--radius-md); } [data-theme="organic"] .blueprint > .corner { display: none; } /* 圆角化：所有线框盒子 */ [data-theme="organic"] .dish, [data-theme="organic"] .note-box, [data-theme="organic"] .plate-cell, [data-theme="organic"] .kiosk-cell, [data-theme="organic"] .stepper, [data-theme="organic"] .browser, [data-theme="organic"] .browser-page { border-radius: var(--radius-md); } [data-theme="organic"] .dish.on::after, [data-theme="organic"] .plate-cell.flagged::before { border-radius: var(--radius-md); } /* 胶囊：分段选择器、分类筛选、chip、进度条、URL 栏 */ [data-theme="organic"] .seg, [data-theme="organic"] .chip, [data-theme="organic"] .browser-url, [data-theme="organic"] .tag { border-radius: 999px; overflow: hidden; } [data-theme="organic"] .meter, [data-theme="organic"] .meter > i { border-radius: 999px; } [data-theme="organic"] .btn { border-radius: 999px; } /* 浏览器窗口的三个点在有机风里是圆的 */ [data-theme="organic"] .browser-dots span { border-radius: 50%; } [data-theme="organic"] .dot-accent { border-radius: 50%; } /* 站点导航：底部指示条换成整块圆角高亮，不用下划线 */ [data-theme="organic"] .site-nav .opt { border-right: 0; } [data-theme="organic"] .site-nav .opt.on { border-bottom-color: transparent; border-radius: 999px; margin: 5px 3px; } [data-theme="organic"] .site-nav { padding: 0 6px; gap: 2px; } /* 后台侧栏：左侧竖条换成整条圆角块 */ [data-theme="organic"] .admin-side .opt { border-left-color: transparent; margin: 2px 10px; border-radius: var(--radius-md); } [data-theme="organic"] .admin-side .opt.on { border-left-color: transparent; } /* 表格：外框圆角要靠容器裁切 */ [data-theme="organic"] .table-scroll { border-radius: var(--radius-sm); } /* 暗屏（餐台 / 大屏）：有机风底色偏暖褐，不是工业风的靛蓝 */ [data-theme="organic"] .screen-dark { background: var(--color-accent-900); } [data-theme="organic"] .screen-inner { border-radius: var(--radius-sm); } /* 开关：有机风用全圆 */ [data-theme="organic"] .switch { border-radius: 999px; } [data-theme="organic"] .switch > i { border-radius: 999px; }