:root {
    --theme-color: #6a0572; /* 深紫色，作为品牌主色，神秘而高雅 */
    --primary-color: #a43a8f; /* 柔和的紫红色，用于按钮和重要元素，吸引眼球 */
    --primary-light: #d18dcd; /* 浅紫罗兰色，用于高亮或次要强调 */
    --secondary-color: #00bcd4; /* 亮蓝色，作为辅助色，提供清新对比 */
    --primary-dark: #1a001a; /* 极深的紫色，用于深色背景或文字 */
    --font-color: #f0f0f0; /* 浅灰色，用于正文，提供良好可读性 */
    --bg-color: #2c003c; /* 深紫黑色，作为主要背景色，营造沉稳氛围 */
    --heading-color: #ffffff; /* 纯白色，用于标题，突出显示 */
    --footer-color: #12001a; /* 比主背景更深的紫色，用于页脚 */
    --footer-cpy-color: #08000d; /* 页脚版权信息的背景色 */
    --border-color: rgba(255, 255, 255, 0.15); /* 略微透明的浅色边框 */
    --border-color-light: rgba(255, 255, 255, 0.1); /* 更浅的透明边框 */
    --iframe-filter: none; /* 移除iframe滤镜，显示原始色彩 */
    --bg-grey: #20002b; /* 略浅的深灰色，用于次要背景区域 */
    --bg-light: #280036; /* 较浅的深紫色，用于需要区分的背景块 */
    --bg-dark-color: #3b004d; /* 更深的紫色，用于特殊背景区域或卡片 */
    --quote-text-color: #e0e0e0; /* 浅灰色，用于引用文字 */
    --icon-gra-color: #ffffff; /* 纯白色，用于图标 */
    --shadow-color: rgba(50, 0, 70, 0.3); /* 带有紫色调的阴影，增加层次感 */
}