@font-face {
    font-family: "a";
    /* Chinese Font */
    font-display: swap;
    src: local("PingFang SC"), local("Microsoft YaHei"), sans-serif;
}

@font-face {
    font-family: "b";
    /* English Font */
    src: url(../fonts/Ubuntu-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: "title";
    /* Title Font */
    src: url(../fonts/Pacifico-Regular.ttf);
    font-display: swap;
}

:root {
    /* Common Variables */
    --transition-speed: 0.3s;
    --border-radius-lg: 16px;
    --border-radius-md: 12px;
    --border-radius-sm: 8px;
    
    /* Default (Light) Theme */
    --main-bg-color: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --main-text-color: #333333;
    --secondary-text-color: #555555;
    --accent-color: #747bff;
    
    --card-bg-color: rgba(255, 255, 255, 0.65);
    --card-border-color: rgba(255, 255, 255, 0.4);
    --card-hover-bg-color: rgba(255, 255, 255, 0.85);
    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    
    --sidebar-bg-color: rgba(255, 255, 255, 0.5);
    --tag-bg-color: rgba(255, 255, 255, 0.7);
    
    --gradient-text: linear-gradient(120deg, #bd34fe, #41d1ff);
    --glass-blur: 12px;
    
    --fill-color: #333333;
    --scrollbar-track: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
}

html[data-theme="Dark"] {
    /* Dark Theme */
    --main-bg-color: linear-gradient(135deg, #1a1c20 0%, #0f1012 100%);
    --main-text-color: #e0e0e0;
    --secondary-text-color: #a0a0a0;
    --accent-color: #9096ff;
    
    --card-bg-color: rgba(30, 32, 36, 0.7);
    --card-border-color: rgba(255, 255, 255, 0.08);
    --card-hover-bg-color: rgba(40, 42, 48, 0.85);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    
    --sidebar-bg-color: rgba(20, 22, 26, 0.6);
    --tag-bg-color: rgba(255, 255, 255, 0.1);
    
    --gradient-text: linear-gradient(120deg, #d279ff, #6ecfff);
    
    --fill-color: #e0e0e0;
    --scrollbar-track: rgba(0, 0, 0, 0.3);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
}