/* ============================================================================
 * Signeve — Design Tokens
 * ----------------------------------------------------------------------------
 * 唯一真源。所有组件只引用这里的变量，不写死色值 / 像素。
 *
 * 品牌方向：「低饱和的墨蓝与香槟」(muted slate & champagne)
 *   整套色板从品牌标里取：标本身是**低饱和**的 —— 深墨蓝 #283848（H210）、
 *   钢蓝中段 #546C84、以及尾部那抹香槟金 #DDC297（H38）。
 *   所以主色用墨蓝灰（饱和度压在 45% 以内，旧版是 88% 的青绿），
 *   强调色用香槟金（≤56%），只用在「需要动手」的地方（主 CTA、
 *   待填字段高亮、进度完成），不参与大面积铺色。
 *
 *   功能色（成功/警告/危险/信息）同样整体降饱和：它们的作用是**传达状态**，
 *   不是抢主色的注意力；靠图标与文案区分，不靠纯度。
 *
 * 命名：--<类别>-<角色>-<档位>，档位用 50…950（越小越浅）。
 * ========================================================================== */

:root {
  /* ── 1. 基础色板 ──────────────────────────────────────────────────────── */

  /* 品牌 · 墨蓝灰（取自 logo 的 #283848，色相 210） */
  --brand-50:  #F6F7F9;
  --brand-100: #EAEDF1;
  --brand-200: #D1D9E0;
  --brand-300: #B1BDC8;
  --brand-400: #8696A7;
  --brand-500: #5C738A;
  --brand-600: #41576C;   /* 主色 */
  --brand-700: #324558;
  --brand-800: #263645;
  --brand-900: #1B2632;
  --brand-950: #10171E;

  /* 强调 · 香槟金（取自 logo 尾部的 #DDC297，色相 38） */
  --accent-50:  #F9F6F1;
  --accent-100: #EFE8DC;
  --accent-200: #DED1BA;
  --accent-300: #C8B592;
  --accent-400: #B2986C;
  --accent-500: #987F52;  /* 主强调 */
  --accent-600: #806942;
  --accent-700: #675332;
  --accent-800: #534327;
  --accent-900: #3F331C;

  /* 中性 · 冷灰（色相与品牌墨蓝对齐，混排不脏） */
  --ink-50:  #F6F7F8;
  --ink-100: #EBEDEF;
  --ink-200: #DADEE2;
  --ink-300: #C1C7CD;
  --ink-400: #A0A8B1;
  --ink-500: #788591;
  --ink-600: #5B6671;
  --ink-700: #434C56;
  --ink-800: #303841;
  --ink-900: #20262D;
  --ink-950: #12171C;

  /* 语义色 */
  --green-50:  #EEF6F3;  --green-500: #317254;  --green-700: #255B42;
  --amber-50:  #F5F1EA;  --amber-500: #816637;  --amber-700: #654F29;
  --red-50:    #F7EFEE;  --red-500:   #9B4E46;  --red-700:   #7F3B34;
  --blue-50:   #EFF2F6;  --blue-500:  #4B698B;  --blue-700:  #39526F;

  /* 签署专用 */
  --ink-signature: #101820;   /* 签名笔迹，近黑墨 */
  --seal-red:      #AE4C3D;   /* 印章朱砂 */
  --seal-red-soft: #C2796C;

  /* ── 2. 角色变量（组件只引用这一层）──────────────────────────────────── */

  /* 表面 */
  --surface-page:      var(--ink-50);
  --surface-raised:    #FFFFFF;              /* 卡片、弹窗 */
  --surface-sunken:    var(--ink-100);       /* 输入框底、代码块 */
  --surface-inverse:   var(--ink-900);
  --surface-brand:     var(--brand-600);
  --surface-brand-soft:var(--brand-50);
  --surface-accent:    var(--accent-500);
  --surface-overlay:   rgb(var(--ink-950-rgb) / 0.48); /* 遮罩 */
  --surface-hover:     var(--ink-100);
  --surface-selected:  var(--brand-50);

  /* 文字 */
  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-600);
  --text-tertiary:     var(--ink-500);
  --text-placeholder:  var(--ink-400);
  --text-inverse:      #FFFFFF;
  --text-brand:        var(--brand-700);
  --text-accent:       var(--accent-700);
  --text-danger:       var(--red-700);
  --text-success:      var(--green-700);
  --text-disabled:     var(--ink-400);
  --text-link:         var(--brand-700);
  --text-link-hover:   var(--brand-800);

  /* 描边 */
  --border-subtle:     var(--ink-200);
  --border-default:    var(--ink-300);
  --border-strong:     var(--ink-400);
  --border-focus:      var(--brand-600);
  --border-danger:     var(--red-500);
  --border-brand:      var(--brand-600);

  /* 主按钮（品牌实心） */
  --button-primary-bg:        var(--brand-600);
  --button-primary-bg-hover:  var(--brand-700);
  --button-primary-bg-active: var(--brand-800);
  --button-primary-fg:        #FFFFFF;
  --button-primary-disabled:  var(--ink-200);

  /* 次按钮（描边） */
  --button-secondary-bg:        transparent;
  --button-secondary-bg-hover:  var(--ink-100);
  --button-secondary-fg:        var(--ink-800);
  --button-secondary-border:    var(--ink-300);

  /* 危险按钮 */
  --button-danger-bg:      var(--red-500);
  --button-danger-bg-hover:var(--red-700);
  --button-danger-fg:      #FFFFFF;

  /* 幽灵按钮 */
  --button-ghost-fg:       var(--brand-700);
  --button-ghost-fg-hover: var(--brand-800);
  --button-ghost-bg-hover: var(--brand-50);

  /* 表单 */
  --input-bg:            #FFFFFF;
  --input-bg-disabled:   var(--ink-100);
  --input-border:        var(--ink-300);
  --input-border-hover:  var(--ink-400);
  --input-border-focus:  var(--brand-600);
  --input-ring:          0 0 0 3px rgb(var(--brand-600-rgb) / 0.18);
  --input-ring-danger:   0 0 0 3px rgb(var(--red-500-rgb) / 0.18);
  --input-fg:            var(--ink-900);
  --input-placeholder:   var(--ink-400);

  /* 反馈态 */
  --feedback-success-bg: var(--green-50);  --feedback-success-fg: var(--green-700);
  --feedback-warning-bg: var(--amber-50);  --feedback-warning-fg: var(--amber-700);
  --feedback-danger-bg:  var(--red-50);    --feedback-danger-fg:  var(--red-700);
  --feedback-info-bg:    var(--blue-50);   --feedback-info-fg:    var(--blue-700);


  /* 通道分量 —— 给 rgb(var(--x-rgb) / a) 用。
     透明度叠加的地方一律走这里，色板改了不会漏掉某处半透明是旧色。 */
  --ink-950-rgb: 18 23 28;
  --brand-400-rgb: 134 150 167;
  --brand-500-rgb: 92 115 138;
  --brand-600-rgb: 65 87 108;
  --accent-400-rgb: 178 152 108;
  --accent-500-rgb: 152 127 82;
  --green-500-rgb: 49 114 84;
  --amber-500-rgb: 129 102 55;
  --red-500-rgb: 155 78 70;
  --blue-500-rgb: 75 105 139;

  /* ── 3. 字体 ─────────────────────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-display: 'Manrope', var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-signature: 'Caveat', 'Segoe Script', cursive;  /* 仅占位，真签名是矢量笔迹 */

  /* 字号（1.200 Minor Third，基准 16px） */
  --text-2xs: 0.694rem;  /* 11px 角标 */
  --text-xs:  0.75rem;   /* 12px 辅助说明 */
  --text-sm:  0.875rem;  /* 14px 表格、次要正文 */
  --text-md:  1rem;      /* 16px 正文（默认） */
  --text-lg:  1.125rem;  /* 18px 小标题 */
  --text-xl:  1.375rem;  /* 22px 区块标题 */
  --text-2xl: 1.75rem;   /* 28px 页面标题 */
  --text-3xl: 2.25rem;   /* 36px 营销标题 */
  --text-4xl: 3rem;      /* 48px 首屏 */

  --leading-tight:  1.2;   /* 大标题 */
  --leading-snug:   1.35;  /* 小标题 */
  --leading-normal: 1.55;  /* 正文 */
  --leading-relaxed:1.7;   /* 长文、法律条款 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight:  -0.011em;  /* 大字号收紧 */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;    /* 全大写小标签 */

  /* ── 4. 间距（4px 栅格）──────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── 5. 尺寸 ─────────────────────────────────────────────────────────── */
  --size-control-sm: 1.75rem;  /* 28px 小按钮/紧凑输入 */
  --size-control-md: 2.25rem;  /* 36px 默认 */
  --size-control-lg: 2.75rem;  /* 44px 主 CTA / 移动端触控最小 */
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-avatar-sm: 1.5rem;
  --size-avatar-md: 2rem;
  --size-avatar-lg: 2.5rem;
  --size-touch-min: 2.75rem;   /* 44px，苹果/安卓可点区域下限 */
  --size-sidebar: 15rem;       /* 240px */
  --size-sidebar-collapsed: 3.5rem;
  --size-topbar: 3.5rem;
  --size-modal-sm: 24rem;
  --size-modal-md: 32rem;
  --size-modal-lg: 44rem;
  --size-modal-xl: 60rem;
  --size-content-max: 72rem;   /* 1152px 阅读/表单最大宽度 */
  --size-prose-max: 42rem;     /* 672px 长文 */
  --size-signer-canvas: 100%;  /* 签署页 PDF 画布填充容器 */

  /* ── 6. 圆角 ─────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   0.125rem;  /*  2px 标签、徽章 */
  --radius-sm:   0.25rem;   /*  4px 输入框、按钮 */
  --radius-md:   0.5rem;    /*  8px 卡片 */
  --radius-lg:   0.75rem;   /* 12px 弹窗、面板 */
  --radius-xl:   1rem;      /* 16px 大面板、营销区 */
  --radius-full: 9999px;    /* 胶囊按钮、头像 */
  --radius-signature-pad: 0.75rem;

  /* ── 7. 阴影 ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgb(var(--ink-950-rgb) / 0.05);
  --shadow-sm: 0 1px 3px rgb(var(--ink-950-rgb) / 0.08), 0 1px 2px rgb(var(--ink-950-rgb) / 0.04);
  --shadow-md: 0 4px 12px rgb(var(--ink-950-rgb) / 0.08), 0 2px 4px rgb(var(--ink-950-rgb) / 0.04);
  --shadow-lg: 0 12px 28px rgb(var(--ink-950-rgb) / 0.12), 0 4px 8px rgb(var(--ink-950-rgb) / 0.05);
  --shadow-xl: 0 24px 48px rgb(var(--ink-950-rgb) / 0.16), 0 8px 16px rgb(var(--ink-950-rgb) / 0.06);
  --shadow-focus: 0 0 0 3px rgb(var(--brand-600-rgb) / 0.28);
  --shadow-focus-danger: 0 0 0 3px rgb(var(--red-500-rgb) / 0.28);
  --shadow-dropdown: var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-sticky-bar: 0 -4px 12px rgb(var(--ink-950-rgb) / 0.08);

  /* ── 8. 动效 ─────────────────────────────────────────────────────────── */
  --duration-instant: 80ms;   /* 按下反馈 */
  --duration-fast:    140ms;  /* 悬停、勾选 */
  --duration-normal:  220ms;  /* 展开、切换 */
  --duration-slow:    320ms;  /* 弹窗进出、抽屉 */
  --duration-ceremony:520ms;  /* 签署完成那一下 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 轻微回弹，仅用于完成态 */

  /* ── 9. 层级 ─────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-signing-toolbar: 150;   /* 签署页工具条，压在 PDF 画布上但低于弹窗 */

  /* ── 10. 签署页专用 ──────────────────────────────────────────────────── */
  --signer-canvas-bg:      var(--ink-200);   /* PDF 周围留白，突出纸张 */
  --signer-page-shadow:    0 2px 16px rgb(var(--ink-950-rgb) / 0.18);
  --signer-field-bg:       rgb(var(--accent-500-rgb) / 0.12);
  --signer-field-border:   var(--accent-500);
  --signer-field-active:   rgb(var(--accent-500-rgb) / 0.28);
  --signer-field-done-bg:  rgb(var(--brand-600-rgb) / 0.10);
  --signer-field-done-bd:  var(--brand-600);
  --signer-field-required: var(--red-500);
  --signer-toolbar-bg:     var(--surface-raised);
  --signer-toolbar-border: var(--border-subtle);
  --signer-progress-track: var(--ink-200);
  --signer-progress-fill:  var(--brand-600);
}

