/* ============================================
   贵州思南兴黔船业 - CSS 变量系统（江河远航主题）
   ============================================ */

:root {
    /* ========== 品牌色系 ========== */
    --color-primary: #000080;            /* 海军蓝 - 主色 */
    --color-primary-dark: #000650;       /* 深海蓝 - 渐变下层 */
    --color-secondary: #0A1F44;          /* 船体阴影蓝 */
    --color-secondary-light: #1E3D8F;    /* 海域渐变蓝 */
    --color-accent: #DC143C;             /* 信号红 */
    --color-accent-soft: rgba(220, 20, 60, 0.15);

    /* ========== 基础色系 ========== */
    --color-white: #FFFFFF;
    --color-surface: #F0F8FF;            /* 船体白 */
    --color-surface-alt: #E4ECFF;        /* 浅海蓝背景 */
    --color-light-gray: #F0F8FF;
    --color-mid-gray: #C2D0EC;
    --color-dark-gray: #0D1E40;

    /* ========== 文本色系 ========== */
    --color-text-primary: #0D1E40;
    --color-text-secondary: #4A5D80;
    --color-text-muted: #6E84A3;
    --color-text-on-primary: #F0F8FF;
    --color-text-on-accent: #FFFFFF;

    /* ========== 状态色 ========== */
    --color-success: #2BB673;
    --color-warning: #FFB347;
    --color-error: #FF4D4F;
    --color-info: #2A86FF;

    /* ========== 字体系统 ========== */
    --font-family-primary: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    --font-family-heading: "SimHei", "Microsoft YaHei", var(--font-family-primary);
    --font-family-mono: "Courier New", monospace;

    --font-size-base: 16px;
    --font-size-xs: 0.75rem;             /* 12px */
    --font-size-sm: 0.875rem;            /* 14px */
    --font-size-md: 1rem;                /* 16px */
    --font-size-lg: 1.125rem;            /* 18px */
    --font-size-xl: 1.25rem;             /* 20px */
    --font-size-xxl: 1.5rem;             /* 24px */

    --font-size-h1: 2.75rem;             /* 44px */
    --font-size-h2: 2.25rem;             /* 36px */
    --font-size-h3: 1.75rem;             /* 28px */
    --font-size-h4: 1.5rem;              /* 24px */
    --font-size-h5: 1.25rem;             /* 20px */
    --font-size-h6: 1.125rem;            /* 18px */

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

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* ========== 间距系统 (8px 基准) ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;
    --spacing-5xl: 128px;

    /* ========== 圆角与描边 ========== */
    --border-radius-sm: 4px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 28px;
    --border-radius-full: 9999px;
    --border-gradient: linear-gradient(135deg, rgba(240, 248, 255, 0.8), rgba(255, 255, 255, 0.3));

    /* ========== 阴影与滤镜 ========== */
    --shadow-sm: 0 6px 12px rgba(8, 20, 64, 0.08);
    --shadow-md: 0 12px 24px rgba(8, 20, 64, 0.12);
    --shadow-lg: 0 20px 45px rgba(8, 20, 64, 0.15);
    --shadow-xl: 0 35px 60px rgba(8, 20, 64, 0.2);
    --shadow-floating: 0 30px 70px rgba(0, 8, 64, 0.35);
    --shadow-glow: 0 0 35px rgba(30, 61, 143, 0.45);

    /* ========== 过渡与动画 ========== */
    --transition-fast: 180ms ease-in-out;
    --transition-normal: 320ms ease;
    --transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ========== 布局尺寸 ========== */
    --container-max-width: 1440px;
    --container-padding: var(--spacing-xl);
    --grid-gap: var(--spacing-lg);

    /* ========== 导航与页脚 ========== */
    --navbar-height: 76px;
    --navbar-background: rgba(0, 12, 57, 0.88);
    --navbar-text-color: var(--color-text-on-primary);

    --footer-background: #020B26;
    --footer-text-color: rgba(240, 248, 255, 0.82);
}

/* ========== 响应式断点调整 ========== */
@media (max-width: 1024px) {
    :root {
        --font-size-h1: 2.25rem;
        --font-size-h2: 1.875rem;
        --font-size-h3: 1.5rem;
        --container-padding: var(--spacing-lg);
        --grid-gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.625rem;
        --font-size-h3: 1.375rem;
        --container-padding: var(--spacing-md);
        --navbar-height: 70px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --container-padding: var(--spacing-sm);
    }
}