/**
 * Blink 瞬睫管家 - 功能漸層色系統
 *
 * 用途：Dashboard 大按鈕、功能區塊的多彩漸層色
 * 這些顏色用於區分不同功能，不受品牌色影響
 *
 * 使用方式：
 * <a class="big-btn btn-gradient-blue">...</a>
 * <a class="big-btn btn-gradient-teal">...</a>
 *
 * 支援亮色/暗色模式自動切換
 */

/* ═══════════════════════════════════════════════════════════════
   PART 1: 功能漸層色變數定義 - 亮色模式
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────
       1.1 藍色系 (Blue) - 資訊、一般功能
       ───────────────────────────────────────── */
    --gradient-blue-start: #3b82f6;
    --gradient-blue-end: #1d4ed8;
    --gradient-blue: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%);

    /* ─────────────────────────────────────────
       1.2 青綠色系 (Teal/Cyan) - 客戶相關
       ───────────────────────────────────────── */
    --gradient-teal-start: #14b8a6;
    --gradient-teal-end: #0d9488;
    --gradient-teal: linear-gradient(135deg, var(--gradient-teal-start) 0%, var(--gradient-teal-end) 100%);

    --gradient-cyan-start: #06b6d4;
    --gradient-cyan-end: #0891b2;
    --gradient-cyan: linear-gradient(135deg, var(--gradient-cyan-start) 0%, var(--gradient-cyan-end) 100%);

    /* ─────────────────────────────────────────
       1.3 綠色系 (Green) - 成功、新增
       ───────────────────────────────────────── */
    --gradient-green-start: #22c55e;
    --gradient-green-end: #16a34a;
    --gradient-green: linear-gradient(135deg, var(--gradient-green-start) 0%, var(--gradient-green-end) 100%);

    --gradient-emerald-start: #10b981;
    --gradient-emerald-end: #059669;
    --gradient-emerald: linear-gradient(135deg, var(--gradient-emerald-start) 0%, var(--gradient-emerald-end) 100%);

    /* ─────────────────────────────────────────
       1.4 黃橘色系 (Amber/Orange) - VIP、重要
       ───────────────────────────────────────── */
    --gradient-amber-start: #f59e0b;
    --gradient-amber-end: #d97706;
    --gradient-amber: linear-gradient(135deg, var(--gradient-amber-start) 0%, var(--gradient-amber-end) 100%);

    --gradient-orange-start: #f97316;
    --gradient-orange-end: #ea580c;
    --gradient-orange: linear-gradient(135deg, var(--gradient-orange-start) 0%, var(--gradient-orange-end) 100%);

    /* ─────────────────────────────────────────
       1.5 紫色系 (Purple/Violet) - 收據、財務
       ───────────────────────────────────────── */
    --gradient-purple-start: #8b5cf6;
    --gradient-purple-end: #7c3aed;
    --gradient-purple: linear-gradient(135deg, var(--gradient-purple-start) 0%, var(--gradient-purple-end) 100%);

    --gradient-violet-start: #a855f7;
    --gradient-violet-end: #9333ea;
    --gradient-violet: linear-gradient(135deg, var(--gradient-violet-start) 0%, var(--gradient-violet-end) 100%);

    /* ─────────────────────────────────────────
       1.6 粉紅色系 (Pink/Rose) - 銷售、產品
       ───────────────────────────────────────── */
    --gradient-pink-start: #ec4899;
    --gradient-pink-end: #db2777;
    --gradient-pink: linear-gradient(135deg, var(--gradient-pink-start) 0%, var(--gradient-pink-end) 100%);

    --gradient-rose-start: #f43f5e;
    --gradient-rose-end: #e11d48;
    --gradient-rose: linear-gradient(135deg, var(--gradient-rose-start) 0%, var(--gradient-rose-end) 100%);

    /* ─────────────────────────────────────────
       1.7 靛藍色系 (Indigo) - 報表、分析
       ───────────────────────────────────────── */
    --gradient-indigo-start: #6366f1;
    --gradient-indigo-end: #4f46e5;
    --gradient-indigo: linear-gradient(135deg, var(--gradient-indigo-start) 0%, var(--gradient-indigo-end) 100%);

    /* ─────────────────────────────────────────
       1.8 灰色系 (Slate) - 設定、系統
       ───────────────────────────────────────── */
    --gradient-slate-start: #64748b;
    --gradient-slate-end: #475569;
    --gradient-slate: linear-gradient(135deg, var(--gradient-slate-start) 0%, var(--gradient-slate-end) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   PART 2: 功能漸層色變數定義 - 暗色模式
   暗色模式下提高亮度和飽和度以保持視覺對比
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    /* 藍色系 - 略微提亮 */
    --gradient-blue-start: #60a5fa;
    --gradient-blue-end: #3b82f6;

    /* 青綠色系 */
    --gradient-teal-start: #2dd4bf;
    --gradient-teal-end: #14b8a6;
    --gradient-cyan-start: #22d3ee;
    --gradient-cyan-end: #06b6d4;

    /* 綠色系 */
    --gradient-green-start: #4ade80;
    --gradient-green-end: #22c55e;
    --gradient-emerald-start: #34d399;
    --gradient-emerald-end: #10b981;

    /* 黃橘色系 */
    --gradient-amber-start: #fbbf24;
    --gradient-amber-end: #f59e0b;
    --gradient-orange-start: #fb923c;
    --gradient-orange-end: #f97316;

    /* 紫色系 */
    --gradient-purple-start: #a78bfa;
    --gradient-purple-end: #8b5cf6;
    --gradient-violet-start: #c084fc;
    --gradient-violet-end: #a855f7;

    /* 粉紅色系 */
    --gradient-pink-start: #f472b6;
    --gradient-pink-end: #ec4899;
    --gradient-rose-start: #fb7185;
    --gradient-rose-end: #f43f5e;

    /* 靛藍色系 */
    --gradient-indigo-start: #818cf8;
    --gradient-indigo-end: #6366f1;

    /* 灰色系 - 暗色模式下略微提亮 */
    --gradient-slate-start: #94a3b8;
    --gradient-slate-end: #64748b;
}

