/* ==========================================================
   PQClean CSS Design Tokens
   v2.0 | 依據 visual-system.md
   ========================================================== */

:root {
    /* ── 品牌色系 ─────────────────────────────────────────── */
    --brand-primary:  #93c01f;
    --brand-dark:     #6d9116;
    --brand-darker:   #4a6210;
    --brand-light:    #a8d42f;
    --brand-lighter:  #c5e66a;
    --brand-bg:       #e8f5d0;

    /* 衍生樣式（由品牌色自動推導） */
    --brand-gradient:       linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
    --brand-gradient-hover: linear-gradient(135deg, var(--brand-dark), var(--brand-darker));
    --brand-shadow:         rgba(147, 192, 31, 0.4);

    /* 側邊欄漸層（終點色為手動計算，換色時需同步修改） */
    --sidebar-gradient: linear-gradient(180deg, var(--brand-darker) 0%, #3d5a0d 50%, #2d4408 100%);

    /* ── 功能色（語意色） ──────────────────────────────────── */
    --primary:       #2563eb;
    --primary-dark:  #1d4ed8;
    --primary-light: #3b82f6;

    --success:    #10b981;
    --success-bg: #d1fae5;

    --warning:    #f59e0b;
    --warning-bg: #fef3c7;

    --danger:     #ef4444;
    --danger-bg:  #fee2e2;

    --info:       #06b6d4;
    --info-bg:    #cffafe;

    /* ── 中性色 ───────────────────────────────────────────── */
    --dark:         #1e293b;
    --secondary:    #64748b;
    --muted:        #94a3b8;
    --light:        #f8fafc;
    --white:        #ffffff;
    --border:       #e2e8f0;
    --border-light: #f1f5f9;

    /* ── 字體系統 ─────────────────────────────────────────── */
    --font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 14px;
    --font-size-lg:   16px;
    --font-size-xl:   18px;
    --font-size-2xl:  24px;
    --font-size-3xl:  28px;

    /* ── 間距系統 ─────────────────────────────────────────── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ── 圓角系統 ─────────────────────────────────────────── */
    --card-radius:  12px;
    --btn-radius:   8px;
    --input-radius: 8px;

    /* ── 陰影系統 ─────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ── 動畫 ─────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ── 版面尺寸 ─────────────────────────────────────────── */
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 70px;
    --header-height:           60px;
    --notification-width:      420px;
}

/* ── Keyframe 動畫 ────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1); }
}