/* ============================================================================
 * 暗色模式 — 只重绑角色变量，不动基础色板
 * 对齐 macOS / Windows 的深色 UI，避免纯黑（#000 在 OLED 上看起来像洞）。
 * ========================================================================== */
/* 暗色模式开关：系统偏好 + 手动覆盖（[data-theme]）
 * 两份声明内容必须保持一致——改一处请同步另一处。
 * ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --surface-page:      var(--ink-950);
    --surface-raised:    var(--ink-900);
    --surface-sunken:    var(--ink-800);
    --surface-inverse:   var(--ink-50);
    --surface-hover:     var(--ink-800);
    --surface-selected:  rgb(var(--brand-600-rgb) / 0.16);
    --surface-overlay:   rgb(0 0 0 / 0.62);
    --surface-brand-soft:rgb(var(--brand-600-rgb) / 0.16);

    --text-primary:      var(--ink-100);
    --text-secondary:    var(--ink-300);
    --text-tertiary:     var(--ink-400);
    --text-placeholder:  var(--ink-500);
    --text-inverse:      var(--ink-950);
    --text-brand:        var(--brand-300);
    --text-accent:       var(--accent-300);
    --text-danger:       #C9A09C;
    --text-success:      #98C3AF;
    --text-disabled:     var(--ink-600);
    --text-link:         var(--brand-300);
    --text-link-hover:   var(--brand-200);

    --border-subtle:     var(--ink-800);
    --border-default:    var(--ink-700);
    --border-strong:     var(--ink-600);
    --border-focus:      var(--brand-400);

    /* 深色底上品牌实心按钮要提亮一档，否则与背景糊在一起 */
    --button-primary-bg:        var(--brand-500);
    --button-primary-bg-hover:  var(--brand-400);
    --button-primary-bg-active: var(--brand-300);
    --button-primary-fg:        var(--ink-950);
    --button-primary-disabled:  var(--ink-700);
    --button-secondary-fg:      var(--ink-100);
    --button-secondary-bg-hover:var(--ink-800);
    --button-secondary-border:  var(--ink-600);
    --button-ghost-fg:          var(--brand-300);
    --button-ghost-bg-hover:    rgb(var(--brand-600-rgb) / 0.18);

    --input-bg:          var(--ink-900);
    --input-bg-disabled: var(--ink-800);
    --input-border:      var(--ink-700);
    --input-border-hover:var(--ink-600);
    --input-border-focus:var(--brand-400);
    --input-ring:        0 0 0 3px rgb(var(--brand-400-rgb) / 0.24);
    --input-fg:          var(--ink-100);
    --input-placeholder: var(--ink-500);

    --feedback-success-bg: rgb(var(--green-500-rgb) / 0.16);   --feedback-success-fg: #98C3AF;
    --feedback-warning-bg: rgb(var(--amber-500-rgb) / 0.16);  --feedback-warning-fg: #C8B493;
    --feedback-danger-bg:  rgb(var(--red-500-rgb) / 0.16);   --feedback-danger-fg:  #C9A09C;
    --feedback-info-bg:    rgb(var(--blue-500-rgb) / 0.16);  --feedback-info-fg:    #A2B1C3;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 24px 48px rgb(0 0 0 / 0.7);
    --shadow-focus: 0 0 0 3px rgb(var(--brand-400-rgb) / 0.34);

    --signer-canvas-bg:     var(--ink-950);
    --signer-page-shadow:   0 2px 16px rgb(0 0 0 / 0.7);
    --signer-field-bg:      rgb(var(--accent-400-rgb) / 0.18);
    --signer-field-active:  rgb(var(--accent-400-rgb) / 0.34);
    --signer-field-done-bg: rgb(var(--brand-400-rgb) / 0.16);
    --signer-progress-track:var(--ink-800);
  }
}