/* ═══════════════════════════════════════════════════════════════
   PART 3: 漸層按鈕類別
   使用 btn-gradient-* 命名，避免與 btn-* 語義衝突
   ═══════════════════════════════════════════════════════════════ */

/* 基礎漸層按鈕樣式 */
.btn-gradient-blue,
.btn-gradient-teal,
.btn-gradient-cyan,
.btn-gradient-green,
.btn-gradient-emerald,
.btn-gradient-amber,
.btn-gradient-orange,
.btn-gradient-purple,
.btn-gradient-violet,
.btn-gradient-pink,
.btn-gradient-rose,
.btn-gradient-indigo,
.btn-gradient-slate {
    color: white;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 各顏色漸層 */
.btn-gradient-blue { background: var(--gradient-blue); }
.btn-gradient-teal { background: var(--gradient-teal); }
.btn-gradient-cyan { background: var(--gradient-cyan); }
.btn-gradient-green { background: var(--gradient-green); }
.btn-gradient-emerald { background: var(--gradient-emerald); }
.btn-gradient-amber { background: var(--gradient-amber); }
.btn-gradient-orange { background: var(--gradient-orange); }
.btn-gradient-purple { background: var(--gradient-purple); }
.btn-gradient-violet { background: var(--gradient-violet); }
.btn-gradient-pink { background: var(--gradient-pink); }
.btn-gradient-rose { background: var(--gradient-rose); }
.btn-gradient-indigo { background: var(--gradient-indigo); }
.btn-gradient-slate { background: var(--gradient-slate); }

/* ═══════════════════════════════════════════════════════════════
   PART 4: 向後相容 - 舊的 btn-* 類別映射
   讓現有的 .btn-info, .btn-purple 等繼續運作
   ═══════════════════════════════════════════════════════════════ */

/* Dashboard 大按鈕 - 使用漸層變數 */
.big-btn.btn-info {
    background: var(--gradient-blue);
    color: white;
}

.big-btn.btn-teal {
    background: var(--gradient-teal);
    color: white;
}

.big-btn.btn-success {
    background: var(--gradient-emerald);
    color: white;
}

.big-btn.btn-warning {
    background: var(--gradient-amber);
    color: white;
}

.big-btn.btn-orange {
    background: var(--gradient-orange);
    color: white;
}

.big-btn.btn-purple {
    background: var(--gradient-purple);
    color: white;
}

.big-btn.btn-pink {
    background: var(--gradient-pink);
    color: white;
}

.big-btn.btn-indigo {
    background: var(--gradient-indigo);
    color: white;
}

.big-btn.btn-slate {
    background: var(--gradient-slate);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════
   PART 5: Dashboard 功能按鈕預設配色表
   根據功能語義分配顏色，方便維護
   ═══════════════════════════════════════════════════════════════ */

/*
 * 建議的功能-顏色對應：
 *
 * 日常營運 (Daily Operations)
 * - 今日候客區: btn-gradient-blue (藍色 - 資訊/等待)
 * - 客戶服務:   btn-gradient-cyan (青色 - 服務)
 * - 新客建檔:   btn-gradient-green (綠色 - 新增)
 * - VIP 儲值:   btn-gradient-amber (黃橘 - 金錢/重要)
 * - VIP 收據:   btn-gradient-purple (紫色 - 收據/財務)
 *
 * 營運管理 (Operations Management)
 * - 服務項目:   btn-gradient-indigo (靛藍 - 項目)
 * - 服務記錄:   btn-gradient-teal (青綠 - 記錄)
 * - 產品管理:   btn-gradient-slate (灰色 - 庫存)
 * - 產品記錄:   btn-gradient-pink (粉紅 - 銷售)
 * - 營運報表:   btn-gradient-violet (紫色 - 分析)
 * - 員工管理:   btn-gradient-orange (橘色 - 人員)
 *
 * 系統設定 (System Settings)
 * - 各設定項:   btn-gradient-slate (灰色 - 設定)
 */