/* ============================================================
   设计令牌 · 国风水墨 × iOS 质感
   翠翠小厨 POS —— 所有视觉常量的唯一来源
   ============================================================ */

:root {
  /* ---------- 国风色板 ----------
     取色自传统矿物/植物颜料：墨、宣纸、朱砂、黛蓝、松绿、赭石、鎏金 */
  --ink-900: #1b1815;   /* 焦墨 */
  --ink-800: #2a2521;   /* 浓墨 */
  --ink-700: #3d372f;   /* 重墨 */
  --ink-600: #574e44;   /* 淡墨 */
  --ink-500: #7a6f63;   /* 墨灰 */
  --ink-400: #a89e89;   /* 远山 */
  --ink-300: #bdb2a4;   /* 薄雾 */

  --paper:     #f7f3ea;  /* 宣纸（页面底） */
  --paper-2:   #faf6ec;  /* 浅宣 */
  --paper-3:   #fffdf8;  /* 卡片面 */
  --paper-sunk:#f1ecdf;  /* 下沉/输入底 */

  --cinnabar:      #c9402a;  /* 朱砂（主品牌/关键动作） */
  --cinnabar-deep: #a5301d;  /* 深朱（按压/危险） */
  --cinnabar-soft: #faeee9;  /* 朱砂浅底 */
  --cinnabar-mist: #f2dcd4;

  --indigo:      #2f4a58;  /* 黛蓝（次级强调/链接） */
  --indigo-soft: #e2eaee;
  --pine:        #2f5d4e;  /* 松绿（成功/收款） */
  --pine-soft:   #ecf3ef;
  --ochre:       #b97f1e;  /* 赭石（警示/定金） */
  --ochre-soft:  #f8efdd;
  --gold:        #c0a062;  /* 鎏金（点缀/高级） */
  --gold-soft:   #f0e7d3;

  /* ---------- 语义色 ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--paper-3);
  --surface:       var(--paper-3);
  --surface-2:     var(--paper-2);
  --sunk:          var(--paper-sunk);

  --text:          var(--ink-900);
  --text-2:        var(--ink-600);
  --text-3:        var(--ink-400);
  --text-inverse:  #fbf8f1;

  --line:          #e4ddcf;  /* 分隔线（暖） */
  --line-2:        #d6ccb8;
  --hairline:      rgba(27, 24, 21, .08);

  --brand:         var(--cinnabar);
  --brand-deep:    var(--cinnabar-deep);
  --brand-soft:    var(--cinnabar-soft);
  --accent:        var(--indigo);

  --success:       var(--pine);
  --success-soft:  var(--pine-soft);
  --warning:       var(--ochre);
  --warning-soft:  var(--ochre-soft);
  --danger:        var(--cinnabar-deep);
  --danger-soft:   #f3e0dc;

  /* 支付方式色 */
  --pay-wechat:    #3a7d44;
  --pay-alipay:    #2f6fb0;
  --pay-qr:        var(--indigo);
  --pay-cash:      var(--ochre);

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC",
               "SimSun", Georgia, "Times New Roman", serif;
  --font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "DIN Alternate",
              "PingFang SC", var(--font-sans);

  /* iOS 字号阶梯 */
  --fs-large-title: 34px;
  --fs-title1: 28px;
  --fs-title2: 22px;
  --fs-title3: 20px;
  --fs-headline: 17px;
  --fs-body: 17px;
  --fs-callout: 16px;
  --fs-subhead: 15px;
  --fs-footnote: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -.02em;
  --tracking-normal: 0;
  --tracking-wide: .04em;
  --tracking-wider: .12em;

  /* ---------- 间距（8pt 栅格 + 节奏） ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ---------- 圆角（iOS 连续圆角观感） ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------- 阴影（柔和、暖调，单层软影为主） ---------- */
  --sh-xs: 0 2px 12px rgba(42, 37, 28, .05);
  --sh-sm: 0 2px 12px rgba(42, 37, 28, .05);
  --sh-md: 0 6px 24px rgba(42, 37, 28, .08);
  --sh-lg: 0 12px 34px rgba(42, 37, 28, .12);
  --sh-xl: 0 -20px 60px rgba(42, 37, 28, .16);
  --sh-brand: 0 8px 20px rgba(201, 64, 42, .24);
  --sh-inset: inset 0 1px 2px rgba(42, 37, 28, .05);

  /* ---------- 动效（iOS 弹簧曲线） ---------- */
  --ease:        cubic-bezier(.25, .1, .25, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);
  --d1: 100ms;
  --d2: 180ms;
  --d3: 280ms;
  --d4: 420ms;
  --d5: 620ms;

  /* ---------- 布局尺寸 ---------- */
  --tabbar-h: 56px;
  --header-h: 52px;
  --app-max: 540px;        /* 手机优先：桌面居中列宽 */
  --app-max-wide: 720px;   /* 平板略宽 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-tabbar: 50;
  --z-fab: 60;
  --z-sheet-backdrop: 80;
  --z-sheet: 90;
  --z-toast: 120;
  --z-splash: 200;
}

/* 桌面/平板：放宽列宽，POS 可利用更多空间 */
@media (min-width: 768px) {
  :root { --app-max: 680px; }
}
@media (min-width: 1100px) {
  :root { --app-max: 760px; --app-max-wide: 980px; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  :root { --d1: 0ms; --d2: 1ms; --d3: 1ms; --d4: 1ms; --d5: 1ms; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}