/**
 * ToolsKit 主题系统 - CSS变量配置
 * 支持5个主题: Light, Dark, Ocean, Sunset, Forest
 */

/* ========== 1. Light Theme (浅色主题 - 默认) ========== */
html[data-theme="light"] {
    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-hover: #e9ecef;

    /* 文字色 */
    --text-primary: #212529;
    --text-secondary: #6c757d;

    /* 强调色 */
    --accent: #007bff;
    --accent-hover: #0056b3;

    /* 边框色 */
    --border: #dee2e6;

    /* 卡片阴影 */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
}

/* ========== 2. Dark Theme (深色主题) ========== */
html[data-theme="dark"] {
    /* 背景色 */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-hover: #404040;

    /* 文字色 */
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;

    /* 强调色 */
    --accent: #4dabf7;
    --accent-hover: #74c0fc;

    /* 边框色 */
    --border: #495057;

    /* 卡片阴影 */
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
}

/* ========== 3. Ocean Theme (海洋主题) ========== */
html[data-theme="ocean"] {
    /* 背景色 */
    --bg-primary: #e7f5ff;
    --bg-secondary: #d0ebff;
    --bg-hover: #a5d8ff;

    /* 文字色 */
    --text-primary: #1e3a5f;
    --text-secondary: #364fc7;

    /* 强调色 */
    --accent: #1971c2;
    --accent-hover: #1864ab;

    /* 边框色 */
    --border: #74c0fc;

    /* 卡片阴影 */
    --shadow: rgba(25, 113, 194, 0.15);
    --shadow-hover: rgba(25, 113, 194, 0.25);
}

/* ========== 4. Sunset Theme (日落主题) ========== */
html[data-theme="sunset"] {
    /* 背景色 */
    --bg-primary: #fff4e6;
    --bg-secondary: #ffe8cc;
    --bg-hover: #ffd8a8;

    /* 文字色 */
    --text-primary: #862e1e;
    --text-secondary: #c2410c;

    /* 强调色 */
    --accent: #f76707;
    --accent-hover: #d9480f;

    /* 边框色 */
    --border: #ffc078;

    /* 卡片阴影 */
    --shadow: rgba(247, 103, 7, 0.15);
    --shadow-hover: rgba(247, 103, 7, 0.25);
}

/* ========== 5. Forest Theme (森林主题) ========== */
html[data-theme="forest"] {
    /* 背景色 */
    --bg-primary: #ebfbee;
    --bg-secondary: #d3f9d8;
    --bg-hover: #b2f2bb;

    /* 文字色 */
    --text-primary: #2b8a3e;
    --text-secondary: #2f9e44;

    /* 强调色 */
    --accent: #37b24d;
    --accent-hover: #2f9e44;

    /* 边框色 */
    --border: #8ce99a;

    /* 卡片阴影 */
    --shadow: rgba(55, 178, 77, 0.15);
    --shadow-hover: rgba(55, 178, 77, 0.25);
}

/* ========== 通用样式 ========== */

/* 平滑过渡效果 */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 卡片样式 */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 16px var(--shadow-hover);
    transform: translateY(-2px);
}

/* 按钮样式 */
.btn-primary {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

/* 输入框样式 */
.input {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    outline: none;
    transition: all 0.3s ease;
}

.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* 链接样式 */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
}

/* 滚动条样式 (仅Webkit浏览器) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* 选中文本样式 */
::selection {
    background-color: var(--accent);
    color: white;
}

/* 代码块样式 */
code, pre {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    font-family: 'Courier New', monospace;
}

pre {
    padding: 1rem;
    overflow-x: auto;
}

/* 工具卡片动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tool-card {
    animation: fadeInUp 0.5s ease forwards;
}

/* 响应式字体大小 */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}