/* ============================================================
 * 美鸥广测 - 设计系统 Token
 * Carbon — Enterprise System (IBM-inspired)
 * ============================================================ */

:root {
    /* ── 主色调 (IBM Blue) ── */
    --color-primary: #004ccd;
    --color-primary-hover: #003da9;
    --color-primary-light: #dbe1ff;
    --color-primary-dark: #003da9;
    --color-primary-container: #0f62fe;
    --color-on-primary: #ffffff;

    /* ── 辅助色 (Cool Gray) ── */
    --color-secondary: #5e5e5e;
    --color-secondary-hover: #464747;
    --color-secondary-container: #e1dfdf;
    --color-on-secondary: #ffffff;

    /* ── 第三色 (Warning Amber) ── */
    --color-tertiary: #784f00;
    --color-tertiary-container: #986500;
    --color-on-tertiary: #ffffff;

    /* ── 品牌色 (Carbon 适配) ── */
    --color-tech-blue-deep: #003da9;
    --color-precision-gray: #6f6f6f;
    --color-deep-navy: #161616;

    /* ── 表面色 (Warm White) ── */
    --color-surface: #fbf9f8;
    --color-surface-dim: #dbd9d9;
    --color-surface-bright: #fbf9f8;
    --color-surface-container: #efeded;
    --color-surface-container-low: #f5f3f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #eae8e7;
    --color-surface-container-highest: #e4e2e2;
    --color-surface-variant: #e4e2e2;

    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #424656;
    --color-on-background: #1b1c1c;

    /* ── 边框 ── */
    --color-outline: #737687;
    --color-outline-variant: #c3c6d8;
    --color-border-subtle: #e0e0e0;

    /* ── 语义色 ── */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-success: #198038;
    --color-warning: #f0a72b;

    /* ── 排版: 字体族 (IBM Plex Sans 全站统一) ── */
    --font-headline: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

    /* ── 排版: 字号与行高 (Carbon ratio) ── */
    --text-hero: 2rem;          /* 32px - Carbon headline-lg */
    --text-hero-mobile: 1.5rem;  /* 24px */
    --text-headline-lg: 2rem;    /* 32px */
    --text-headline-md: 1.5rem;   /* 24px */
    --text-headline-sm: 1.25rem;  /* 20px */
    --text-body-lg: 1rem;        /* 16px */
    --text-body-md: 0.875rem;    /* 14px */
    --text-body-sm: 0.75rem;     /* 12px */
    --text-label: 0.75rem;       /* 12px */
    --text-button: 0.875rem;     /* 14px */

    --leading-hero: 1.25;
    --leading-headline: 1.33;
    --leading-body: 1.43;
    --leading-relaxed: 1.6;

    --tracking-tight: -0.01em;
    --tracking-label: 0;

    --weight-normal: 400;
    --weight-medium: 400;
    --weight-semibold: 600;
    --weight-bold: 600;

    /* ── 间距 (8px 基准 / Carbon scale) ── */
    --space-unit: 0.5rem;    /* 8px */
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-32: 8rem;        /* 128px */

    /* ── 圆角 ── */
    --radius-sm: 0.125rem;   /* 2px */
    --radius: 0.25rem;       /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-full: 9999px;

    /* ── 布局 ── */
    --container-max: 1280px;
    --gutter: 24px;
    --margin-desktop: 64px;
    --margin-mobile: 20px;
    --header-height: 72px;

    /* ── 阴影 (Carbon minimal) ── */
    --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.10);
    --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0px 6px 20px rgba(0, 0, 0, 0.15);

    /* ── 过渡 ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Z-index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
}