/* ============================================================
 * chdsx - UI 设计令牌（CSS 变量）
 * 复刻 ezBookkeeping 视觉规范，仅用于 UI 展示
 * ============================================================ */

:root {
    /* 主品牌色 */
    --color-primary: #2382ca;
    --color-primary-darken-1: #1e6fac;
    --color-primary-lighten: #4395d6;
    --color-on-primary: #ffffff;

    /* 次级色 */
    --color-secondary: #9e9e9e;
    --color-on-secondary: #ffffff;

    /* 语义色 */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;

    /* 金额语义色 */
    --color-income: #009688;       /* 收入：绿 */
    --color-expense: #d43f3f;       /* 支出：红 */
    --color-amount-yellow: #e2b60a; /* 黄 */

    /* 图表色板 */
    --chart-color-1: #cc4a66;
    --chart-color-2: #e3564a;
    --chart-color-3: #fc892c;
    --chart-color-4: #ffc349;
    --chart-color-5: #4dd291;
    --chart-color-6: #24ceb3;
    --chart-color-7: #2ab4d0;
    --chart-color-8: #065786;
    --chart-color-9: #713670;
    --chart-color-10: #8e1d51;

    /* 金额语义色 RGB 三元组（用于 SVG fill/stroke） */
    --chart-rgb-income: 0, 150, 136;
    --chart-rgb-expense: 212, 63, 63;
    --chart-rgb-warning: 255, 152, 0;

    /* 账户/分类色板 */
    --account-color-1: #000000;
    --account-color-2: #8e8e93;
    --account-color-3: #ff3b30;
    --account-color-4: #ff2d55;
    --account-color-5: #ff6b22;
    --account-color-6: #ff9500;
    --account-color-7: #ffcc00;
    --account-color-8: #cddc39;
    --account-color-9: #009688;
    --account-color-10: #4cd964;
    --account-color-11: #5ac8fa;
    --account-color-12: #2196f3;
    --account-color-13: #673ab7;
    --account-color-14: #9c27b0;

    /* 浅色主题（默认） */
    --bg-background: #f6f6f8;
    --bg-surface: #ffffff;
    --bg-surface-variant: #f3f3f5;
    --bg-navbar: rgba(255, 255, 255, 0.86);
    --bg-sidebar: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(35, 130, 202, 0.12);

    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-disabled: rgba(0, 0, 0, 0.38);
    --text-on-surface: rgba(0, 0, 0, 0.87);
    --text-on-bg: rgba(0, 0, 0, 0.87);

    --border-color: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.16);
    --divider: rgba(0, 0, 0, 0.08);

    /* 主题色 meta */
    --meta-theme-color: #f6f6f8;

    /* 字体族 */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* 字号层级 */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.25rem;     /* 20px */
    --fs-2xl: 1.5rem;     /* 24px */
    --fs-3xl: 1.875rem;   /* 30px */
    --fs-h4: 2.125rem;    /* 34px */
    --fs-h3: 3rem;        /* 48px */

    /* 字重 */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* 阴影 */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-elevation: 0 1px 6px rgba(0, 0, 0, 0.12);

    /* 间距 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* 布局尺寸 */
    --sidebar-width: 260px;
    --navbar-height: 64px;
    --tabbar-height: 56px;
    --content-max-width: 1440px;
    --content-padding: 24px;

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* 深色主题 */
[data-theme="dark"] {
    --bg-background: #121212;
    --bg-surface: #1e1e1e;
    --bg-surface-variant: #2a2a2a;
    --bg-navbar: rgba(30, 30, 30, 0.86);
    --bg-sidebar: #1e1e1e;
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(35, 130, 202, 0.22);

    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-disabled: rgba(255, 255, 255, 0.38);
    --text-on-surface: rgba(255, 255, 255, 0.92);
    --text-on-bg: rgba(255, 255, 255, 0.92);

    --border-color: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --divider: rgba(255, 255, 255, 0.1);

    --meta-theme-color: #121212;

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 自动模式跟随系统 */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-background: #121212;
        --bg-surface: #1e1e1e;
        --bg-surface-variant: #2a2a2a;
        --bg-navbar: rgba(30, 30, 30, 0.86);
        --bg-sidebar: #1e1e1e;
        --bg-overlay: rgba(0, 0, 0, 0.75);
        --bg-hover: rgba(255, 255, 255, 0.06);
        --bg-active: rgba(35, 130, 202, 0.22);

        --text-primary: rgba(255, 255, 255, 0.92);
        --text-secondary: rgba(255, 255, 255, 0.6);
        --text-disabled: rgba(255, 255, 255, 0.38);
        --text-on-surface: rgba(255, 255, 255, 0.92);
        --text-on-bg: rgba(255, 255, 255, 0.92);

        --border-color: rgba(255, 255, 255, 0.1);
        --border-strong: rgba(255, 255, 255, 0.2);
        --divider: rgba(255, 255, 255, 0.1);

        --meta-theme-color: #121212;

        --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}