/**
 * 颜色工具类系统
 * 基于设计令牌提供的颜色变量，构建实用的颜色工具类
 * 注意：所有颜色变量已在 _design-tokens.css 中定义
 */

/* ==========================================================================
   1. 背景颜色工具类
   ========================================================================== */

/* 品牌色背景 */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-hover:hover {
    background-color: var(--color-primary-hover);
}

.bg-primary-active:active {
    background-color: var(--color-primary-active);
}

.bg-primary-light {
    background-color: var(--color-primary-bg);
}

/* 状态色背景 */
.bg-success {
    background-color: var(--color-success);
}

.bg-success-light {
    background-color: var(--color-success-bg);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-warning-light {
    background-color: var(--color-warning-bg);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-error-light {
    background-color: var(--color-error-bg);
}

.bg-info {
    background-color: var(--color-info);
}

.bg-info-light {
    background-color: var(--color-info-bg);
}

/* 中性色背景 */
.bg-white {
    background-color: var(--color-neutral-bg);
}

.bg-gray-100 {
    background-color: var(--color-neutral-bg-tertiary);
}

.bg-gray-50 {
    background-color: var(--color-neutral-bg-secondary);
}

.bg-transparent {
    background-color: transparent;
}

/* 辅助色背景 */
.bg-accent-1 {
    background-color: var(--color-accent-1);
}

.bg-accent-2 {
    background-color: var(--color-accent-2);
}

.bg-accent-1-light {
    background-color: var(--color-accent-1-bg);
}

.bg-accent-2-light {
    background-color: var(--color-accent-2-bg);
}

/* 产品色背景 */
.bg-product-dps {
    background-color: var(--color-product-dps);
}

.bg-product-tps {
    background-color: var(--color-product-tps);
}

.bg-product-api {
    background-color: var(--color-product-api);
}

/* 控制台背景 */
.bg-console {
    background-color: var(--color-console-bg);
}

/* 状态背景 */
.bg-state-hover {
    background-color: var(--color-state-hover);
}

.bg-state-focus {
    background-color: var(--color-state-focus);
}

.bg-state-disabled {
    background-color: var(--color-state-disabled);
}

/* ==========================================================================
   2. 文字颜色工具类
   ========================================================================== */

/* 品牌色文字 */
.text-primary {
    color: var(--color-primary);
}

.text-primary-hover:hover {
    color: var(--color-primary-hover);
}

.text-primary-active:active {
    color: var(--color-primary-active);
}

/* 状态色文字 */
.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-error {
    color: var(--color-error);
}

.text-info {
    color: var(--color-info);
}

/* 中性色文字 */
.text-title {
    color: var(--color-neutral-title);
}

.text-body {
    color: var(--color-neutral-text);
}

.text-secondary {
    color: var(--color-neutral-text-secondary);
}

.text-tertiary {
    color: var(--color-neutral-text-tertiary);
}

.text-quaternary {
    color: var(--color-neutral-text-quaternary);
}

.text-disabled {
    color: var(--color-neutral-text-disabled);
}

/* 链接颜色 */
.text-link {
    color: var(--color-link);
}

.text-link:hover {
    color: var(--color-link-hover);
}

.text-link:active {
    color: var(--color-link-active);
}

.text-link-visited {
    color: var(--color-link-visited);
}

/* 辅助色文字 */
.text-accent-1 {
    color: var(--color-accent-1);
}

.text-accent-2 {
    color: var(--color-accent-2);
}

/* 控制台文字 */
.text-console-header {
    color: var(--color-console-text-header);
}

.hover-text-console-header:hover {
    color: var(--color-console-text-header-hover);
}

/* 白色文字 */
.text-white {
    color: white;
}

/* 简化别名 */
.text-danger {
    color: var(--color-danger);
}

/* ==========================================================================
   3. 边框颜色工具类
   ========================================================================== */

/* 品牌色边框 */
.border-primary {
    border-color: var(--color-primary);
}

.border-primary-light {
    border-color: var(--color-primary-border);
}

/* 状态色边框 */
.border-success {
    border-color: var(--color-success);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-error {
    border-color: var(--color-error);
}

.border-info {
    border-color: var(--color-info);
}

/* 中性色边框 */
.border-gray {
    border-color: var(--color-neutral-border);
}

.border-gray-light {
    border-color: var(--color-neutral-border-secondary);
}

.border-gray-lighter {
    border-color: var(--color-neutral-border-tertiary);
}

.border-divider {
    border-color: var(--color-neutral-divider);
}

/* 辅助色边框 */
.border-accent-1 {
    border-color: var(--color-accent-1);
}

.border-accent-2 {
    border-color: var(--color-accent-2);
}

/* 语义化边框颜色 */
.border-default {
    border-color: var(--border-color-default);
}

.border-muted {
    border-color: var(--border-color-muted);
}

.border-emphasis {
    border-color: var(--border-color-emphasis);
}

/* 危险色边框别名 */
.border-danger {
    border-color: var(--color-danger-border);
}

/* ==========================================================================
   4. 填充颜色工具类
   ========================================================================== */

.fill-primary {
    fill: var(--color-primary);
}

.fill-success {
    fill: var(--color-success);
}

.fill-warning {
    fill: var(--color-warning);
}

.fill-error {
    fill: var(--color-error);
}

.fill-white {
    fill: white;
}

.fill-current {
    fill: currentColor;
}

/* ==========================================================================
   5. 渐变背景工具类
   ========================================================================== */

.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-2) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);
}

.gradient-success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-primary) 100%);
}

.gradient-subtle {
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-neutral-bg-tertiary) 100%);
}

.gradient-tag-hot {
    background: var(--color-tag-hot);
}

