/* base.css - Global Reset, Variables & Base Styles (2026 科技玻璃態統一版) */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ────────────────────────────────────────────────
   主題變數 (最核心部分 - 改顏色就從這裡開始)
   ──────────────────────────────────────────────── */
:root {
    /* 主品牌色 - Indigo/Purple 科技風 (原 #6366f1 系列) */
    --color-primary:        #6366f1;
    --color-primary-dark:   #4f46e5;
    --color-primary-light:  #a5b4fc;
    --color-primary-accent: #8b5cf6;          /* 常用漸層第二色 */
    --color-primary-glow:   rgba(99, 102, 241, 0.40);
    --color-primary-glow-strong: rgba(99, 102, 241, 0.60);

    /* 功能色 */
    --color-success:        #10b981;
    --color-success-glow:   rgba(16, 185, 129, 0.40);
    --color-warning:        #f59e0b;
    --color-warning-glow:   rgba(245, 158, 11, 0.40);
    --color-danger:         #ef4444;
    --color-danger-glow:    rgba(239, 68, 68, 0.40);
    --color-info:           #0ea5e9;
    --color-info-glow:      rgba(14, 165, 233, 0.40);

    /* 中性色 / 背景 / 文字 */
    --color-bg:             #0a0f1a;
    --color-bg-gradient:    linear-gradient(135deg, #0a0f1a 0%, #111827 40%, #1e293b 100%);
    --color-card:           rgba(17, 24, 39, 0.75);
    --color-card-light:     rgba(30, 41, 59, 0.75);
    --color-border:         rgba(99, 102, 241, 0.25);
    --color-border-strong:  rgba(99, 102, 241, 0.40);
    --color-divider:        rgba(99, 102, 241, 0.15);
    --color-text:           #f1f5f9;
    --color-text-muted:     #94a3b8;
    --color-text-light:     #cbd5e1;
    --color-text-inverse:   #0f172a;

    /* 圓角、陰影、過渡、動畫 */
    --border-radius:        12px;
    --border-radius-md:     16px;
    --border-radius-lg:     20px;
    --shadow-sm:            0 4px 10px rgba(0,0,0,0.3);
    --shadow-md:            0 10px 25px rgba(0,0,0,0.45);
    --shadow-lg:            0 20px 50px rgba(0,0,0,0.6);
    --shadow-glow:          0 0 30px var(--color-primary-glow);
    --shadow-glow-strong:   0 0 50px var(--color-primary-glow-strong);
    --transition:           all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:      all 0.2s ease;
}

/* ────────────────────────────────────────────────
   全局基礎樣式
   ──────────────────────────────────────────────── */

body {
    background: var(--color-bg-gradient);
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
a:focus {
    color: var(--color-primary-light);
    text-shadow: 0 0 8px var(--color-primary-glow);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 標題 - 支援漸層文字效果 */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

/* 常用漸層文字類別（dashboard-title 等常用） */
.text-gradient {
    background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary-accent), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 發光文字效果（常用在 hover 或重點文字） */
.glow-text {
    text-shadow: 0 0 10px var(--color-primary-glow-strong);
}

.glow-text:hover {
    text-shadow: 0 0 20px var(--color-primary-glow-strong);
}

/* 小工具類 - 常用在 meta / label */
.text-muted   { color: var(--color-text-muted) !important; }
.text-light   { color: var(--color-text-light) !important; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* 玻璃態背景快速類（components 會繼承，但有時直接用） */
.glass {
    background: var(--color-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

/* 響應式輔助 */
@media (max-width: 1024px) {
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.9rem; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.0rem; }
    h2 { font-size: 1.7rem; }
}