/* ═══════════════════════════════════════════════════════════════════════════ KANPAI · tokens.css（静态原型 v0.1 · 2026-10-15 · 三立国際） ─────────────────────────────────────────────────────────────────────────── 概念：YOAKE 是「晨光里的纸桌」，KANPAI 是「夜の帳と月」——同一张纸、同一支墨、 同一道金线，只是翻到夜里。电脑后台是第二天早上店长在办公室看的那张纸。 · 唯一真源：所有颜色、字体、字号、间距、圆角、阴影、动效都在这里。 base.css 与画面 HTML 只能写 var(--k-*)，不许出现裸色值（hex / rgb / 颜色关键字）。 · 两个主题：（手机・iPad，店内） （电脑后台；不写 data-theme 时也按 paper） 选择器同时匹配任意元素，所以 preview.html 可以在同一页上下各套一块。 · 设备字阶：（见文件末尾）。 · 来源标注：canon = ~/WorkDev/sanri-design/tokens.css； YOAKE = NextDay-Pro/design/yoake-v1/tokens.css 与 docs/design-language-v1.md； 新增 = 本文件首次出现，写明推导方法与对比度。 · 对比度：WCAG 2.1 相对亮度公式；文字要求 ≥4.5:1，非文字（边框・图标・图表）≥3:1。 全部比值由脚本计算（见文件末尾「对比度总表」），本次没有不达标项。 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · 字体（本地文件，相对路径；原型整包发出也能用）────────────────────── 只复制了用得到的字重（共 74 MB）： Shippori Mincho 600/700 · Noto Serif SC 600/700 · Noto Sans SC 400/500/700 · Barlow Condensed 500/600 每个 @font-face 的 src 末尾带系统字体 local() 回退；各字体栈也再列一次系统字体。 注意：Shippori Mincho 没有简体字（结、账、应、营…），所以中文标题一律走 Noto Serif SC。 */ @font-face{font-family:"Shippori Mincho";font-weight:600;font-style:normal;font-display:block; src:url("fonts/Shippori-Mincho-600.ttf") format("truetype"),local("Hiragino Mincho ProN"),local("Yu Mincho")} @font-face{font-family:"Shippori Mincho";font-weight:700;font-style:normal;font-display:block; src:url("fonts/Shippori-Mincho-700.ttf") format("truetype"),local("Hiragino Mincho ProN"),local("Yu Mincho")} @font-face{font-family:"Noto Serif SC";font-weight:600;font-style:normal;font-display:block; src:url("fonts/Noto-Serif-SC-600.ttf") format("truetype"),local("Songti SC"),local("Hiragino Mincho ProN")} @font-face{font-family:"Noto Serif SC";font-weight:700;font-style:normal;font-display:block; src:url("fonts/Noto-Serif-SC-700.ttf") format("truetype"),local("Songti SC"),local("Hiragino Mincho ProN")} @font-face{font-family:"Noto Sans SC";font-weight:400;font-style:normal;font-display:block; src:url("fonts/Noto-Sans-SC-400.ttf") format("truetype"),local("PingFang SC"),local("Hiragino Sans"),local("Yu Gothic")} @font-face{font-family:"Noto Sans SC";font-weight:500;font-style:normal;font-display:block; src:url("fonts/Noto-Sans-SC-500.ttf") format("truetype"),local("PingFang SC"),local("Hiragino Sans"),local("Yu Gothic")} @font-face{font-family:"Noto Sans SC";font-weight:700;font-style:normal;font-display:block; src:url("fonts/Noto-Sans-SC-700.ttf") format("truetype"),local("PingFang SC"),local("Hiragino Sans"),local("Yu Gothic")} @font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:block; src:url("fonts/Barlow-Condensed-500.ttf") format("truetype"),local("Hiragino Sans"),local("PingFang SC")} @font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:block; src:url("fonts/Barlow-Condensed-600.ttf") format("truetype"),local("Hiragino Sans"),local("PingFang SC")} /* ═══════════════════════════════════════════════════════════════════════════ 1 · 与主题无关的 token（字体・字阶・间距・圆角・尺寸・动效・图标） ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 字体栈 ── */ --k-font-display:"Noto Serif SC","Songti SC","Hiragino Mincho ProN","Yu Mincho",serif; /* 中文标题（canon --font-display-zh） */ --k-font-display-ja:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif SC",serif;/* 日文/拉丁标题、KANPAI 字标（canon --font-display） */ --k-font-body:"Noto Sans SC","PingFang SC","Hiragino Sans","Yu Gothic",sans-serif; /* 正文（含假名可用；YOAKE --yk-font-body-zh） */ --k-font-body-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans SC","PingFang SC",sans-serif; /* lang="ja" 的正文：汉字用日本字形（YOAKE §3.1；仓库无 Noto Sans JP，走系统字体） */ --k-font-num:"Barlow Condensed","Noto Sans SC","PingFang SC",sans-serif; /* 眉题与全部数字（canon --font-latin-caps） */ /* ── 字阶（桌面默认；手机/iPad 在文件末尾按 data-device 覆盖）YOAKE §3.2 ── */ --k-fs-display:56px; /* 明朝 700 · 空状态大字、入口页标题 */ --k-fs-h1:32px; /* 明朝 700 · 页标题 */ --k-fs-h2:22px; /* 明朝 600 · 区块标题 */ --k-fs-h3:18px; /* 黑体 700 · 卡片标题 */ --k-fs-title:16px; /* 黑体 700 · 列表主行、商品名 */ --k-fs-body:15px; /* 黑体 400 · 正文 */ --k-fs-small:13.5px; /* 黑体 400 · 次级信息 */ --k-fs-caption:12.5px; /* 黑体 400 · 时间戳、操作人（CJK 下限 12px） */ --k-fs-eyebrow:12px; /* Barlow 600 大写 · 眉题（含 CJK 时不大写） */ --k-fs-num-xl:44px; /* 金额主角：应收/未收 */ --k-fs-num-lg:32px; /* KPI、结账合计 */ --k-fs-num-md:22px; /* 座位格金额、成交价 */ --k-fs-num-sm:16px; /* 行内数字 */ --k-lh-tight:1.15; --k-lh-head:1.35; --k-lh-body:1.7; --k-lh-small:1.55; --k-tracking-head:.04em; --k-tracking-body:.02em; --k-tracking-caps:.18em; --k-tracking-num:.01em; /* ── 间距（4 的倍数；canon/YOAKE 同一套）── */ --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-5:20px; --k-space-6:24px; --k-space-7:32px; --k-space-8:48px; --k-space-9:64px; --k-space-10:96px; --k-gutter:32px; /* 页面左右边距（手机 16 / iPad 24 / 电脑 32） */ /* ── 圆角（YOAKE 产品层；4px 只留给记录类内容）── */ --k-r-pill:999px; /* 按钮、状态胶囊、分段、筛选 */ --k-r-sheet:20px; /* 大纸片：面板、取景框、PIN 面板 */ --k-r-card:16px; /* 卡片：座位格、存酒卡、KPI、付款渠道卡 */ --k-r-input:12px; /* 输入框、语音备注框、步进器 */ --k-r-block:8px; /* 色块、商品卡内标记、小按钮格 */ --k-r-record:4px; /* canon 4px：小票预览、更正记录、报表表格、记录类标签 k-tag */ /* ── 线 ── */ --k-rule:1px; /* 唯一细线宽（canon --rule-width） */ --k-rule-status:3px; /* 状态色条（座位格左缘、提示条左缘；canon State 规则） */ --k-focus-width:2px; --k-focus-offset:2px; /* ── 尺寸 ── */ --k-tap:44px; /* 最小点击高度（手机/iPad 48，见末尾） */ --k-device-phone-w:390px; --k-device-phone-h:844px; --k-device-ipad-w:1180px; --k-device-ipad-h:820px; --k-sidenav-w:232px; /* 电脑左侧导航 */ --k-measure:1328px; /* 电脑内容最大宽（YOAKE 1328） */ --k-avatar:32px; /* ── 动效（YOAKE 四档；原型以静态为主，只用于 hover/focus 过渡）── */ --k-dur-1:120ms; --k-dur-2:200ms; --k-dur-3:320ms; --k-dur-4:600ms; --k-ease-out:cubic-bezier(.22,1,.36,1); --k-ease-in-out:cubic-bezier(.65,0,.35,1); --k-ease-in:cubic-bezier(.55,0,1,.45); --k-lift:-2px; /* 可点卡片悬停上移 */ --k-press:.98; /* 按下缩放 */ /* ── 图标（lucide 风格线框，24 网格；作为 mask 使用，颜色跟随 currentColor）── SVG 里的 stroke 只决定蒙版形状，不会显示为颜色。用法见 base.css「图标」。 */ --k-icon-seats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E"); --k-icon-order: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M12 7v8'/%3E%3Cpath d='M8 11h8'/%3E%3C/svg%3E"); --k-icon-bottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v4.5l1.4 2.2a3 3 0 0 1 .6 1.8V20a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-9.5a3 3 0 0 1 .6-1.8L10 6.5Z'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E"); --k-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); --k-icon-me: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20.66V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.66'/%3E%3C/svg%3E"); --k-icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E"); --k-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --k-icon-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E"); --k-icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); --k-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --k-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --k-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --k-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); --k-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); --k-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --k-icon-cash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); --k-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); --k-icon-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E"); --k-icon-emoney: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='12' x='2' y='6' rx='1'/%3E%3Cpath d='M13 8.32a7.43 7.43 0 0 1 0 7.36'/%3E%3Cpath d='M16.46 6.21a11.76 11.76 0 0 1 0 11.58'/%3E%3Cpath d='M19.91 4.1a15.91 15.91 0 0 1 .01 15.8'/%3E%3C/svg%3E"); --k-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --k-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); --k-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); --k-icon-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); --k-icon-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.7 4.73a2 2 0 0 0 2 0L20.7 7'/%3E%3C/svg%3E"); --k-icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); --k-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01Z'/%3E%3C/svg%3E"); --k-icon-switch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); --k-icon-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); --k-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); --k-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); --k-icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E"); --k-icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); --k-icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); --k-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); --k-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --k-icon-refund: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · 紙（paper）— 电脑后台；也是默认主题 canon 紙・紙2・墨・罫・月金 ＋ YOAKE 米纸画布与次级字。无阴影（canon）。 ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="paper"]{ color-scheme:light; /* 底与面 */ --k-stage:#E9DDC9; /* YOAKE --yk-canvas-edge · 取景框外的衬底（电脑页一般不用） */ --k-bg:#F2E9D8; /* YOAKE --yk-canvas 米纸画布 · 页面底 */ --k-surface:#FAFAF8; /* canon 紙 · 纸片：卡片、面板、表格底 */ --k-surface-2:#F4F2ED; /* canon 紙2 · 侧栏、次级面、分段控件底 */ --k-raised:#FFFFFF; /* canon surface · 纸片上再浮一层：输入框、选中前的可点面 */ /* 文字 */ --k-text:#111111; /* canon 墨 · 画布 15.67 / 紙 18.07 / 紙2 16.88 / 白 18.88 */ --k-text-2:#625C53; /* YOAKE 次级字 · 画布 5.49 / 紙 6.33 / 紙2 5.91 / 白 6.61（canon 墨2 在画布上仅 4.42，故不用） */ /* 线 */ --k-line:#E4E2DC; /* canon 罫 · 纸片内唯一细线色 */ --k-line-strong:#C2C2C2; /* canon 墨faint · 装饰线（空位虚线框）；1.7:1，永不承载文字 */ --k-line-ui:#8C8478; /* canon 墨3 · 输入框边、图标等非文字 UI · 画布 3.06 / 紙 3.53（≥3:1） */ --k-edge:#E0D4C0; /* 新增 · 纸片在画布上的轮廓 = YOAKE --yk-edge rgba(110,86,48,.14) 叠在画布上的结果 */ /* 月金 */ --k-gold:#B08D3E; /* canon 月金 · 只作细线、编号方块、印章边；紙上 2.99 → 不写字 */ --k-gold-text:#7F6428; /* YOAKE --yk-gold-text-canvas · 金字 · 画布 4.64 / 紙 5.35 / 紙2 5.00 / 白 5.59 */ /* 点缀（靛蓝族）：选中、当前、链接 */ --k-accent:#425A88; /* YOAKE --yk-indigo-text · 画布 5.71 / 紙 6.59 / 白 6.89 */ --k-accent-bg:#DBEDF3; /* YOAKE --yk-indigo-tint · 选中底 */ --k-accent-on:#111111; /* 选中底上的字 15.66 */ --k-focus:#866B2F; /* canon --color-focus · 焦点环 · 画布 4.19 / 紙 4.83（非文字 ≥3:1） */ /* 主按钮（canon CTA：墨底紙字） */ --k-primary-bg:#111111; --k-primary-text:#FAFAF8; /* 18.07 */ --k-danger-bg:#B43319; --k-danger-on:#FFFFFF; /* YOAKE 赤陶字作实心底 · 白字 6.13 */ /* 状态色（YOAKE 七族派生，不另造色；只用 4 族＋中性） -bg 浅底 ／ -text 字（浅底与各纸面上都 ≥4.6）／ 无后缀 = 标记色（圆点、色条、边框，≥3:1） */ --k-status-vacant:#8C8478; --k-status-vacant-bg:#FAFAF8; --k-status-vacant-text:#625C53; /* 空位/已结束 · 中性 · 6.33 */ --k-status-active:#425A88; --k-status-active-bg:#DBEDF3; --k-status-active-text:#425A88; /* 使用中/接待中/取用中 · 靛蓝 · 浅底 5.71 */ --k-status-due:#895F06; --k-status-due-bg:#FBE6C9; --k-status-due-text:#895F06; /* 待结账 · 芥末 · 浅底 4.66 */ --k-status-check:#895F06; --k-status-check-bg:#FBE6C9; --k-status-check-text:#895F06; /* 待核对 · 芥末（组件另加虚线边＋图标区分） */ --k-status-debt:#B43319; --k-status-debt-bg:#F2DDD0; --k-status-debt-text:#B43319; /* 欠款/遗留未处理/差额 · 赤陶 · 浅底 4.68 */ --k-status-settled:#656D1C; --k-status-settled-bg:#E8EDD5; --k-status-settled-text:#656D1C; /* 已结清/已完成/已授权 · 橄榄 · 浅底 4.66 */ /* 语义别名（组件里优先用状态 token；这些用于正文里的提示字） */ --k-danger:var(--k-status-debt-text); --k-warning:var(--k-status-due-text); --k-success:var(--k-status-settled-text); --k-info:var(--k-accent); --k-live:var(--k-status-debt); /* YOAKE 赤陶 =「现在」：录音中（k-voice.is-listening） */ --k-live-bg:var(--k-status-debt-bg); --k-live-text:var(--k-status-debt-text); /* 人员色（YOAKE 人员色中避开状态 4 族的 4 个；两主题相同，色块＋深字） */ --k-person-1:#E39A8C; --k-person-1-on:#4D2018; /* 粉 · 佐藤 美咲 · 6.04 */ --k-person-2:#9AC3AF; --k-person-2-on:#193F2F; /* 薄荷 · 李 明 · 6.02 */ --k-person-3:#B69AC8; --k-person-3-on:#3F2746; /* 李子紫 · 高橋 翔 · 5.31 */ --k-person-4:#6FA3B3; --k-person-4-on:#1E2A44; /* 空色 · 王 芳 · 5.15 */ /* 图表（YOAKE -text 档：紙上 ≥5.4，画布上 ≥4.7） */ --k-chart-1:#425A88; /* 靛蓝 · 主序列（应收）/ 现金 */ --k-chart-2:#895F06; /* 芥末 · AirPay カード */ --k-chart-3:#2F6E6E; /* 深青 · QR */ --k-chart-4:#775C87; /* 李子紫 · 電子マネー */ --k-chart-area:#DBEDF3; /* 折线下方面积 = 靛蓝浅底 */ --k-chart-grid:#E4E2DC; /* = 罫 */ --k-chart-axis:#625C53; /* = 次级字 */ /* 层次：紙主题沿 canon，无阴影 */ --k-shadow-1:none; --k-shadow-2:none; --k-shadow-inset:none; --k-scrim:rgba(19,19,19,.40); /* 弹层遮罩（原型极少用） */ } /* ═══════════════════════════════════════════════════════════════════════════ 3 · 夜（night）— 手机 APP・iPad（店内，灯光暗） canon 墨地 ＋ 月金；夜色点缀 = YOAKE 靛蓝族；状态色从 YOAKE 族在深底上重算。 ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="night"], [data-theme="night"]{ color-scheme:dark; /* 底与面 */ --k-stage:#0B0A08; /* canon dark --color-paper-2 · 取景框外的深色衬底 */ --k-bg:#131313; /* canon 墨地 --color-ground · 页面底 */ --k-surface:#1B1A17; /* canon --color-ground-2 · 墨地上的卡片 */ --k-surface-2:#24231F; /* 新增 · 在 #1B1A17 上再提一档：输入框底、步进器、选中前的可点面 墨地字 13.30 / 次字 6.59 / 金字 6.92 */ --k-raised:#24231F; /* 夜里「再浮一层」与 surface-2 同值 */ /* 文字 */ --k-text:#ECECEA; /* canon 墨地字 --color-on-ground · 墨地 15.71 / 卡 14.71 / surface-2 13.30 */ --k-text-2:#A8A8A4; /* canon 墨地次字 · 墨地 7.79 / 卡 7.29 / surface-2 6.59；各状态浅底上 ≥4.93 */ /* 线 */ --k-line:#2A2A28; /* canon dark 罫 */ --k-line-strong:#3A3A36; /* canon dark 墨faint · 装饰线（空位虚线框），不承载文字 */ --k-line-ui:#8C8478; /* canon 墨3（两主题通用）· 输入框边、图标 · 墨地 5.03 / 卡 4.71 / surface-2 4.26 */ --k-edge:#2A2A28; /* 卡片在墨地上的 1px 轮廓 = 罫 */ /* 月金 */ --k-gold:#B08D3E; /* canon 月金 · 细线、编号；墨地上 5.95（也可作编号数字） */ --k-gold-text:#C9A85C; /* canon --color-gold-lift · 深底上的金字 · 墨地 8.17 / 卡 7.66 / surface-2 6.92 */ /* 点缀（靛蓝族）：选中、当前、链接 */ --k-accent:#6FA3B3; /* YOAKE --yk-indigo-lift · 墨地 6.69 / 卡 6.27 / surface-2 5.67 */ --k-accent-bg:#1E2A44; /* YOAKE --yk-indigo-deep（「夜」）· 选中底 */ --k-accent-on:#ECECEA; /* 选中底上的字 12.08（靛蓝字在其上 5.15） */ --k-focus:#C9A85C; /* canon dark --color-focus · 焦点环 · 墨地 8.17 / 衬底 8.71 */ /* 主按钮（canon CTA 反相：紙底墨字） */ --k-primary-bg:#ECECEA; --k-primary-text:#131313; /* 15.71 */ --k-danger-bg:#DE7A64; --k-danger-on:#131313; /* 新增·赤陶深底版（见下）作实心底 · 墨字 6.26 */ /* 状态色（深底重算）：浅底 = 族色以 20% 叠在卡片 #1B1A17 上后写死为 hex（不用透明度，避免对比度不可控） 字 = YOAKE -lift；不够 4.8 的向墨地字 #ECECEA 提亮，百分比写在旁边 */ --k-status-vacant:#8C8478; --k-status-vacant-bg:#131313; --k-status-vacant-text:#A8A8A4; /* 中性 · 7.79 */ --k-status-active:#6FA3B3; --k-status-active-bg:#1E2A44; --k-status-active-text:#6FA3B3; /* 靛蓝 lift on 靛蓝深 5.15 · 墨地 6.69 */ --k-status-due:#E1A53C; --k-status-due-bg:#43361E; --k-status-due-text:#E1A53C; /* 芥末 lift · 浅底 5.41 / 墨地 8.54 */ --k-status-check:#E1A53C; --k-status-check-bg:#43361E; --k-status-check-text:#E1A53C; /* 同上＋虚线边＋图标 */ --k-status-debt:#DA583C; --k-status-debt-bg:#3E231C; --k-status-debt-text:#DE7A64; /* 赤陶 lift #DA583C＋23% → 浅底 4.84 / 墨地 6.26 / 卡 5.86 */ --k-status-settled:#7F893B; --k-status-settled-bg:#2C2D1B; --k-status-settled-text:#959D5E; /* 橄榄 lift #7F893B＋20% → 浅底 4.85 / 墨地 6.43 / 卡 6.02 */ --k-danger:var(--k-status-debt-text); --k-warning:var(--k-status-due-text); --k-success:var(--k-status-settled-text); --k-info:var(--k-accent); --k-live:var(--k-status-debt); /* YOAKE 赤陶 =「现在」：录音中（k-voice.is-listening） */ --k-live-bg:var(--k-status-debt-bg); --k-live-text:var(--k-status-debt-text); --k-person-1:#E39A8C; --k-person-1-on:#4D2018; --k-person-2:#9AC3AF; --k-person-2-on:#193F2F; --k-person-3:#B69AC8; --k-person-3-on:#3F2746; --k-person-4:#6FA3B3; --k-person-4-on:#1E2A44; /* 图表（YOAKE -lift 档：墨地 ≥6.69，卡 ≥6.27） */ --k-chart-1:#6FA3B3; --k-chart-2:#E1A53C; --k-chart-3:#9AC3AF; --k-chart-4:#B69AC8; --k-chart-area:#1E2A44; --k-chart-grid:#2A2A28; --k-chart-axis:#A8A8A4; /* 层次：YOAKE 两档漂浮影的「夜版」——暖棕影在墨地上看不见，换成极轻的黑影＋1px 顶边微光 */ --k-shadow-1:0 1px 2px rgba(0,0,0,.28),0 10px 24px -12px rgba(0,0,0,.55); /* = --yk-shadow-float 结构 */ --k-shadow-2:0 2px 4px rgba(0,0,0,.30),0 18px 36px -14px rgba(0,0,0,.62); /* = --yk-shadow-float-hover 结构 */ --k-shadow-inset:inset 0 1px 0 rgba(236,236,234,.04); /* = --yk-shadow-inset 的夜版（墨地字 4%） */ --k-scrim:rgba(0,0,0,.60); } /* ═══════════════════════════════════════════════════════════════════════════ 4 · 设备字阶与点击尺寸（写在 ；任何元素上也生效） ═══════════════════════════════════════════════════════════════════════════ */ [data-device="phone"]{ --k-fs-display:40px; --k-fs-h1:24px; --k-fs-h2:19px; --k-fs-h3:17px; --k-fs-body:16px; --k-fs-small:14px; /* 夜里看手机：正文 16 */ --k-fs-num-xl:40px; --k-fs-num-lg:28px; --k-fs-num-md:20px; --k-tap:48px; --k-gutter:16px; } [data-device="ipad"]{ --k-fs-h1:28px; --k-fs-h2:20px; --k-fs-num-xl:48px; /* 吧台上隔一臂距离也要看清应收 */ --k-tap:48px; --k-gutter:24px; } [data-device="desktop"]{ --k-gutter:32px; } @media (prefers-reduced-motion:reduce){ :root{ --k-dur-3:1ms; --k-dur-4:1ms; --k-lift:0px; --k-press:1; } } /* ═══════════════════════════════════════════════════════════════════════════ 5 · 对比度总表（脚本计算，2026-10-15） ─────────────────────────────────────────────────────────────────────────── 夜 night 底：墨地 #131313 / 卡 #1B1A17 / surface-2 #24231F text #ECECEA ............ 15.71 / 14.71 / 13.30 text-2 #A8A8A4 .......... 7.79 / 7.29 / 6.59 gold-text #C9A85C ....... 8.17 / 7.66 / 6.92 gold #B08D3E（线/编号）.. 5.95 / 5.57 / 5.04 accent #6FA3B3 .......... 6.69 / 6.27 / 5.67 ； 在 accent-bg #1E2A44 上 5.15 accent-on #ECECEA @#1E2A44 12.08 status active #6FA3B3 ... 浅底 5.15 / 6.69 / 6.27 / 5.67 status due/check #E1A53C 浅底 5.41 / 8.54 / 8.00 / 7.23 status debt #DE7A64 ..... 浅底 4.84 / 6.26 / 5.86 / 5.30 status settled #959D5E .. 浅底 4.85 / 6.43 / 6.02 / 5.44 status vacant #A8A8A4 ... 7.79 text @各状态浅底 ........ 12.08 / 9.95 / 12.14 / 11.85（active/due/debt/settled） text-2 @各状态浅底 ...... 5.99 / 4.93 / 6.02 / 5.87 primary #131313 @#ECECEA 15.71 ； danger-on #131313 @#DE7A64 6.26 line-ui #8C8478（非文字） 5.03 / 4.71 / 4.26 ； focus #C9A85C 8.17 / 7.66 / 6.92 / 衬底 8.71 chart 1–4（非文字）...... ≥5.67（surface-2） 紙 paper 底：画布 #F2E9D8 / 紙 #FAFAF8 / 紙2 #F4F2ED / 白 #FFFFFF text #111111 ............ 15.67 / 18.07 / 16.88 / 18.88 text-2 #625C53 .......... 5.49 / 6.33 / 5.91 / 6.61 gold-text #7F6428 ....... 4.64 / 5.35 / 5.00 / 5.59 gold #B08D3E ............ 2.59 / 2.99 / 2.79 / 3.12 → 只作线，不写字 accent #425A88 .......... 5.71 / 6.59 / 6.15 / 6.89 ； 在 accent-bg #DBEDF3 上 5.71 status active #425A88 ... 浅底 5.71 status due/check #895F06 浅底 4.66 / 画布 4.70 / 紙 5.43 status debt #B43319 ..... 浅底 4.68 / 画布 5.08 / 紙 5.86 status settled #656D1C .. 浅底 4.66 / 画布 4.64 / 紙 5.35 text-2 @各状态浅底 ...... 5.49 / 5.44 / 5.05 / 5.51 primary #FAFAF8 @#111111 18.07 ； danger-on #FFFFFF @#B43319 6.13 line-ui #8C8478（非文字） 3.06 / 3.53 / 3.30 / 3.69 ； focus #866B2F 4.19 / 4.83 / 4.51 / 5.05 chart 1–4（非文字）...... ≥4.70（画布） 人员色块上的字（两主题）：佐藤 6.04 · 李 明 6.02 · 高橋 5.31 · 王 芳 5.15 ═══════════════════════════════════════════════════════════════════════════ */