/* ==========================================================================
   6. 阴影颜色工具类
   ========================================================================== */

.shadow-primary {
    box-shadow: var(--shadow-primary);
}

.shadow-primary-lg {
    box-shadow: var(--shadow-primary-lg);
}

.shadow-error {
    box-shadow: var(--shadow-error);
}

.shadow-success {
    box-shadow: var(--shadow-success);
}

/* 聚焦阴影 */
.focus-shadow-primary:focus {
    box-shadow: var(--shadow-focus);
}

.focus-shadow-error:focus {
    box-shadow: var(--shadow-focus-error);
}

.focus-shadow-success:focus {
    box-shadow: var(--shadow-focus-success);
}

.focus-shadow-warning:focus {
    box-shadow: var(--shadow-focus-warning);
}

/* ==========================================================================
   7. 状态交互工具类
   ========================================================================== */

/* 悬停状态 */
.hover-bg-primary:hover {
    background-color: var(--color-primary-hover);
}

.hover-bg-success:hover {
    background-color: var(--color-success-hover);
}

.hover-bg-warning:hover {
    background-color: var(--color-warning-hover);
}

.hover-bg-error:hover {
    background-color: var(--color-error-hover);
}

.hover-bg-accent-1:hover {
    background-color: var(--color-accent-1-hover);
}

.hover-bg-accent-2:hover {
    background-color: var(--color-accent-2-hover);
}

.hover-text-primary:hover {
    color: var(--color-primary-hover);
}

.hover-text-success:hover {
    color: var(--color-success-hover);
}

.hover-text-warning:hover {
    color: var(--color-warning-hover);
}

.hover-text-error:hover {
    color: var(--color-error-hover);
}

/* 激活状态 */
.active-bg-primary:active {
    background-color: var(--color-primary-active);
}

.active-bg-success:active {
    background-color: var(--color-success-active);
}

.active-bg-warning:active {
    background-color: var(--color-warning-active);
}

.active-bg-error:active {
    background-color: var(--color-error-active);
}

.active-bg-accent-1:active {
    background-color: var(--color-accent-1-active);
}

.active-bg-accent-2:active {
    background-color: var(--color-accent-2-active);
}

/* ==========================================================================
   8. 输入框颜色状态
   ========================================================================== */

.input-default {
    border-color: var(--color-input-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-default:hover {
    border-color: var(--color-input-border-hover);
}

.input-default:focus {
    border-color: var(--color-input-border-focus);
    box-shadow: var(--color-input-shadow-focus);
}

.input-error {
    border-color: var(--color-error-border);
}

.input-error:focus {
    border-color: var(--color-error);
    box-shadow: var(--color-input-shadow-focus-error);
}

.input-disabled {
    background-color: var(--color-input-bg-disabled);
    color: var(--color-input-text-disabled);
    cursor: not-allowed;
}

/* 占位符样式 */
::placeholder {
    color: var(--color-input-placeholder);
    opacity: 1;
}

::-webkit-input-placeholder {
    color: var(--color-input-placeholder);
}

::-moz-placeholder {
    color: var(--color-input-placeholder);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--color-input-placeholder);
}

/* ==========================================================================
   9. 特殊标记样式
   ========================================================================== */

.tag-new {
    background-color: var(--color-tag-new);
    color: var(--color-neutral-title);
}

.tag-hot {
    background: var(--color-tag-hot);
    color: white;
}

.tag-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

.tag-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.tag-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.tag-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

/* 标签通用样式 */
.tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-0-5) var(--spacing-2);
    border-radius: var(--radius-sm);
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================================
   10. 滚动条样式
   ========================================================================== */

.scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-border) transparent;
}

.scrollbar-custom::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: var(--radius-full);
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: var(--color-neutral-border);
    border-radius: var(--radius-full);
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
}

/* 隐藏滚动条但保留功能 */
.scrollbar-hidden {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* ==========================================================================
   11. 颜色过渡动画
   ========================================================================== */

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: var(--transition-timing-ease);
    transition-duration: var(--transition-duration-200);
}

.transition-colors-fast {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: var(--transition-timing-ease);
    transition-duration: var(--transition-duration-150);
}

.transition-colors-slow {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: var(--transition-timing-ease);
    transition-duration: var(--transition-duration-300);
}

/* ==========================================================================
   12. 响应式颜色类
   ========================================================================== */

@media (min-width: 768px) {
    .md-bg-primary {
        background-color: var(--color-primary);
    }

    .md-text-primary {
        color: var(--color-primary);
    }

    .md-border-primary {
        border-color: var(--color-primary);
    }
}

@media (min-width: 1024px) {
    .lg-bg-primary {
        background-color: var(--color-primary);
    }

    .lg-text-primary {
        color: var(--color-primary);
    }

    .lg-border-primary {
        border-color: var(--color-primary);
    }
}

/* ==========================================================================
   14. 实用颜色组合类
   ========================================================================== */

/* 卡片颜色组合 */
.card-primary {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-left: 4px solid var(--color-primary);
}

.card-success {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-left: 4px solid var(--color-success);
}

.card-warning {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-left: 4px solid var(--color-warning);
}

.card-error {
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-left: 4px solid var(--color-error);
}

/* 按钮颜色组合 */
.btn-color-primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.btn-color-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-color-success {
    background-color: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.btn-color-success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

/* 文本高亮 */
.highlight-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    padding: 0 var(--spacing-0-5);
    border-radius: var(--radius-sm);
}

.highlight-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    padding: 0 var(--spacing-0-5);
    border-radius: var(--radius-sm);
}

.highlight-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 0 var(--spacing-0-5);
    border-radius: var(--radius-sm);
}

.highlight-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    padding: 0 var(--spacing-0-5);
    border-radius: var(--radius-sm);
}