/* 金融科技设计系统 - 大宗一站通 */

:root {
    /* ===== 色彩系统 ===== */

    /* 品牌色 - 深蓝系，体现专业稳重 */
    --brand-primary: #0A2647;        /* 主品牌色 - 深蓝 */
    --brand-primary-light: #1A3A62;  /* 主色浅版 */
    --brand-primary-dark: #061A32;   /* 主色深版 */
    --brand-accent: #D4AF37;         /* 强调色 - 金色，用于关键操作 */
    --brand-accent-light: #E6C35C;   /* 金色浅版 */

    /* 语义色 */
    --semantic-success: #198754;     /* 成功 - 绿色 */
    --semantic-warning: #FFC107;     /* 警告 - 橙色 */
    --semantic-danger: #DC3545;      /* 错误 - 红色 */
    --semantic-info: #0DCAF0;        /* 信息 - 青色 */

    /* 中性色 */
    --neutral-900: #212529;
    --neutral-800: #343A40;
    --neutral-700: #495057;
    --neutral-600: #6C757D;
    --neutral-500: #ADB5BD;
    --neutral-400: #CED4DA;
    --neutral-300: #DEE2E6;
    --neutral-200: #E9ECEF;
    --neutral-100: #F8F9FA;
    --neutral-50: #F5F7FA;           /* 背景色 */

    /* 表面色 */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F8F9FA;
    --surface-tertiary: #E9ECEF;

    /* 交易专用色 */
    --trade-buy: #198754;            /* 买入 - 绿色 */
    --trade-sell: #DC3545;           /* 卖出 - 红色 */
    --trade-neutral: #6C757D;        /* 中性 - 灰色 */

    /* ===== 间距系统 ===== */
    /* 紧凑商务风格，减少不必要的留白 */
    --spacing-xxs: 0.125rem;  /* 2px */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 0.75rem;    /* 12px */
    --spacing-lg: 1rem;       /* 16px */
    --spacing-xl: 1.5rem;     /* 24px */
    --spacing-xxl: 2rem;      /* 32px */
    --spacing-xxxl: 3rem;     /* 48px */

    /* ===== 圆角系统 ===== */
    /* 减少圆角，更专业 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;

    /* ===== 阴影系统 ===== */
    /* 微妙专业的阴影 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.1);

    /* 品牌阴影 */
    --shadow-brand-sm: 0 2px 8px rgba(10, 38, 71, 0.08);
    --shadow-brand-md: 0 4px 16px rgba(10, 38, 71, 0.1);
    --shadow-brand-lg: 0 8px 32px rgba(10, 38, 71, 0.12);

    /* ===== 字体系统 ===== */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

    /* 字号层级 */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */

    /* 行高 */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* 字重 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ===== 动效系统 ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.5s ease;

    /* 缓动函数 */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== 层级系统 ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    --z-index-notification: 1090;
}

/* 基础重置和优化 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--neutral-50);
    color: var(--neutral-900);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 数字等宽优化 */
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family-mono), monospace;
}

/* 实用类 */
.text-success { color: var(--semantic-success); }
.text-warning { color: var(--semantic-warning); }
.text-danger { color: var(--semantic-danger); }
.text-info { color: var(--semantic-info); }
.text-brand { color: var(--brand-primary); }
.text-accent { color: var(--brand-accent); }

.bg-success { background-color: var(--semantic-success); }
.bg-warning { background-color: var(--semantic-warning); }
.bg-danger { background-color: var(--semantic-danger); }
.bg-info { background-color: var(--semantic-info); }
.bg-brand { background-color: var(--brand-primary); }
.bg-accent { background-color: var(--brand-accent); }

/* 间距实用类 */
.mt-xxs { margin-top: var(--spacing-xxs); }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-xxl { margin-top: var(--spacing-xxl); }

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

.pt-xxs { padding-top: var(--spacing-xxs); }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-xxl { padding-top: var(--spacing-xxl); }

.pb-xxs { padding-bottom: var(--spacing-xxs); }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-xxl { padding-bottom: var(--spacing-xxl); }

/* 圆角实用类 */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* 阴影实用类 */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-brand-sm { box-shadow: var(--shadow-brand-sm); }
.shadow-brand-md { box-shadow: var(--shadow-brand-md); }
.shadow-brand-lg { box-shadow: var(--shadow-brand-lg); }

/* 交易专用类 */
.trade-buy { color: var(--trade-buy); }
.trade-sell { color: var(--trade-sell); }
.trade-neutral { color: var(--trade-neutral); }

.bg-trade-buy { background-color: var(--trade-buy); }
.bg-trade-sell { background-color: var(--trade-sell); }
.bg-trade-neutral { background-color: var(--trade-neutral); }