/* @doc 基础层：设计令牌（CSS 变量）+ reset + 基础元素样式
   🔴 所有页面样式只允许使用变量，禁止硬编码色值与间距 */

:root {
    /* 颜色 */
    --c-brand: #f97316;
    --c-brand-dark: #ea580c;
    --c-brand-light: #fff7ed;
    --c-text: #1f2937;
    --c-text-sub: #6b7280;
    --c-text-weak: #9ca3af;
    --c-bg: #f5f6f8;
    --c-bg-warm: #f7f4ee;                        /* 暖色底：访客查卡页等需要「卡片悬浮感」的页面 */
    --c-card: #ffffff;
    --c-line: #e5e7eb;
    --c-success: #16a34a;
    --c-warn: #f59e0b;
    --c-danger: #dc2626;
    --c-info: #2563eb;
    --c-brand-ring: rgba(249, 115, 22, .1);      /* 品牌色焦点光晕（输入框 focus） */
    /* 主站后台灰阶（对齐 framework/public/static/admin/admin.css） */
    --c-gray-50: #f9fafb;
    --c-gray-100: #f3f4f6;
    --c-gray-200: #e5e7eb;
    --c-gray-300: #d1d5db;
    --c-gray-400: #9ca3af;
    --c-gray-500: #6b7280;
    --c-gray-600: #4b5563;
    --c-gray-700: #374151;
    --c-gray-800: #1f2937;
    --c-gray-900: #111827;

    /* 阴影 */
    --shadow-card: 0 16px 40px rgba(0, 0, 0, .06);
    --shadow-brand: 0 12px 24px rgba(249, 115, 22, .22);
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);   /* 后台卡片轻阴影（主站 shadow-sm） */

    /* 间距（4 的倍数） */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    /* 圆角（2026-09-17 按用户提供的新视觉稿整体加大：更柔和精致，四端统一生效） */
    --r-sm: 6px;
    --r-btn: 16px;   /* 表单控件与按钮（原 8px） */
    --r-card: 24px;  /* 卡片（原 12px） */
    /* 后台紧凑档圆角（对齐主站 §9.2：控件 rounded-lg=8px、卡片 rounded-xl=12px） */
    --r-md: 8px;
    --r-lg: 12px;

    /* 字号 */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;

    /* 层级 */
    --z-nav: 100;
    --z-sheet: 200;
    --z-mask: 300;
    --z-toast: 400;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-3);
    font-weight: 600;
    line-height: 1.35;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }

p {
    margin: 0 0 var(--sp-3);
}

a {
    color: var(--c-brand);
    text-decoration: none;
}

img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

input, textarea, select, button {
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--c-text);
}

ul, ol {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-5);
}

hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--sp-4) 0;
}