/* ==========================================================================
   Huatai Theme · Design Tokens
   单一数据源：颜色 / 字体 / 间距 / 圆角 / 阴影 / 层级 / 动效
   所有其他样式表只允许引用这里的变量，禁止再写死数值。
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------- 品牌色 */
    --h-color-brand:          #B85450;
    --h-color-brand-strong:   #8C3A36;
    --h-color-brand-deep:     #6E2B28;
    --h-color-brand-soft:     #D47571;
    --h-color-brand-wash:     #FBEFEE;

    /* 辅助色：金 / 海军蓝（页头与页脚主色） */
    --h-color-gold:           #C9A227;
    --h-color-gold-strong:    #A0801F;
    --h-color-gold-soft:      #E0BC4A;
    --h-color-gold-wash:      #FBF6E4;

    --h-color-navy:           #002570;
    --h-color-navy-deep:      #001A52;
    --h-color-navy-soft:      #17457F;

    /* ---------------------------------------------------------------- 语义色 */
    --h-bg-body:              #F7F5F2;
    --h-bg-surface:           #FFFFFF;
    --h-bg-surface-alt:       #FAF8F5;
    --h-bg-sunken:            #F1EDE7;
    --h-bg-inverse:           var(--h-color-navy);

    --h-text-strong:          #1B1714;
    --h-text-body:            #4A423C;
    --h-text-muted:           #85796F;
    --h-text-inverse:         #FFFFFF;
    --h-text-inverse-muted:   #BFCBD9;
    --h-text-on-brand:        #FFFFFF;

    --h-border-subtle:        #EDE6DC;
    --h-border-default:       #DCD2C5;
    --h-border-strong:        #C2B5A4;

    --h-state-success:        #2E7D52;
    --h-state-success-wash:   #E8F5EE;
    --h-state-danger:         #B3261E;
    --h-state-danger-wash:    #FDECEA;
    --h-state-warning:        #B26A00;
    --h-state-warning-wash:   #FFF4E2;

    /* ---------------------------------------------------------------- 排版 */
    --h-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
    --h-font-serif: 'Georgia', 'Times New Roman', serif;
    --h-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* 流式字号：视口 360px → 1280px 之间线性缩放，不需要每个断点重写 */
    --h-fs-100: clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);   /* 12–13px */
    --h-fs-200: clamp(0.8125rem, 0.78rem + 0.20vw, 0.875rem);   /* 13–14px */
    --h-fs-300: clamp(0.875rem, 0.85rem + 0.22vw, 0.9375rem);   /* 14–15px */
    --h-fs-400: clamp(0.9375rem, 0.90rem + 0.28vw, 1.0625rem);  /* 15–17px 正文 */
    --h-fs-500: clamp(1.0625rem, 1.00rem + 0.42vw, 1.25rem);    /* 17–20px */
    --h-fs-600: clamp(1.25rem,  1.14rem + 0.68vw, 1.625rem);    /* 20–26px */
    --h-fs-700: clamp(1.5rem,   1.30rem + 1.10vw, 2.125rem);    /* 24–34px */
    --h-fs-800: clamp(1.875rem, 1.50rem + 1.80vw, 3rem);        /* 30–48px */
    --h-fs-900: clamp(2.125rem, 1.55rem + 2.60vw, 3.75rem);     /* 34–60px */

    --h-lh-tight:   1.18;
    --h-lh-snug:    1.32;
    --h-lh-normal:  1.6;
    --h-lh-relaxed: 1.75;

    --h-tracking-tight:  -0.018em;
    --h-tracking-normal: 0;
    --h-tracking-wide:   0.06em;
    --h-tracking-caps:   0.1em;

    --h-fw-regular:  400;
    --h-fw-medium:   500;
    --h-fw-semibold: 600;
    --h-fw-bold:     700;

    /* ---------------------------------------------------------------- 间距 */
    --h-space-3xs: 0.25rem;   /*  4px */
    --h-space-2xs: 0.5rem;    /*  8px */
    --h-space-xs:  0.75rem;   /* 12px */
    --h-space-sm:  1rem;      /* 16px */
    --h-space-md:  1.5rem;    /* 24px */
    --h-space-lg:  2rem;      /* 32px */
    --h-space-xl:  3rem;      /* 48px */
    --h-space-2xl: 4rem;      /* 64px */
    --h-space-3xl: 6rem;      /* 96px */

    /* 区块级垂直节奏 */
    --h-section-y: clamp(3rem, 2rem + 4vw, 6rem);

    /* ---------------------------------------------------------------- 圆角 */
    --h-radius-xs:  4px;
    --h-radius-sm:  6px;
    --h-radius-md:  10px;
    --h-radius-lg:  16px;
    --h-radius-xl:  24px;
    --h-radius-pill: 999px;

    /* ---------------------------------------------------------------- 阴影 */
    --h-shadow-xs: 0 1px 2px rgba(27, 23, 20, 0.06);
    --h-shadow-sm: 0 1px 3px rgba(27, 23, 20, 0.08),
                   0 1px 2px rgba(27, 23, 20, 0.04);
    --h-shadow-md: 0 4px 12px rgba(27, 23, 20, 0.10);
    --h-shadow-lg: 0 8px 28px rgba(27, 23, 20, 0.14);
    --h-shadow-xl: 0 16px 48px rgba(27, 23, 20, 0.18);
    --h-shadow-focus: 0 0 0 3px rgba(184, 84, 80, 0.28);

    /* ---------------------------------------------------------------- 布局 */
    --h-container-max:   1320px;
    --h-container-pad:   clamp(1rem, 0.5rem + 2.2vw, 2rem);
    --h-gutter:          clamp(1rem, 0.6rem + 1.4vw, 2rem);

    --h-header-h:       72px;
    --h-header-h-lg:    84px;
    --h-topbar-h:       40px;
    /* 固定页头真实总高 = 主条 + 顶栏，所有需要避让固定页头的偏移都引用它 */
    --h-header-total:   calc(var(--h-header-h) + var(--h-topbar-h));
    --h-sidebar-w:      320px;
    --h-drawer-w:       min(88vw, 360px);
    --h-content-measure: 68ch;

    /* ---------------------------------------------------------------- 层级 */
    --h-z-base:      1;
    --h-z-sticky:    100;
    --h-z-overlay:   900;
    --h-z-drawer:    1000;
    --h-z-modal:     1100;
    --h-z-skip:      1200;

    /* ---------------------------------------------------------------- 动效 */
    --h-ease-standard: cubic-bezier(0.20, 0, 0, 1);
    --h-ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
    --h-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

    --h-dur-fast:   120ms;
    --h-dur-base:   220ms;
    --h-dur-slow:   360ms;

    --h-transition: color var(--h-dur-base) var(--h-ease-standard),
                    background-color var(--h-dur-base) var(--h-ease-standard),
                    border-color var(--h-dur-base) var(--h-ease-standard),
                    box-shadow var(--h-dur-base) var(--h-ease-standard),
                    opacity var(--h-dur-base) var(--h-ease-standard),
                    transform var(--h-dur-base) var(--h-ease-standard);
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --h-dur-fast: 0.01ms;
        --h-dur-base: 0.01ms;
        --h-dur-slow: 0.01ms;
    }
}