/* ========================================
   基础样式 - FaceTA H5 设计规范
   基于 8px Grid 系统
   ======================================== */

:root {
    /* ==================== 颜色令牌 ==================== */
    
    /* 主色与语义色 */
    --color-primary: #00D4D4;              /* 主按钮、核心交互元素 */
    --color-primary-light: #33E6E6;        /* 按钮悬停/按下状态 */
    --color-amount: #F5A623;               /* 金融金额数值、正向反馈文本 */
    
    /* 中性色与背景色 */
    --color-text-primary: #333333;         /* 页面标题、列表项标题、关键标签 - common_normal_text */
    --color-text-secondary: #666666;       /* 描述性文字、副标题、卡片标签 */
    --color-text-tertiary: #999999;        /* 辅助说明、图标提示文字 - common_light_grey */
    --color-text-quaternary: #CCCCCC;      /* 占位符文本、禁用状态 - common_light_grey */
    --color-text-placeholder: #999999;     /* 输入框占位符 */
    --color-border: #F0F0F0;               /* 分割线、列表项底部分隔线 - common_border */
    --color-bg-page: #F5F5F5;              /* 全局页面背景色 - common_background */
    --color-bg-header: #E0F9F9;            /* 顶部导航栏背景色 */
    --color-bg-card: #FFFDF5;              /* 内容卡片背景色（奶油白）*/
    
    /* ==================== 字体排版规范 ==================== */
    /* 基础根字号: 16px (1rem = 16px) */
    /* 微信小程序: 1rem = 32rpx */
    
    /* 字体大小层级系统（基于原APP设计规范）*/
    --font-size-xs: 0.625rem;              /* 10px - 特小号（辅助信息、角标）*/
    --font-size-sm: 0.75rem;               /* 12px - 小号（二级说明、提示文字）*/
    --font-size-md: 0.875rem;              /* 14px - 中二号（正文、输入框、按钮文字）*/
    --font-size-lg: 1rem;                  /* 16px - 中号（Tab标签、列表项）*/
    --font-size-title: 1.125rem;           /* 18px - 大号（页面标题、卡片标题）*/
    --font-size-xl: 1.5rem;                /* 24px - 特大号（核心金额数值展示）*/
    
    /* 字重 */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 行高 */
    --line-height-tight: 1.2;              /* 核心金额数值 */
    --line-height-normal: 1.4;             /* 页面大标题 */
    --line-height-base: 1.5;               /* 列表项文本、描述性文本 */
    
    /* ==================== 间距与布局令牌 (8px Grid) ==================== */
    --space-xs: 0.25rem;                   /* 4px / 8rpx - 紧凑垂直间距 */
    --space-sm: 0.5rem;                    /* 8px / 16rpx - 图标与文字间距 */
    --space-md: 1rem;                      /* 16px / 32rpx - 页面左右安全边距 */
    --space-lg: 1.25rem;                   /* 20px / 40rpx - 卡片上下内边距 */
    --space-xl: 1.5rem;                    /* 24px / 48rpx - 模块之间的垂直外边距 */
    
    /* ==================== 组件规范常量 ==================== */
    
    /* 卡片组件 */
    --card-radius: 0.75rem;                /* 12px / 24rpx */
    --card-padding-v: var(--space-lg);     /* 垂直方向内边距 */
    --card-padding-h: var(--space-md);     /* 水平方向内边距 */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    --card-margin-bottom: var(--space-md);
    
    /* 列表项组件 */
    --list-item-height: 3.5rem;            /* 56px / 112rpx */
    --list-item-padding-h: var(--space-md);
    --list-item-border: 1px solid var(--color-border);
    --list-arrow-size: 1.125rem;           /* 18px */
    
    /* 主按钮组件 */
    --btn-primary-height: 3rem;            /* 48px / 96rpx */
    --btn-primary-radius: 0.75rem;         /* 12px / 24rpx */
    --btn-primary-width: calc(100% - 2rem); /* 100% - 2 * space-md */
    
    /* 导航栏组件 */
    --header-desktop-height: 4rem;         /* 64px - PC端顶部导航栏高度 */
    --header-tablet-height: 3.75rem;       /* 60px - 平板端顶部导航栏高度 - common_title_h(41dp)的Web适配 */
    --header-mobile-height: 3.5rem;        /* 56px - 移动端顶部标题栏高度 */
    --nav-tab-height: 3.75rem;             /* 60px - 移动端底部Tab导航高度 */
    --nav-tab-icon-size: 1.75rem;          /* 28px - Tab图标尺寸 */
}

/* ==================== 全局重置 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Sticky Footer 布局 - 确保页面最小高度 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

/* 文本对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Flexbox 布局 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* 显示控制 */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* 尺寸 */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* 溢出控制 */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* 圆角 */
.rounded { border-radius: var(--card-radius); }

/* 阴影 */
.shadow { box-shadow: var(--card-shadow); }

/* 文本颜色 */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-amount { color: var(--color-amount); }

/* 背景颜色 */
.bg-page { background-color: var(--color-bg-page); }
.bg-header { background-color: var(--color-bg-header); }
.bg-card { background-color: var(--color-bg-card); }
.bg-primary { background-color: var(--color-primary); }

/* 字重 */
.font-normal { font-weight: var(--font-weight-normal); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 字体大小 */
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-title { font-size: var(--font-size-title); }
.text-xl { font-size: var(--font-size-xl); }

/* 间距 - Padding */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* 间距 - Margin */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* 无障碍访问 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}