/* ============================================================
 * common.css
 * 设计令牌 + 基础元素 + 排版 + 工具类
 * 主色：#4A6FA5（淡蓝灰）  风格：白底 / 克制 / 留白充足
 * ============================================================ */

/* ============================================================
 * 1) Design Tokens（设计变量）
 * ============================================================ */
:root {
    /* —— 品牌色 —— */
    --color-primary:        #4A6FA5;
    --color-primary-hover:  #3D5E8E;
    --color-primary-active: #324F77;
    --color-primary-soft:   #EEF2F8;  /* 主色弱底 */
    --color-primary-line:   #D6E0EE;  /* 主色弱边 */

    /* —— 中性色 —— */
    --color-bg:        #F7F8FA;       /* 页面底色 */
    --color-bg-alt:    #FAFBFC;       /* 次级底色 */
    --color-surface:   #FFFFFF;       /* 卡片/表面 */
    --color-text:      #1A1F36;       /* 主文字 */
    --color-text-2:    #4B5563;       /* 次文字 */
    --color-text-3:    #6B7280;       /* 弱文字 */
    --color-text-4:    #9CA3AF;       /* 占位/标签 */
    --color-border:    #E5E8EC;       /* 默认边 */
    --color-border-strong: #D1D5DB;   /* 强调边 */
    --color-divider:   #EEF0F3;

    /* —— 语义色 —— */
    --color-success:       #16A34A;
    --color-success-soft:  #ECFDF3;
    --color-warning:       #D97706;
    --color-warning-soft:  #FFF7ED;
    --color-danger:        #DC2626;
    --color-danger-soft:   #FEF2F2;
    --color-info:          #4A6FA5;
    --color-info-soft:     #EEF2F8;

    /* —— 圆角 —— */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* —— 阴影（克制，无大模糊光斑） —— */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow:    0 4px 12px rgba(16, 24, 40, .06);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, .08);

    /* —— 间距栅格（8px 基础） —— */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* —— 字号 —— */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;

    /* —— 行高 —— */
    --lh-tight:  1.3;
    --lh-base:   1.55;
    --lh-loose:  1.7;

    /* —— 过渡（统一时长 + 缓动） —— */
    --t-fast: 120ms ease;
    --t:      160ms ease;
    --t-slow: 240ms ease;

    /* —— 布局尺寸 —— */
    --topbar-h:  56px;
    --sidebar-w: 220px;
    --container-max: 1200px;
    --container-narrow: 720px;
}

/* ============================================================
 * 2) Reset / Normalize
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t);
}

a:hover { color: var(--color-primary-hover); }

hr, .hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin: var(--space-5) 0;
}

ul, ol { margin: 0; padding-left: 1.4em; }

/* 表单原生外观重置（保留可访问性） */
input, textarea, select, button {
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-4);
}

/* 滚动条（仅 Webkit）—— 极轻量、不抢眼 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .12);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .22);
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* 选中态颜色 */
::selection {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

/* ============================================================
 * 3) 排版
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--color-text);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0; }

strong { font-weight: 600; }

/* 等宽字体（订单号 / 卡密展示） */
.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
}

/* ============================================================
 * 4) 通用工具类
 * ============================================================ */

/* 文本色 */
.muted        { color: var(--color-text-3); }
.text-2       { color: var(--color-text-2); }
.text-3       { color: var(--color-text-3); }
.text-4       { color: var(--color-text-4); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }

/* 字号 */
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.lg    { font-size: var(--fs-lg); }

/* 文本布局 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--color-text-2);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* 间距工具（按需，不滥用） */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* 容器 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* flex 工具（按需，不写完整原子化） */
.row     { display: flex; align-items: center; }
.row-gap { gap: var(--space-3); }
.col     { display: flex; flex-direction: column; }
.center  { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.flex-1  { flex: 1 1 auto; min-width: 0; }

/* 分隔点 */
.dot {
    display: inline-block;
    margin: 0 var(--space-2);
    color: var(--color-text-4);
}

/* 链接 */
.link {
    color: var(--color-primary);
    cursor: pointer;
    transition: color var(--t);
}
.link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* hidden（兼容旧浏览器） */
[hidden] { display: none !important; }

/* ============================================================
 * 5) Page 骨架（与 layout.css 协作）
 * ============================================================ */
.page {
    min-height: calc(100vh - var(--topbar-h));
    padding-bottom: var(--space-12);
}

.page-head {
    padding: var(--space-6) 0 var(--space-4);
}
.page-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.page-sub {
    color: var(--color-text-3);
    font-size: var(--fs-sm);
}

.footer {
    padding: var(--space-8) 0;
    text-align: center;
    color: var(--color-text-4);
    border-top: 1px solid var(--color-divider);
    margin-top: var(--space-12);
    background: var(--color-surface);
}

/* ============================================================
 * 6) 焦点可见（无障碍）
 * ============================================================ */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 但表单内部组件已有自己的 focus 样式，无需双重描边 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: none;
}

/* ============================================================
 * 7) 通用提示文字
 * ============================================================ */
.hint {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--color-text-3);
    line-height: var(--lh-base);
}
.hint-warn { color: var(--color-warning); }
.hint-error { color: var(--color-danger); }

/* ============================================================
 * 8) 打印优化
 * ============================================================ */
@media print {
    body { background: #fff; }
    .topbar, .sidebar, .footer { display: none !important; }
}