/* ============================================================
 * Design Tokens — 全站共用 CSS variables
 * 用法：base.html 引入後，所有頁面用 var(--token-name)
 *
 * 為什麼：之前各 CSS 把色彩/間距/陰影 hardcode 散落各處，
 * 改色要 grep 跑 10 個檔案。集中後改一個 token = 全站連動。
 * ============================================================ */

:root {
    /* ----- 主色與品牌 ----- */
    --color-primary:        #0056b3;
    --color-primary-hover:  #004494;
    --color-primary-soft:   #e7f1ff;

    /* ----- 語意色 ----- */
    --color-success:        #28a745;
    --color-success-soft:   #d4edda;
    --color-success-text:   #155724;

    --color-warning:        #f59e0b;
    --color-warning-soft:   #fff3cd;
    --color-warning-text:   #856404;

    --color-danger:         #dc3545;
    --color-danger-soft:    #f8d7da;
    --color-danger-text:    #721c24;

    --color-info:           #0dcaf0;
    --color-info-soft:      #d1ecf1;
    --color-info-text:      #0c5460;

    /* ----- 中性色（灰階） ----- */
    --color-bg:             #f4f4f9;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f8f9fa;
    --color-border:         #dee2e6;
    --color-border-strong:  #ced4da;

    --color-text:           #1f2937;   /* 主文字 */
    --color-text-muted:     #6c757d;
    --color-text-dim:       #adb5bd;

    /* ----- 排版 ----- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* ----- 間距 (8px 規則) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* ----- 圓角 ----- */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* ----- 陰影 ----- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.10);

    /* ----- 過渡動畫 ----- */
    --transition-fast: 120ms ease;
    --transition:      200ms ease;

    /* ----- z-index 層級 ----- */
    --z-navbar:   1100;
    --z-dropdown: 1200;
    --z-modal:    1300;
    --z-tooltip:  1400;
}

/* ============================================================
 * 共用 utility classes（兩頁都會用）
 * ============================================================ */

/* 按鈕：semantic variants，hover 不改 transform 避免 layout shift */
.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
    color: #fff;
    white-space: nowrap;
}
.btn-primary  { background-color: var(--color-primary); }
.btn-primary:hover  { background-color: var(--color-primary-hover); }
.btn-secondary { background-color: var(--color-text-muted); }
.btn-secondary:hover { background-color: #495057; }
.btn-success  { background-color: var(--color-success); }
.btn-success:hover  { background-color: #1f7e34; }
.btn-info     { background-color: var(--color-info-text); }
.btn-info:hover     { background-color: #0a4651; }
.btn-warning  { background-color: var(--color-warning); color: #1f2937; }
.btn-warning:hover  { background-color: #d97706; }
.btn-danger   { background-color: var(--color-danger); }
.btn-danger:hover   { background-color: #b02a37; }

button:disabled,
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 卡片：白底 + 細邊 + soft shadow（取代散落各處的 box-shadow inline） */
.surface-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-5);
}

/* 狀態 badge（取代舊的 inline 著色） */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
}
.badge-success { background: var(--color-success-soft); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info-text); }
.badge-neutral { background: var(--color-surface-alt);  color: var(--color-text-muted); border: 1px solid var(--color-border); }