/* ====================== */
/* 基础变量 */
/* ====================== */
:root{

    --app-color-1:#48C9B0;
    --app-color-2:#66C7B4;
    --app-color-3:#A2D9CE22;
    --app-color-4:#E74900;
    --color-primary-1:#337ecc;
    --color-primary-2:#409eff;
    --color-primary-3:#ecf5ff;
    --color-success-1:#529b2e;
    --color-success-2:#67c23a;
    --color-success-3:#f0f9eb;
    --color-warn-1:#b88230;
    --color-warn-2:#e6a23c;
    --color-warn-3:#fdf6ec;
    --color-danger-1:#c45656;
    --color-danger-2:#f56c6c;
    --color-danger-3:#fef0f0;

    /* 字体 */
    --font-family-base: 'Inter', system-ui, sans-serif;
    --font-family-mono: 'Courier New', monospace;

    /* 大小 */
    --font-size-base: 16px;

    /* 行距 */
    --line-height-base: 1.6;

    /* 间距 */
    --spacing-base: 8px;

    /* 圆角 */
    --border-radius-base: 8px;

}

/* 公共变量 */
:root{

    /* 字体大小 */
    --font-size-h1: calc(var(--font-size-base) * 2); /* 32px */
    --font-size-h2: calc(var(--font-size-base) * 1.5); /* 24px */
    --font-size-h3: calc(var(--font-size-base) * 1.17); /* 18.72px */
    --font-size-h4: var(--font-size-base); /* 16px */
    --font-size-h5: calc(var(--font-size-base) * 0.83); /* 13.28px */
    --font-size-h6: calc(var(--font-size-base) * 0.67); /* 10.72px */
    --font-size-text: calc(var(--font-size-base) * 0.9375); /* 15px */

    /* 间距 */
    --spacing-xs: calc(var(--spacing-base) * 0.5); /* 4px */
    --spacing-sm: var(--spacing-base); /* 8px */
    --spacing-md: calc(var(--spacing-base) * 2); /* 16px */
    --spacing-lg: calc(var(--spacing-base) * 3); /* 24px */
    --spacing-xl: calc(var(--spacing-base) * 4); /* 32px */

    /* 圆角 */
    --border-radius-sm: calc(var(--border-radius-base) * 0.5); /* 4px */
    --border-radius-md: var(--border-radius-base); /* 8px */
    --border-radius-lg: calc(var(--border-radius-base) * 1.5); /* 12px */

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.1);

    /* 动画 */
    --transition-duration: 0.2s;
    --transition-timing: ease-in-out;
}

/* 默认light主题颜色 */
:root{

    /* 基础颜色 */
    --color-white: #ffffff;
    --color-white-background: #ffffff;
    --color-black: #0A0A0A;
    --color-black-background: #0A0A0A;


    --image-loading: linear-gradient(to right,  rgba(0, 0, 0, 0),rgba(255, 255, 255, .7), rgba(0, 0, 0, 0));

    /* 灰色调 */
    --color-gray-100: #f6f7f8;
    --color-gray-150: #f1f2f3;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
/*    --color-gray-400: #ced4da;*/
    --color-gray-400: #a5a6aa;
/*    --color-gray-500: #adb5bd;*/
    --color-gray-500: #818181;
/*    --color-gray-600: #6c757d;*/
    --color-gray-600: #67717a;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
/*    --color-gray-900: #212529;*/
    --color-gray-900: #2f323d;

    /* 主色调 */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    /* 文本颜色 */
    --color-text: var(--color-gray-900); /* 默认文本 */
    --color-subtext: var(--color-gray-500); /* 副标题文本 */
    --color-text-secondary: var(--color-gray-600); /* 次要文字 */
    --color-text-tip: var(--color-gray-400); /* 提示文字 */
    --color-text-placeholder: var(--color-gray-400); /* 占位符 */
    --color-text-light: var(--color-gray-600);
    --color-text-inverse: var(--color-white);

    /* 背景颜色 */
    --color-background: var(--color-white);
    --color-background-sm: var(--color-gray-100);
    --color-background-md: var(--color-gray-150);
    --color-background-lg: var(--color-gray-200);
    --color-background-inverse: var(--color-gray-900);

    /* 边框颜色 */
    --color-border: var(--color-gray-300);
    --color-border-sm: var(--color-gray-100);
    --color-border-md: var(--color-gray-200);
}

/* Dark主题颜色 */

html[theme="dark"]{

    /* 基础颜色 */
    --color-white: #ffffff;
    --color-white-background: #141414
;
    --color-black: #0A0A0A;
    --color-black-background: #f3f4f5;

    --image-loading: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0));;

     /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.1);
    --shadow-md: 0 2px 8px rgba(255, 255, 255, 0.1);
    --shadow-lg: 0 4px 15px rgba(255, 255, 255, 0.1);
  
    /* 灰色调 */
    --color-gray-100: #1a1a1a;
    --color-gray-150: #242424;
    --color-gray-200: #2e2e2e;
    --color-gray-300: #383838;
    --color-gray-400: #424242;
    --color-gray-500: #575757;
    --color-gray-600: #6c6c6c;
    --color-gray-700: #818181;
    --color-gray-800: #969696;
    --color-gray-900: #E5EAF3;
    
    /* 主色调 */
    --color-primary: #0056b3;
    --color-primary-hover: #003a70;
    --color-secondary: #495057;
    --color-success: #216e39;
    --color-warning: #d4ac0d;
    --color-danger: #a71d2a;
    --color-info: #0f5257;


    /* 文本颜色 */
    --color-text: var(--color-gray-900); /* 默认文本 */
    --color-subtext: var(--color-gray-500); /* 副标题文本 */
    --color-text-secondary: var(--color-gray-800); /* 次要文字 */
    --color-text-tip: var(--color-gray-400); /* 提示文字 */
    --color-text-placeholder: var(--color-gray-800); /* 占位符 */
    --color-text-light: var(--color-gray-600);
    --color-text-inverse: var(--color-gray-100);


    /* 背景颜色 */
    --color-background: var(--color-black);
    --color-background-sm: var(--color-gray-100);
    --color-background-md: var(--color-gray-150);
    --color-background-lg: var(--color-gray-200);
    --color-background-inverse: #eeeeee;
  
}


/* 公共样式统一 */
*{
    margin: 0;
    padding: 0;
}
input:-webkit-autofill {
    background-color: transparent !important; /* 覆盖默认背景 */
    -webkit-box-shadow: 0 0 0 1000px white inset; /* 使用内阴影覆盖背景 */
}


@media(max-width: 992px){
    :root{
        --font-size-base: 17.5px;
    }
}