* - 學生端：

* * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@layer */ /* ═══════════════════════════════════════════════════════════════════════════ Layer 1: Primitives（原始值） - 調色盤：完整色階 - 基礎數值：間距、圓角、陰影等原始值 ═══════════════════════════════════════════════════════════════════════════ */ @layer primitives { :root { /* ─── 調色盤：棕色系（教師端品牌色）─── */ --palette-brown-50: #fef6f3; --palette-brown-100: #fff5f2; --palette-brown-200: #ffe8e0; --palette-brown-300: #ffd4c4; --palette-brown-400: #c44b00; --palette-brown-500: #a63500; --palette-brown-600: #892b00; --palette-brown-700: #6b2200; --palette-brown-800: #4a1800; --palette-brown-900: #2d0f00; /* ─── 調色盤：海軍藍系（學生端品牌色）─── */ --palette-navy-50: #f0f4f8; --palette-navy-100: #e2e8f0; --palette-navy-200: #c5d1e0; --palette-navy-300: #94a3b8; --palette-navy-400: #3d5a7f; --palette-navy-500: #2d4a6f; --palette-navy-600: #1e3a5f; --palette-navy-700: #16304d; --palette-navy-800: #0f2439; --palette-navy-900: #0a1628; /* ─── 調色盤：靛色系（官網品牌色）─── */ --palette-indigo-50: #eef2ff; --palette-indigo-100: #e0e7ff; --palette-indigo-200: #c7d2fe; --palette-indigo-300: #a5b4fc; --palette-indigo-400: #818cf8; --palette-indigo-500: #6366f1; --palette-indigo-600: #4f46e5; --palette-indigo-700: #4338ca; --palette-indigo-800: #3730a3; --palette-indigo-900: #312e81; /* ─── 調色盤：橙色系（強調色）─── */ --palette-orange-50: #fff7ed; --palette-orange-100: #ffedd5; --palette-orange-200: #fed7aa; --palette-orange-300: #fdba74; --palette-orange-400: #fb923c; --palette-orange-500: #f97316; --palette-orange-600: #ea580c; --palette-orange-700: #c2410c; --palette-orange-800: #9a3412; --palette-orange-900: #7c2d12; /* ─── 調色盤：綠色系（成功色）─── */ --palette-green-50: #ecfdf5; --palette-green-100: #d1fae5; --palette-green-200: #a7f3d0; --palette-green-300: #6ee7b7; --palette-green-400: #34d399; --palette-green-500: #10b981; --palette-green-600: #059669; --palette-green-700: #047857; --palette-green-800: #065f46; --palette-green-900: #064e3b; /* ─── 調色盤：紅色系（危險色）─── */ --palette-red-50: #fef2f2; --palette-red-100: #fee2e2; --palette-red-200: #fecaca; --palette-red-300: #fca5a5; --palette-red-400: #f87171; --palette-red-500: #ef4444; --palette-red-600: #dc2626; --palette-red-700: #b91c1c; --palette-red-800: #991b1b; --palette-red-900: #7f1d1d; /* ─── 調色盤：黃色系（警告色）─── */ --palette-yellow-50: #fffbeb; --palette-yellow-100: #fef3c7; --palette-yellow-200: #fde68a; --palette-yellow-300: #fcd34d; --palette-yellow-400: #fbbf24; --palette-yellow-500: #f59e0b; --palette-yellow-600: #d97706; --palette-yellow-700: #b45309; --palette-yellow-800: #92400e; --palette-yellow-900: #78350f; /* ─── 調色盤：青色系（資訊色）─── */ --palette-cyan-50: #ecfeff; --palette-cyan-100: #cffafe; --palette-cyan-200: #a5f3fc; --palette-cyan-300: #67e8f9; --palette-cyan-400: #22d3ee; --palette-cyan-500: #06b6d4; --palette-cyan-600: #0891b2; --palette-cyan-700: #0e7490; --palette-cyan-800: #155e75; --palette-cyan-900: #164e63; /* ─── 調色盤：紫色系（自訂色）─── */ --palette-purple-50: #faf5ff; --palette-purple-100: #f3e8ff; --palette-purple-200: #e9d5ff; --palette-purple-300: #d8b4fe; --palette-purple-400: #c084fc; --palette-purple-500: #a855f7; --palette-purple-600: #9333ea; --palette-purple-700: #7c3aed; --palette-purple-800: #6b21a8; --palette-purple-900: #581c87; /* ─── 調色盤：灰色系（中性色）─── */ --palette-gray-0: #ffffff; --palette-gray-50: #f8fafc; --palette-gray-100: #f1f5f9; --palette-gray-200: #e2e8f0; --palette-gray-300: #cbd5e1; --palette-gray-400: #94a3b8; --palette-gray-500: #64748b; --palette-gray-600: #475569; --palette-gray-700: #334155; --palette-gray-800: #1e293b; --palette-gray-900: #0f172a; --palette-gray-950: #020617; /* ─── 間距比例 ─── */ --spacing-0: 0; --spacing-px: 1px; --spacing-0-5: 0.125rem; --spacing-1: 0.25rem; --spacing-1-5: 0.375rem; --spacing-2: 0.5rem; --spacing-2-5: 0.625rem; --spacing-3: 0.75rem; --spacing-3-5: 0.875rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-9: 2.25rem; --spacing-10: 2.5rem; --spacing-11: 2.75rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-32: 8rem; /* ─── 圓角 ─── */ --radius-none: 0; --radius-sm: 0.125rem; --radius-base: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* ─── 陰影 ─── */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-none: 0 0 #0000; /* ─── 動畫時間 ─── */ --duration-instant: 0ms; --duration-micro: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-moderate: 300ms; --duration-slow: 400ms; --duration-slower: 500ms; --duration-slowest: 700ms; /* ─── 緩動函數 ─── */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce-subtle: cubic-bezier(0.34, 1.3, 0.64, 1); /* 微妙彈跳，官網動效用 */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* ─── 字體 ─── */ --font-sans: system-ui, -apple-system, 'Segoe UI', 'Microsoft JhengHei', 'PingFang TC', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace; --font-serif: Georgia, 'Times New Roman', 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; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; /* ─── 字重 ─── */ --font-thin: 100; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ─── 行高 ─── */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ─── Z-index 層級 ─── */ --z-below: -1; --z-base: 0; --z-elevated: 10; --z-sticky: 100; --z-dropdown: 1000; --z-overlay: 1100; --z-modal: 1200; --z-popover: 1300; --z-tooltip: 1400; --z-toast: 1500; /* ─── 玻璃態效果 ─── */ --glass-blur-sm: blur(8px); --glass-blur-md: blur(16px); --glass-blur-lg: blur(24px); --glass-blur-xl: blur(40px); --glass-saturate: saturate(180%); } } /* ═══════════════════════════════════════════════════════════════════════════ Layer 2: Semantic（語義化） - 用途明確的變數，引用原始值 - 預設為官網風格 ═══════════════════════════════════════════════════════════════════════════ */ @layer semantic { :root { /* ─── 品牌色（預設：官網靛色）─── */ --color-primary: var(--palette-indigo-600); --color-primary-hover: var(--palette-indigo-700); --color-primary-active: var(--palette-indigo-800); --color-primary-light: var(--palette-indigo-100); --color-primary-subtle: var(--palette-indigo-50); /* ─── 強調色（通用橙色）─── */ --color-accent: var(--palette-orange-500); --color-accent-hover: var(--palette-orange-600); --color-accent-light: var(--palette-orange-400); --color-accent-subtle: var(--palette-orange-50); /* ─── 狀態色 ─── */ --color-success: var(--palette-green-500); --color-success-hover: var(--palette-green-600); --color-success-subtle: var(--palette-green-50); --color-warning: var(--palette-yellow-500); --color-warning-hover: var(--palette-yellow-600); --color-warning-subtle: var(--palette-yellow-50); --color-danger: var(--palette-red-500); --color-danger-hover: var(--palette-red-600); --color-danger-subtle: var(--palette-red-50); --color-info: var(--palette-cyan-500); --color-info-hover: var(--palette-cyan-600); --color-info-subtle: var(--palette-cyan-50); /* ─── 中性色 ─── */ --color-white: var(--palette-gray-0); --color-black: var(--palette-gray-950); --color-gray-50: var(--palette-gray-50); --color-gray-100: var(--palette-gray-100); --color-gray-200: var(--palette-gray-200); --color-gray-300: var(--palette-gray-300); --color-gray-400: var(--palette-gray-400); --color-gray-500: var(--palette-gray-500); --color-gray-600: var(--palette-gray-600); --color-gray-700: var(--palette-gray-700); --color-gray-800: var(--palette-gray-800); --color-gray-900: var(--palette-gray-900); /* ─── 背景色 ─── */ --color-bg: var(--palette-gray-0); --color-bg-subtle: var(--palette-gray-50); --color-bg-muted: var(--palette-gray-100); --color-bg-overlay: rgb(0 0 0 / 0.5); /* ─── 文字色 ─── */ --color-text: var(--palette-gray-900); --color-text-secondary: var(--palette-gray-700); --color-text-muted: var(--palette-gray-500); --color-text-disabled: var(--palette-gray-400); --color-text-inverse: var(--palette-gray-0); /* ─── 邊框色 ─── */ --color-border: var(--palette-gray-200); --color-border-muted: var(--palette-gray-100); --color-border-strong: var(--palette-gray-300); /* ─── 連結色 ─── */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); /* ─── 漸層 ─── */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-hover) 100%); /* ─── 玻璃態 ─── */ --glass-bg: rgb(255 255 255 / 0.52); --glass-bg-subtle: rgb(255 255 255 / 0.35); --glass-bg-medium: rgb(255 255 255 / 0.58); --glass-bg-strong: rgb(255 255 255 / 0.75); --glass-border: rgb(255 255 255 / 0.35); --glass-border-strong: rgb(255 255 255 / 0.5); --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.02), 0 4px 16px rgb(0 0 0 / 0.04), inset 0 1px 0 rgb(255 255 255 / 0.5); --glass-shadow-hover: 0 4px 12px rgb(0 0 0 / 0.06), 0 12px 40px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.6); /* ─── 元件尺寸 ─── */ --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 48px; /* ─── 佈局 ─── */ --navbar-height: 64px; --sidebar-width: 280px; --sidebar-collapsed-width: 60px; --container-max: 1280px; /* ─── 過渡效果 ─── */ --transition-colors: color var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out); --transition-transform: transform var(--duration-normal) var(--ease-in-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out); --transition-opacity: opacity var(--duration-normal) var(--ease-in-out); --transition-all: all var(--duration-normal) var(--ease-in-out); /* ─── 彩色陰影 ─── */ --shadow-primary: 0 10px 40px -10px var(--color-primary); --shadow-accent: 0 10px 40px -10px var(--color-accent); --shadow-glow-primary: 0 0 30px rgb(79 70 229 / 0.25); --shadow-glow-accent: 0 0 30px rgb(249 115 22 / 0.25); } } /* ═══════════════════════════════════════════════════════════════════════════ Layer 3: Themes（主題） - 透過 data-theme 屬性切換 - 只覆蓋需要變更的語義化變數 - 注意：不要在 themes 層重複定義 :root，避免覆蓋子元素的主題 ═══════════════════════════════════════════════════════════════════════════ */ /* * 主題定義放在層外，確保優先級高於層內的預設值 * 這樣 [data-theme] 設置在子元素時也能正確覆蓋 */ /* ─── 官網主題（與預設值相同，用於明確指定主題）─── */ [data-theme="homepage"] { --color-primary: var(--palette-indigo-600); --color-primary-hover: var(--palette-indigo-700); --color-primary-active: var(--palette-indigo-800); --color-primary-light: var(--palette-indigo-100); --color-primary-subtle: var(--palette-indigo-50); --gradient-primary: linear-gradient(135deg, var(--palette-indigo-600) 0%, var(--palette-indigo-700) 100%); --shadow-primary: 0 10px 40px -10px rgb(79 70 229 / 0.3); --shadow-glow-primary: 0 0 30px rgb(79 70 229 / 0.25); } /* ─── 教師端主題（棕色）─── */ [data-theme="teacher"] { --color-primary: var(--palette-brown-600); --color-primary-hover: var(--palette-brown-700); --color-primary-active: var(--palette-brown-800); --color-primary-light: var(--palette-brown-100); --color-primary-subtle: var(--palette-brown-50); --gradient-primary: linear-gradient(135deg, var(--palette-brown-600) 0%, var(--palette-brown-400) 100%); --shadow-primary: 0 10px 40px -10px rgb(137 43 0 / 0.3); --shadow-glow-primary: 0 0 30px rgb(137 43 0 / 0.25); } /* ─── 學生端主題（海軍藍）─── */ [data-theme="student"] { --color-primary: var(--palette-navy-600); --color-primary-hover: var(--palette-navy-700); --color-primary-active: var(--palette-navy-800); --color-primary-light: var(--palette-navy-100); --color-primary-subtle: var(--palette-navy-50); --gradient-primary: linear-gradient(135deg, var(--palette-navy-600) 0%, var(--palette-navy-500) 100%); --shadow-primary: 0 10px 40px -10px rgb(30 58 95 / 0.3); --shadow-glow-primary: 0 0 30px rgb(30 58 95 / 0.25); } /* ═══════════════════════════════════════════════════════════════════════════ 無障礙支援 ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-contrast: high) { :root { --glass-bg: rgb(255 255 255 / 0.95); --glass-border: rgb(0 0 0 / 0.3); } } @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: rgb(255 255 255 / 0.98); --glass-bg-strong: rgb(255 255 255 / 1); --glass-blur-sm: blur(0); --glass-blur-md: blur(0); --glass-blur-lg: blur(0); --glass-blur-xl: blur(0); } } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-micro: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-moderate: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; } } /* ═══ 內聯結束 ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ 官網專案特有變數 ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── 官網品牌色別名（相容舊版）─── */ --primary-color: var(--color-primary); --primary-dark: var(--color-primary-hover); --primary-light: var(--color-primary-light); /* 修正：使用語義化變數 */ --primary-50: var(--palette-indigo-50); --primary-100: var(--palette-indigo-100); --primary-200: var(--palette-indigo-200); --primary-300: var(--palette-indigo-300); --primary-400: var(--palette-indigo-400); --primary-500: var(--palette-indigo-500); --primary-600: var(--palette-indigo-600); --primary-700: var(--palette-indigo-700); --primary-800: var(--palette-indigo-800); --primary-900: var(--palette-indigo-900); /* ─── 強調色別名 ─── */ --accent-color: var(--color-accent); --accent-light: var(--color-accent-light); --accent-dark: var(--color-accent-hover); /* ─── 次要色（成功色）─── */ --secondary-color: var(--color-success); --secondary-light: var(--palette-green-400); --secondary-dark: var(--color-success-hover); /* ─── 灰色系別名（相容 slate 命名）─── */ --slate-50: var(--palette-gray-50); --slate-100: var(--palette-gray-100); --slate-200: var(--palette-gray-200); --slate-300: var(--palette-gray-300); --slate-400: var(--palette-gray-400); --slate-500: var(--palette-gray-500); --slate-600: var(--palette-gray-600); --slate-700: var(--palette-gray-700); --slate-800: var(--palette-gray-800); --slate-900: var(--palette-gray-900); /* ─── 文字色別名 ─── */ --text-color: var(--color-text); --text-secondary: var(--color-text-secondary); --text-light: var(--color-text-muted); --text-muted: var(--color-text-disabled); /* ─── 背景色別名 ─── */ --bg-color: var(--color-bg); --bg-light: var(--color-bg-subtle); --bg-subtle: var(--color-bg-muted); /* ─── 邊框色別名 ─── */ --border-color: var(--color-border); --border-light: var(--color-border-muted); /* ─── 官網漸層系統 ─── */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-primary-btn: linear-gradient(135deg, var(--palette-indigo-500) 0%, var(--palette-indigo-600) 100%); --gradient-primary-btn-hover: linear-gradient(135deg, var(--palette-indigo-400) 0%, var(--palette-indigo-500) 100%); --gradient-yellow-btn: linear-gradient(135deg, var(--palette-yellow-500) 0%, var(--palette-yellow-600) 100%); --gradient-yellow-btn-hover: linear-gradient(135deg, var(--palette-yellow-400) 0%, var(--palette-yellow-500) 100%); --gradient-blue-btn: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --gradient-blue-btn-hover: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); --gradient-hot: linear-gradient(135deg, var(--palette-orange-500) 0%, var(--palette-red-500) 100%); --gradient-dark: linear-gradient(135deg, var(--palette-gray-900) 0%, var(--palette-gray-600) 100%); /* ─── 間距別名（相容 space 命名）─── */ --space-1: var(--spacing-1); --space-2: var(--spacing-2); --space-3: var(--spacing-3); --space-4: var(--spacing-4); --space-5: var(--spacing-5); --space-6: var(--spacing-6); --space-8: var(--spacing-8); --space-10: var(--spacing-10); --space-12: var(--spacing-12); --space-16: var(--spacing-16); --space-20: var(--spacing-20); --space-24: var(--spacing-24); --section-padding: var(--spacing-12); /* ─── 官網陰影擴展 ─── */ --shadow-primary: 0 10px 40px -10px rgb(79 70 229 / 0.3); --shadow-accent: 0 10px 40px -10px rgb(249 115 22 / 0.3); --shadow-card-float: 0 20px 60px -15px rgb(79 70 229 / 0.2); --shadow-glow-primary: 0 0 30px rgb(79 70 229 / 0.25); --shadow-glow-accent: 0 0 30px rgb(249 115 22 / 0.25); /* ─── 官網玻璃態擴展 ─── */ --glass-bg-level-1: rgb(255 255 255 / 0.38); --glass-bg-level-2: rgb(255 255 255 / 0.55); --glass-bg-level-3: rgb(255 255 255 / 0.75); --glass-bg-nav: linear-gradient(180deg, rgb(255 255 255 / 0.38) 0%, rgb(255 255 255 / 0.32) 100%); --glass-bg-nav-scrolled: linear-gradient(180deg, rgb(255 255 255 / 0.48) 0%, rgb(255 255 255 / 0.42) 100%); --glass-border-subtle: rgb(255 255 255 / 0.2); --glass-blur: var(--glass-blur-lg) var(--glass-saturate); --glass-blur-sm: var(--glass-blur-md) saturate(160%); --glass-blur-md: blur(28px) saturate(185%); --glass-blur-lg: var(--glass-blur-xl) saturate(200%); --glass-shadow-nav: 0 1px 2px rgb(0 0 0 / 0.02), 0 4px 16px rgb(0 0 0 / 0.03), inset 0 1px 0 rgb(255 255 255 / 0.5); --glass-shadow-nav-scrolled: 0 1px 3px rgb(0 0 0 / 0.04), 0 8px 32px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.6); /* ─── 裝飾性模糊 ─── */ --blur-decorative-md: 60px; --blur-decorative-lg: 80px; --blur-decorative-xl: 100px; /* ─── 字體別名 ─── */ --font-body: var(--font-sans); --font-display: var(--font-sans); /* ─── 響應式字體大小 ─── */ --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem); --text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem); --text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1rem); --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-xl: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); --text-2xl: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem); --text-3xl: clamp(1.6rem, 1.3rem + 0.8vw, 1.875rem); --text-4xl: clamp(2rem, 1.5rem + 1.2vw, 2.25rem); --text-5xl: clamp(2.5rem, 1.8rem + 1.8vw, 3rem); --text-6xl: clamp(3rem, 2rem + 2.5vw, 3.75rem); /* ─── Z-index 別名（相容舊版）─── */ /* 注意：--z-modal 和 --z-toast 使用核心定義的值（1200、1500） */ /* 若需要更高層級，請使用專用變數如 --z-modal-homepage */ --z-base: var(--z-below); --z-content: var(--z-elevated); --z-floating: var(--z-elevated); --z-navbar: var(--z-dropdown); --z-mobile-menu: var(--z-overlay); /* --z-modal 和 --z-toast 已在核心定義，不再覆蓋 */ /* ─── 佈局 ─── */ --nav-section-height: 48px; --container-padding: clamp(1rem, 5vw, 2rem); /* ─── 角色主題色 ─── */ --teacher-color: var(--palette-brown-600); --teacher-color-light: var(--palette-brown-500); --teacher-shadow: rgb(137 43 0 / 0.3); --teacher-hover-bg: rgb(137 43 0 / 0.06); --student-color: #002fa7; --student-color-light: #0040d6; --student-shadow: rgb(0 47 167 / 0.3); --student-hover-bg: rgb(0 47 167 / 0.06); /* ─── Footer 深色主題 ─── */ --footer-bg: #0c1222; --footer-bg-dark: #0a0f1a; --footer-text: var(--palette-gray-400); --footer-text-muted: var(--palette-gray-500); --footer-text-light: var(--palette-gray-200); --footer-border: rgb(255 255 255 / 0.06); /* ─── 關於頁面主題 ─── */ --about-primary: #2d5f7e; --about-primary-dark: #1a4058; --about-secondary: #f4a261; --about-accent: #e76f51; --about-light-bg: #faf8f5; --about-dark-text: #1a2930; --about-mid-text: #4a5568; --about-shadow-soft: 0 8px 30px rgb(45 95 126 / 0.08); --about-shadow-medium: 0 12px 40px rgb(45 95 126 / 0.12); /* ─── 教學頁面主題 ─── */ --teaching-primary: var(--palette-yellow-500); --teaching-primary-dark: var(--palette-yellow-600); --teaching-secondary: var(--palette-yellow-400); --teaching-bg-light: var(--palette-yellow-50); --teaching-bg-medium: var(--palette-yellow-100); --teaching-bg-warm: var(--palette-orange-50); --teaching-text-dark: var(--palette-yellow-900); /* ─── 資源頁面主題 ─── */ --resources-primary: #ff6b35; --resources-primary-dark: var(--palette-orange-600); --resources-secondary: #f7931e; --resources-accent: #ff4757; --resources-text-light: var(--color-white); } /* ═══════════════════════════════════════════════════════════════════════════ 響應式調整 ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --section-padding: var(--spacing-16); --blur-decorative-md: 30px; --blur-decorative-lg: 40px; --blur-decorative-xl: 50px; } } @media (max-width: 576px) { :root { --section-padding: var(--spacing-4); } }