/* 動態生成的主題變數 CSS - 由 Flask 自動生成 */
:root {
    --primary-color: #f6d5e5;
    --secondary-color: #6c757d;
    --accent-color: #f7ae73;
    --background-color: #ffffff;
    --text-color: #212529;
    --hero-bg-color: #f8f9fa;
    --card-bg-color: #ffffff;
    --border-color: #dee2e6;
    --button-style: solid;
    --button-primary-color: #ffc7cd;
    --button-secondary-color: #f6eaea;
}

/* 全域樣式套用 */
body {
    background-color: var(--background-color);
    color: var(--text_color);
}

/* 按鈕樣式 */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
}

/* 主要按鈕 - 使用獨立的按鈕顏色 */
.btn-modern {
    background: #ffc7cd !important;
}

.btn-modern:hover {
    background: color-mix(in srgb, #ffc7cd 85%, black) !important;
}

/* 次要按鈕（outline） - 使用獨立的次要按鈕顏色 */
.btn-modern.btn-outline {
    color: #f6eaea !important;
    border-color: #f6eaea !important;
}

.btn-modern.btn-outline:hover {
    background: color-mix(in srgb, #f6eaea 10%, transparent) !important;
    color: #f6eaea !important;
    border-color: #f6eaea !important;
}

/* Hero 區塊 */
.hero {
    background: var(--primary-color);
}

/* 卡片樣式 */
.card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}