/* 手动切到暗色（覆盖系统偏好）*/
[data-theme="dark"] {

    --surface-page:      var(--ink-950);
    --surface-raised:    var(--ink-900);
    --surface-sunken:    var(--ink-800);
    --surface-inverse:   var(--ink-50);
    --surface-hover:     var(--ink-800);
    --surface-selected:  rgb(var(--brand-600-rgb) / 0.16);
    --surface-overlay:   rgb(0 0 0 / 0.62);
    --surface-brand-soft:rgb(var(--brand-600-rgb) / 0.16);

    --text-primary:      var(--ink-100);
    --text-secondary:    var(--ink-300);
    --text-tertiary:     var(--ink-400);
    --text-placeholder:  var(--ink-500);
    --text-inverse:      var(--ink-950);
    --text-brand:        var(--brand-300);
    --text-accent:       var(--accent-300);
    --text-danger:       #C9A09C;
    --text-success:      #98C3AF;
    --text-disabled:     var(--ink-600);
    --text-link:         var(--brand-300);
    --text-link-hover:   var(--brand-200);

    --border-subtle:     var(--ink-800);
    --border-default:    var(--ink-700);
    --border-strong:     var(--ink-600);
    --border-focus:      var(--brand-400);

    /* 深色底上品牌实心按钮要提亮一档，否则与背景糊在一起 */
    --button-primary-bg:        var(--brand-500);
    --button-primary-bg-hover:  var(--brand-400);
    --button-primary-bg-active: var(--brand-300);
    --button-primary-fg:        var(--ink-950);
    --button-primary-disabled:  var(--ink-700);
    --button-secondary-fg:      var(--ink-100);
    --button-secondary-bg-hover:var(--ink-800);
    --button-secondary-border:  var(--ink-600);
    --button-ghost-fg:          var(--brand-300);
    --button-ghost-bg-hover:    rgb(var(--brand-600-rgb) / 0.18);

    --input-bg:          var(--ink-900);
    --input-bg-disabled: var(--ink-800);
    --input-border:      var(--ink-700);
    --input-border-hover:var(--ink-600);
    --input-border-focus:var(--brand-400);
    --input-ring:        0 0 0 3px rgb(var(--brand-400-rgb) / 0.24);
    --input-fg:          var(--ink-100);
    --input-placeholder: var(--ink-500);

    --feedback-success-bg: rgb(var(--green-500-rgb) / 0.16);   --feedback-success-fg: #98C3AF;
    --feedback-warning-bg: rgb(var(--amber-500-rgb) / 0.16);  --feedback-warning-fg: #C8B493;
    --feedback-danger-bg:  rgb(var(--red-500-rgb) / 0.16);   --feedback-danger-fg:  #C9A09C;
    --feedback-info-bg:    rgb(var(--blue-500-rgb) / 0.16);  --feedback-info-fg:    #A2B1C3;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 24px 48px rgb(0 0 0 / 0.7);
    --shadow-focus: 0 0 0 3px rgb(var(--brand-400-rgb) / 0.34);

    --signer-canvas-bg:     var(--ink-950);
    --signer-page-shadow:   0 2px 16px rgb(0 0 0 / 0.7);
    --signer-field-bg:      rgb(var(--accent-400-rgb) / 0.18);
    --signer-field-active:  rgb(var(--accent-400-rgb) / 0.34);
    --signer-field-done-bg: rgb(var(--brand-400-rgb) / 0.16);
    --signer-progress-track:var(--ink-800);
}

/* 手动切到亮色（覆盖系统偏好）*/
[data-theme="light"] {
  color-scheme: light;
}
/* ============================================================================
 * 降低动效 — 尊重系统设置，签署流程里这一点尤其重要
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast:    1ms;
    --duration-normal:  1ms;
    --duration-slow:    1ms;
    --duration-ceremony:1ms;
  }
}

/* ============================================================================
 * 打印 — 审计报告 / 签署证书导出成 PDF 时走这套
 * ========================================================================== */
@media print {
  :root {
    --surface-page: #FFFFFF;
    --surface-raised: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-subtle: #CCCCCC;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}