/**
 * MOSME 官網 - 設計令牌（homepage-variables.css）
 *
 * 此檔案引入統一的設計系統核心，並定義官網專案特有的變數：
 * - 按鈕色系統、漸層、陰影
 * - 響應式字體（hp-text-*）、區塊間距（hp-gap-*）
 * - 頁面主題色（teaching / resources / about）
 * - 角色主題色（teacher / student）
 * - 玻璃態、裝飾性模糊等視覺效果
 *
 * 建置時由 sync-design-tokens.js 將 design-tokens.css 內聯後
 * 輸出至 MOSME/mosme/frontend/homepage/_nuxt/homepage-variables.css
 */

/* 引入統一設計系統（animations.css 在 main.css 引入，避免 sync-design-tokens.js 無法解析別名）*/
/* ═══ design-tokens.css（自動內聯，勿手動修改）═══ */
/**
 * MOSME 統一設計令牌系統
 *
 * 三層 @layer 架構：
 * 1. @layer primitives - 原始值（調色盤、基礎數值）
 * 2. @layer semantic   - 語義化（用途明確的變數）
 * 3. Themes（層外）     - 主題切換
 *
 * 消費者：
 * - homepage：由 sync-design-tokens.js 在建置時同步
 * - aigc-lab / exam-paper：直接 @import 本檔
 * - class-management：直接 @import 本檔
 *
 * 主題統一使用 data-theme="homepage"（青綠色 CIS 品牌色）
 * App 專用 UI 變數：
 * - 教師端 --t-* 變數定義於 :root（aigc-lab + exam-paper 共用）
 * - 學生端變數作用域於 .student-aiexam-app 根元素
 *
 * 引用方式：import '@pkg-shared/styles/design-tokens.css'
 *
 * ── 響應式斷點規範（業界標準對齊 Bootstrap 5） ──
 * --breakpoint-sm:  576px   手機橫向 / 大手機
 * --breakpoint-md:  768px   平板直向
 * --breakpoint-lg:  992px   平板橫向 / 小筆電
 * --breakpoint-xl:  1200px  桌面
 * --breakpoint-xxl: 1400px  大桌面
 *
 * 語法：統一使用 desktop-first `@media (max-width: Npx)`
 * 注意：CSS @media 不能用 var()，這些 token 主要供 JS 透過
 *      getComputedStyle 取值使用。完整規範見：
 *      .claude/rules/frontend-responsive-breakpoints.md
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 1: Primitives（原始值）
   ═══════════════════════════════════════════════════════════════════════════ */
@layer primitives {
  :root {
    /* ─── 調色盤：棕色系（教師端品牌色）─── */
    --palette-brown-400: #c44b00;
    --palette-brown-500: #a63500;
    --palette-brown-600: #892b00;

    /* ─── 調色盤：海軍藍系（學生端品牌色）─── */
    --palette-navy-400: #3d5a7f;

    /* ─── 調色盤：藍綠色系（官網 CIS 品牌色）─── */
    --palette-teal-50: #f0fdfa;
    --palette-teal-100: #ccfbf1;
    --palette-teal-200: #99f6e4;
    --palette-teal-300: #5eead4;
    --palette-teal-400: #2dd4bf;
    --palette-teal-500: #17b9b9; /* CIS 主色 */
    --palette-teal-600: #0d9488; /* Hover */
    --palette-teal-700: #0f766e; /* Active */
    --palette-teal-900: #134e4a;

    /* ─── 調色盤：藍色系（通用藍色）─── */
    --palette-blue-50: #eff6ff;
    --palette-blue-100: #dbeafe;
    --palette-blue-200: #bfdbfe;
    --palette-blue-300: #93c5fd;
    --palette-blue-400: #60a5fa;
    --palette-blue-500: #3b82f6;
    --palette-blue-600: #2563eb;
    --palette-blue-700: #1d4ed8;
    --palette-blue-800: #1e40af;

    /* ─── 調色盤：橙色系（強調色）─── */
    --palette-orange-50: #fff7ed;
    --palette-orange-100: #ffedd5;
    --palette-orange-200: #fed7aa;
    --palette-orange-300: #fdba74;
    --palette-orange-500: #f97316;
    --palette-orange-600: #ea580c;
    --palette-orange-700: #c2410c;
    --palette-orange-800: #9a3412;

    /* ─── 調色盤：綠色系（成功色）─── */
    /* green-50/100/200 使用 Tailwind 經典值（給 diff-cell 等 subtle 語意化需求） */
    --palette-green-50: #f0fdf4;
    --palette-green-100: #dcfce7;
    --palette-green-200: #bbf7d0;
    --palette-green-300: #86efac;
    --palette-green-400: #4ade80;
    --palette-green-500: #22c55e;
    --palette-green-600: #16a34a;
    --palette-green-700: #15803d;
    --palette-green-800: #166534;

    /* ─── 調色盤：紅色系（危險色）─── */
    --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;

    /* ─── 調色盤：黃色系（警告色）─── */
    /* yellow-50/100 使用 Tailwind 經典值（給 medium 難易度 cell 等淡底需求） */
    --palette-yellow-50: #fefce8;
    --palette-yellow-100: #fef9c3;
    --palette-yellow-200: #fef08a;
    --palette-yellow-300: #fde047;
    --palette-yellow-400: #facc15;
    --palette-yellow-500: #eab308;
    --palette-yellow-600: #ca8a04;
    --palette-yellow-700: #a16207;
    --palette-yellow-800: #854d0e;
    --palette-yellow-900: #713f12;

    /* ─── 調色盤：青色系（資訊色）─── */
    --palette-cyan-50: #ecfeff;
    --palette-cyan-100: #cffafe;
    --palette-cyan-200: #a5f3fc;
    --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-600: #9333ea;
    --palette-purple-700: #7c3aed;
    --palette-purple-800: #6b21a8;

    /* ─── 調色盤：紫羅蘭系（violet，AIGC 題型色專用）─── */
    --palette-violet-50: #f5f3ff;
    --palette-violet-100: #ede9fe;
    --palette-violet-200: #ddd6fe;
    --palette-violet-300: #c4b5fd;
    --palette-violet-500: #8b5cf6;
    --palette-violet-600: #7c3aed;
    --palette-violet-700: #6d28d9;
    --palette-violet-800: #5b21b6;

    /* ─── 調色盤：灰色系（中性色，完整 10 階）─── */
    --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;

    /* ─── 間距比例（13 階）─── */
    --spacing-0-5: 0.125rem; /* 2px */
    --spacing-1: 0.25rem; /* 4px */
    --spacing-1-5: 0.375rem; /* 6px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-2-5: 0.625rem; /* 10px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-3-5: 0.875rem; /* 14px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */

    /* ─── 圓角（6 階）─── */
    --radius-sm: 0.25rem; /* 4px — badge、tag、scrollbar */
    --radius-md: 0.5rem; /* 8px — 按鈕、輸入框 */
    --radius-lg: 0.75rem; /* 12px — 卡片 */
    --radius-xl: 1rem; /* 16px — 大卡片、Modal */
    --radius-2xl: 1.25rem; /* 20px — 大容器、pill 形狀 */
    --radius-full: 9999px;

    /* ─── Modal 寬度（5 階）─── */
    --modal-sm: 400px;
    --modal-md: 600px;
    --modal-lg: 800px;
    --modal-xl: 1000px;
    --modal-2xl: 1400px;

    /* ─── 陰影（sm/md/lg/xl 四階）─── */
    --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);

    /* dialog 專用多層漸進陰影（Linear Level 5 stack 的亮色轉換）：
       第一層 0 0 0 1px 是 border-as-shadow（ring 技法），其後每層距離倍增、透明度漸增，
       比單段 xl 更接近實體光學的衰減，modal / command palette / popover 用 */
    --shadow-dialog:
      0 0 0 1px rgb(15 23 42 / 0.05),
      0 1px 1px rgb(15 23 42 / 0.04),
      0 3px 3px rgb(15 23 42 / 0.04),
      0 6px 6px rgb(15 23 42 / 0.05),
      0 12px 16px rgb(15 23 42 / 0.06),
      0 24px 32px rgb(15 23 42 / 0.07);

    /* ─── 動畫時間（fast/normal/moderate/slow 四階）─── */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-moderate: 300ms;
    --duration-slow: 500ms;
    --duration-shimmer: 1.8s;

    /* ─── 緩動函數（6 組）─── */
    --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-spring: cubic-bezier(0.16, 1, 0.3, 1);
    /* ─── 字體 ─── */
    /* 全站統一字體（繁簡一致，工單 0005748）：西文系統字型堆疊，無中文字型，中文交系統預設 sans-serif fallback。 */
    --font-sans:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
      'Helvetica Neue', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

    /* ─── 字體大小 ─── */
    --text-2xs: 0.6875rem;
    --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;

    /* ─── 字距（Letter Spacing / Tracking）─── */
    --tracking-tightest: -0.03em;
    --tracking-tighter: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-tight: 0.01em;
    --tracking-normal: 0.02em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.25em;

    /* ─── 字重（7 階）─── */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ─── 行高（4 階）─── */
    --leading-none: 1;
    --leading-snug: 1.4;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* ─── 邊框寬度（2 階）─── */
    --border-thin: 1px;
    --border-thick: 2px;

    /* ─── Z-index 層級（6 階）─── */
    --z-elevated: 10;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-overlay: 1050;
    --z-modal: 1200;
    --z-popover: 1300;
    --z-tooltip: 1400;
    --z-toast: 1500;

    /* ─── 玻璃態效果（3 階）─── */
    --glass-blur-sm: blur(8px);
    --glass-blur-md: blur(16px);
    --glass-blur-lg: blur(24px);
    --glass-saturate: saturate(180%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 2: Semantic（語義化）
   ═══════════════════════════════════════════════════════════════════════════ */
@layer semantic {
  :root {
    /* ─── 品牌色（官網藍綠色 #17b9b9，Logo CIS）─── */
    --color-primary: var(--palette-teal-500);
    --color-primary-hover: var(--palette-teal-600);
    --color-primary-active: var(--palette-teal-700);
    --color-primary-light: var(--palette-teal-100);
    --color-primary-subtle: var(--palette-teal-50);
    --color-primary-rgb: 23 185 185;

    /* ─── 強調色（Logo 金黃色）─── */
    --color-accent: var(--palette-yellow-400);
    --color-accent-hover: var(--palette-yellow-500);
    --color-accent-light: var(--palette-yellow-300);
    --color-accent-rgb: 251 191 36;

    /* ─── 狀態色 ─── */
    --color-success: var(--palette-green-500);
    --color-success-hover: var(--palette-green-600);
    --color-success-subtle: var(--palette-green-50);
    --color-success-rgb: 16 185 129;

    --color-warning: var(--palette-yellow-500);
    --color-warning-hover: var(--palette-yellow-600);
    --color-warning-subtle: var(--palette-yellow-50);
    --color-warning-rgb: 245 158 11;

    --color-danger: var(--palette-red-500);
    --color-danger-hover: var(--palette-red-600);
    --color-danger-subtle: var(--palette-red-50);
    --color-danger-rgb: 239 68 68;

    --color-info: var(--palette-cyan-500);
    --color-info-hover: var(--palette-cyan-600);
    --color-info-subtle: var(--palette-cyan-50);
    --color-info-rgb: 6 182 212;

    /* ─── Alpha 透明度（每色 3 階：a5/a10/a20）─── */
    --color-primary-a5: rgb(var(--color-primary-rgb) / 0.05);
    --color-primary-a10: rgb(var(--color-primary-rgb) / 0.1);
    --color-primary-a20: rgb(var(--color-primary-rgb) / 0.2);

    --color-success-a5: rgb(var(--color-success-rgb) / 0.05);
    --color-success-a10: rgb(var(--color-success-rgb) / 0.1);
    --color-success-a20: rgb(var(--color-success-rgb) / 0.2);

    --color-danger-a5: rgb(var(--color-danger-rgb) / 0.05);
    --color-danger-a10: rgb(var(--color-danger-rgb) / 0.1);
    --color-danger-a20: rgb(var(--color-danger-rgb) / 0.2);

    --color-warning-a10: rgb(var(--color-warning-rgb) / 0.1);
    --color-warning-a20: rgb(var(--color-warning-rgb) / 0.2);

    /* Overlay — 55% 黑半透明，對齊學生場景 overlay 標準。
       原 40% 在考場頁面會透出底層 banner/選項/nav 干擾焦點 */
    --color-overlay: rgb(0 0 0 / 0.55);

    /* White Alpha（暗底疊層用） */
    --color-white-a5: rgb(255 255 255 / 0.05);
    --color-white-a10: rgb(255 255 255 / 0.1);
    --color-white-a15: rgb(255 255 255 / 0.15);
    --color-white-a20: rgb(255 255 255 / 0.2);
    --color-white-a25: rgb(255 255 255 / 0.25);
    --color-white-a30: rgb(255 255 255 / 0.3);
    --color-white-a40: rgb(255 255 255 / 0.4);
    --color-white-a50: rgb(255 255 255 / 0.5);
    --color-white-a60: rgb(255 255 255 / 0.6);
    --color-white-a70: rgb(255 255 255 / 0.7);
    --color-white-a80: rgb(255 255 255 / 0.8);
    --color-white-a85: rgb(255 255 255 / 0.85);
    --color-white-a90: rgb(255 255 255 / 0.9);
    --color-white-a95: rgb(255 255 255 / 0.95);

    /* Black Alpha（陰影用 + 極淡 hover/zebra tint） */
    --color-black-a2: rgb(0 0 0 / 0.02);
    --color-black-a4: rgb(0 0 0 / 0.04);
    --color-black-a5: rgb(0 0 0 / 0.05);
    --color-black-a6: rgb(0 0 0 / 0.06);
    --color-black-a8: rgb(0 0 0 / 0.08);
    --color-black-a10: rgb(0 0 0 / 0.1);
    --color-black-a15: rgb(0 0 0 / 0.15);
    --color-black-a20: rgb(0 0 0 / 0.2);
    --color-black-a25: rgb(0 0 0 / 0.25);
    --color-black-a50: rgb(0 0 0 / 0.5);
    --color-black-a70: rgb(0 0 0 / 0.7);

    /* ─── 中性色 ─── */
    --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-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-primary-border: var(--palette-teal-200);
    --color-success-border: var(--palette-green-300);
    --color-warning-border: var(--palette-yellow-300);

    /* ─── RGB 元組（供 rgb(var(...) / alpha%) 透明度計算用）─── */
    /* 補完 rgb 系列：先前 --color-border-rgb / --color-gray-50-rgb 散落使用但
       未集中宣告，依賴元件 fallback 值才能解析；統一在 token 端定義避免將來
       palette 改色時兩處同步維護 */
    --color-border-rgb: 226 232 240;       /* palette-gray-200 */
    --color-border-muted-rgb: 241 245 249; /* palette-gray-100 */
    --color-gray-50-rgb: 249 250 251;      /* palette-gray-50 */
    --color-gray-100-rgb: 243 244 246;     /* palette-gray-100 */

    /* ─── 漸層（已改為平面色，統一玻璃風格）─── */
    --gradient-primary: var(--color-primary);
    --gradient-success: var(--color-success);
    --gradient-danger: var(--color-danger);
    --gradient-warning: var(--color-warning);

    /* ─── 玻璃態 ─── */
    --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);
    /* ─── 元件尺寸 ─── */
    --control-height-sm: 32px;
    --control-height-md: 40px;
    --control-height-lg: 48px;

    /* ─── 佈局 ─── */
    --navbar-height: 64px;
    --sidebar-width: 280px;
    --container-max: 1280px;

    /* ─── 響應式斷點（供 JS 取用、CSS @media 仍寫死數字保 cross-browser）─── */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ─── 彩色陰影 ─── */
    --shadow-primary: 0 10px 40px -10px rgb(var(--color-primary-rgb) / 0.3);
    --shadow-accent: 0 10px 40px -10px var(--color-accent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   無障礙支援
   ═══════════════════════════════════════════════════════════════════════════ */
@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);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IIFE 應用專用變數（aigc-lab、exam-paper 使用）
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Bootstrap 5 整合 ─── */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-gray-600);
  --bs-success: var(--color-success);
  --bs-info: var(--color-info);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-light: var(--color-gray-50);
  --bs-dark: var(--color-gray-800);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);

  /* ─── 語義化色彩 - 藍色系 ─── */
  --color-blue: var(--color-info);
  --color-blue-light: var(--color-info-subtle);

  /* ─── 語義化色彩 - 官方/系統（綠色）─── */
  --color-official: var(--color-success);
  --color-official-subtle: var(--color-success-subtle);
  --color-official-border: var(--palette-green-300);

  /* ─── 語義化色彩 - 自訂/個人（紫色）─── */
  --color-custom: var(--palette-purple-700);
  --color-custom-subtle: var(--palette-purple-50);
  --color-custom-border: var(--palette-purple-200);
  --color-custom-rgb: 124 58 237;

  /* ─── 漸層系統擴展 ─── */
  --gradient-primary-subtle: var(--color-primary-subtle);

  /* ─── 增強陰影系統 ─── */
  --shadow-card-hover: 0 16px 48px rgb(var(--color-primary-rgb) / 0.12);
  --shadow-danger: 0 4px 12px rgb(220 53 69 / 0.2);
  --shadow-danger-lg: 0 8px 24px rgb(220 53 69 / 0.3);
  --shadow-focus-ring: 0 0 0 3px var(--color-primary-subtle);

  /* ─── 焦點樣式統一 token（鍵盤導航 :focus-visible 使用）─── */
  /* 預設「外環」：outline 包在元素外圍，給按鈕、連結、輸入框 */
  --focus-outline: 2px solid var(--color-primary);
  --focus-outline-offset: 2px;
  /* 「內環」：outline 縮入元素內側，給 row / list-item / accordion header
      （避免外環跨進相鄰 row 造成視覺衝突）*/
  --focus-outline-offset-inset: -2px;

  /* ─── 動畫參數 ─── */
  --anim-float-distance: -6px;
  --anim-card-enter-distance: 24px;
  --anim-card-enter-scale: 0.96;
  --stagger-delay: 50ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   學生端 App 專用變數（作用域：.student-aiexam-app 根元素）
   ═══════════════════════════════════════════════════════════════════════════ */

.student-aiexam-app {
  /* ─── 學生端品牌色 ─── */
  --mosme-student-primary: var(--palette-teal-600);
  --mosme-student-primary-light: var(--palette-teal-400);
  --mosme-student-primary-lighter: var(--palette-teal-50);
  --mosme-student-accent: var(--palette-orange-500);
  --mosme-student-accent-hover: var(--palette-orange-600);

  /* ─── 學生端功能色 ─── */
  --student-header-bg: var(--palette-teal-600);
  --student-tint-subtle: rgb(0 0 0 / 0.02);
  --student-tint-light: rgb(0 0 0 / 0.01);

  /* ─── 學生端玻璃態 ─── */
  --student-glass-bg-strong: var(--glass-bg-strong);
  --student-glass-blur-light: var(--glass-blur-md) saturate(160%);

  /* ─── 學生端卡片與面板 ─── */
  --student-panel-bg: var(--glass-bg-strong);
  --student-panel-border: rgb(148 163 184 / 0.18);

  /* ─── 學生端陰影 ─── */
  --student-shadow-primary: 0 10px 40px -10px rgb(0 0 0 / 0.1);

  /* ─── 學生端聊天氣泡 ─── */
  --student-bubble-ai-border: rgb(0 0 0 / 0.06);
  --student-bubble-ai-shadow: 0 4px 16px rgb(0 0 0 / 0.04);

  /* ─── 學生端倒計時 ─── */
  --student-countdown-bg: rgb(16 185 129 / 0.1);
  --student-countdown-border: rgb(16 185 129 / 0.25);
  --student-countdown-warning-bg: rgb(239 68 68 / 0.12);
  --student-countdown-warning-border: rgb(239 68 68 / 0.35);

  /* ─── 學生端提示詞卡片 ─── */
  --student-prompt-card-bg: var(--glass-bg-strong);
  --student-prompt-card-hover-bg: var(--color-primary-subtle);
  --student-prompt-card-hover-shadow: 0 8px 24px rgb(0 0 0 / 0.08);

  /* ─── 學生端輸入框 ─── */
  --student-input-focus-ring: 0 0 0 4px rgb(23 185 185 / 0.15);
  --student-input-focus-border: var(--palette-teal-400);

  /* ─── 中性灰透明度階梯 ─── */
  --student-navy-alpha-3: rgb(15 23 42 / 0.03);
  --student-navy-alpha-6: rgb(15 23 42 / 0.05);
  --student-navy-alpha-8: rgb(15 23 42 / 0.07);
  --student-navy-alpha-10: rgb(15 23 42 / 0.09);
  --student-navy-alpha-12: rgb(15 23 42 / 0.1);
  --student-navy-alpha-15: rgb(15 23 42 / 0.13);
  --student-navy-alpha-20: rgb(15 23 42 / 0.17);
  --student-navy-alpha-30: rgb(15 23 42 / 0.27);

  /* ─── 學生端白色透明度階梯 ─── */
  --student-white-alpha-10: rgb(255 255 255 / 0.1);
  --student-white-alpha-15: rgb(255 255 255 / 0.15);
  --student-white-alpha-20: rgb(255 255 255 / 0.2);
  --student-white-alpha-25: rgb(255 255 255 / 0.25);
  --student-white-alpha-30: rgb(255 255 255 / 0.3);
  --student-white-alpha-50: rgb(255 255 255 / 0.5);
  --student-white-alpha-60: rgb(255 255 255 / 0.6);
  --student-white-alpha-70: rgb(255 255 255 / 0.7);
  --student-white-alpha-80: rgb(255 255 255 / 0.8);
  --student-white-alpha-90: rgb(255 255 255 / 0.9);
  --student-white-alpha-95: rgb(255 255 255 / 0.95);

  /* ─── 學生端語意化複合變數 ─── */
  --student-bg-app: var(--color-gray-100);
  --student-overlay-bg: rgb(15 23 42 / 0.55);
  --student-overlay-shadow: rgb(15 23 42 / 0.2);

  /* ─── 橙色強調透明度 ─── */
  --student-orange-alpha-10: rgb(249 115 22 / 0.1);
  --student-orange-alpha-20: rgb(249 115 22 / 0.2);
  --student-orange-alpha-25: rgb(249 115 22 / 0.25);
  --student-orange-alpha-50: rgb(249 115 22 / 0.5);

  /* ─── 倒計時（綠色成功態）─── */
  --student-countdown-text-gradient: linear-gradient(90deg, var(--color-white) 0%, var(--palette-green-200) 100%);
  --student-countdown-glow: 0 4px 16px rgb(16 185 129 / 0.15);

  /* ─── 倒計時（紅色警告態）─── */
  --student-countdown-warning-text-gradient: linear-gradient(90deg, var(--color-white) 0%, var(--palette-red-300) 100%);
  --student-countdown-warning-glow: 0 4px 16px rgb(239 68 68 / 0.2);
  --student-countdown-warning-pulse-shadow-1: 0 0 0 0 rgb(239 68 68 / 0.4);
  --student-countdown-warning-pulse-shadow-2: 0 0 0 10px rgb(239 68 68 / 0);

  /* ─── 離開按鈕（紅色危險態）─── */
  --student-btn-exit-bg: rgb(239 68 68 / 0.1);
  --student-btn-exit-border: rgb(252 165 165 / 0.25);
  --student-btn-exit-hover-bg: rgb(239 68 68 / 0.25);
  --student-btn-exit-hover-border: rgb(239 68 68 / 0.5);
  --student-btn-exit-hover-shadow: 0 8px 20px rgb(239 68 68 / 0.25);

  /* ─── 正確答案背景 ─── */
  --student-correct-answer-bg: rgb(16 185 129 / 0.15);

  /* ─── 未授權/骨架屏背景 ─── */
  --student-bg-skeleton: var(--color-gray-100);
  --student-text-muted: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout — 跨 app 共用的版面尺寸標準
   - 統一 sidebar 寬度，避免 260/280/320 三套並行
   - 各 app 仍可用語意別名（如 --t-sidebar-width）映射過來，方便日後遷移
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Sidebar 寬度三檔（業界 collapse drawer 標準）：
     - sm 240：手機 drawer / 緊湊側欄
     - md 280：標準側欄（學生端、首頁）
     - lg 320：寬版側欄（班級管理列表）*/
  --layout-sidebar-sm: 240px;
  --layout-sidebar-md: 280px;
  --layout-sidebar-lg: 320px;
  --layout-sidebar-collapsed: 64px;

  /* Header 高度兩檔 */
  --layout-header: 72px;
  --layout-header-mobile: 56px;

  /* Side Panel 寬度四檔（right-slide drawer 用，比 sidebar 寬，含內部 sectioned form）：
     - sm 400：輕量編輯（單欄表單）
     - md 480：標準 sectioned form（建立 AI 試卷主 panel）
     - lg 560：寬版表單
     - xl 720：疊層第二段 panel（含內嵌複合選擇器） */
  --layout-panel-sm: 400px;
  --layout-panel-md: 480px;
  --layout-panel-lg: 560px;
  --layout-panel-xl: 720px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   教師端共用 UI 變數（aigc-lab + exam-paper 共用）
   - 沿用既有 --t-* 命名，但底層映射到 --layout-* 標準
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 布局 — 教師後台 sidebar 統一 320px (lg)，與 class-management 一致，
   * 避免使用者切換 AIGC 實驗室 / 試卷管理 / 班級管理時 sidebar 寬度跳動。
   * 教育平台 sidebar 元素多（icon + 多行班級 / 試卷名稱），320 比 280 更舒適 */
  --t-sidebar-width: var(--layout-sidebar-lg);
  --t-sidebar-width-collapsed: var(--layout-sidebar-collapsed);
  --t-sidebar-z-index: var(--z-overlay);
  --t-sidebar-transition: width var(--duration-moderate) var(--ease-in-out),
    transform var(--duration-moderate) var(--ease-in-out);
  --t-header-height: var(--layout-header);
  --t-header-height-mobile: var(--layout-header-mobile);

  /* 卡片 */
  --t-card-radius: var(--radius-xl);
  --t-card-shadow-hover: 0 12px 24px rgb(var(--color-primary-rgb) / 0.12);
  --t-card-transition: transform var(--duration-moderate) var(--ease-in-out),
    box-shadow var(--duration-moderate) var(--ease-in-out),
    background-color var(--duration-moderate) var(--ease-in-out);
  --t-card-hover-transform: translateY(-4px);
  --t-card-active-transform: translateY(-2px);
  --t-card-shadow-active: 0 8px 16px rgb(var(--color-primary-rgb) / 0.15);

  /* 表單 */
  --t-input-height: 38px;

  /* 按鈕 */
  --t-btn-height-sm: 36px;
  --t-btn-transition: color var(--duration-normal) var(--ease-in-out),
    background-color var(--duration-normal) var(--ease-in-out),
    box-shadow var(--duration-normal) var(--ease-in-out),
    transform var(--duration-normal) var(--ease-in-out);
  --t-btn-hover-transform: translateY(-2px);

  /* 導航 */
  --t-nav-item-height: 40px;
  --t-nav-item-radius: 10px;
  --t-nav-active-indicator: 3px;
}

@media (max-width: 768px) {
  :root {
    --t-header-height: var(--t-header-height-mobile);
    --t-btn-height-sm: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   基礎樣式重置
   ═══════════════════════════════════════════════════════════════════════════ */

/* IIFE 模式下限定 reset 在 Vue 容器內，避免影響 .NET 頁面 */
[data-vue-app] {
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

[data-vue-app] *,
[data-vue-app] *::before,
[data-vue-app] *::after {
  box-sizing: inherit;
}

/* 標題排版：避免最後一行只剩一兩個字的孤字（中文長標題尤其明顯）。
   text-wrap: balance 只調整換行點、不改變字級與行高，不支援的瀏覽器自動忽略。 */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* 頁面級捲動條統一（避免不同頁面因捲動條寬度不同導致畫面寬度不一致） */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* ─── 教師後台三大 App 色系區分（scope class 覆蓋 --color-primary 家族）─────
   老闆要求：AIGC 實驗室、試卷管理、班級管理 三個功能色系要拉開，幫使用者快速辨識。
   實作：用 root id 選擇器（specificity 100）覆蓋 primary 家族變數，不動 semantic layer。
   色相分布（避開 success 綠、danger 紅、warning 黃、info 青、CIS 青綠）：
   - AIGC 實驗室 #aiexam-teacher-app → orange-600（赤陶暖橙，語意「實驗、創造」，非 AI 冷紫）
   - 試卷管理   #exam-paper-app    → blue-600（皇家藍，語意「文件、專業」）
   - 班級管理   #class-management-app → 沿用 CIS teal #17b9b9（品牌主色、歷史最久）
*/
/* 用 html:has(...) 讓 scope 提升到 <html> 層，Modal / Toast 等 Teleport 到 body
   的浮動元件也能繼承當前 app 的 primary（否則 Modal 會 fallback 到 root teal） */
html:has(#aiexam-teacher-app),
html:has(#aiexam-marking-app),
#aiexam-teacher-app,
#aiexam-marking-app {
  --color-primary: var(--palette-orange-600);
  --color-primary-hover: var(--palette-orange-700);
  --color-primary-active: var(--palette-orange-800);
  --color-primary-light: var(--palette-orange-200);
  --color-primary-subtle: var(--palette-orange-50);
  --color-primary-border: var(--palette-orange-300);
  --color-primary-rgb: 234 88 12;
  --color-primary-a5: rgb(234 88 12 / 0.05);
  --color-primary-a10: rgb(234 88 12 / 0.1);
  --color-primary-a20: rgb(234 88 12 / 0.2);

  /* 顯式覆寫衍生變數避免被 @layer semantic 的定義干擾：
     --gradient-primary 和 --bs-primary 原本在 @layer semantic 內定義為 var(--color-primary)，
     但實測在 scoped Vue CSS 中 var() substitution 會拿到 layered root 的舊值（teal），
     必須在 unlayered scope 顯式覆寫才保證生效 */
  --gradient-primary: var(--color-primary);
  --gradient-primary-subtle: var(--color-primary-subtle);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);

  /* 官方提示詞卡片漸層 — 原本固定綠（success）與 AIGC 橙調性違和，
     在 AIGC scope 改跟隨 primary，保留「官方/自訂」區分（自訂仍用紫） */
  --color-official: var(--color-primary);
  --color-official-subtle: var(--color-primary-subtle);
  --color-official-border: var(--color-primary-border);
}

/* #combined-exam-app（試卷管理旗下的「多合一測評組卷器」）跟試卷管理同色系。
   原本用 royal blue #2563eb，但跟學生端 navy 藍 #3d5a7f 太接近會混淆，
   改用紫色（學術 / 文件 / 規範感），跟 AIGC 橙、CIS 青綠、所有語意色明確區分。 */
html:has(#exam-paper-app),
html:has(#combined-exam-app),
#exam-paper-app,
#combined-exam-app {
  --color-primary: var(--palette-purple-600);
  --color-primary-hover: var(--palette-purple-700);
  --color-primary-active: var(--palette-purple-800);
  --color-primary-light: var(--palette-purple-200);
  --color-primary-subtle: var(--palette-purple-50);
  --color-primary-border: var(--palette-purple-300);
  --color-primary-rgb: 147 51 234;
  --color-primary-a5: rgb(147 51 234 / 0.05);
  --color-primary-a10: rgb(147 51 234 / 0.1);
  --color-primary-a20: rgb(147 51 234 / 0.2);

  /* 顯式覆寫衍生變數（同 html:has(#aiexam-teacher-app) 的原因） */
  --gradient-primary: var(--color-primary);
  --gradient-primary-subtle: var(--color-primary-subtle);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
}

/* AI Logo 圖標 */
.ai-icon {
  --ai-icon-size: 20px;
  display: inline-block;
  width: var(--ai-icon-size);
  height: var(--ai-icon-size);
  background: url('/images/common/ai-logo.png') no-repeat center / contain;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   題型分類色系統（2026-04-22 新增 — 統一 Combined Exam / Preview 題型 chip / badge 色）

   規範：
   - 每種題型提供 4 個語意變數：subtle 淡底 / border 邊框 / text 文字 / text-strong 強色
   - 命名對應後端題型代碼：TF 是非 / S 單選 / M 複選 / FB 填充 / SA 非選 / CD 拖拉 / TYPING 打字 / AIGC 生成
   - 消費端逐步遷移，目前僅 design-tokens.css 定義，各 .vue 檔保留既有寫法
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* TF 是非題 — blue */
  --type-color-tf-subtle: var(--palette-blue-50);
  --type-color-tf-border: var(--palette-blue-200);
  --type-color-tf-text: var(--palette-blue-600);
  --type-color-tf-text-strong: var(--palette-blue-800);

  /* S 單選題 — green */
  --type-color-s-subtle: var(--palette-green-50);
  --type-color-s-border: var(--palette-green-200);
  --type-color-s-text: var(--palette-green-700);
  --type-color-s-text-strong: var(--palette-green-800);

  /* M 複選題 — purple */
  --type-color-m-subtle: var(--palette-purple-50);
  --type-color-m-border: var(--palette-purple-200);
  --type-color-m-text: var(--palette-purple-700);
  --type-color-m-text-strong: var(--palette-purple-800);

  /* FB 填充題 — orange */
  --type-color-fb-subtle: var(--palette-orange-50);
  --type-color-fb-border: var(--palette-orange-200);
  --type-color-fb-text: var(--palette-orange-600);
  --type-color-fb-text-strong: var(--palette-orange-800);

  /* SA 非選題 — red */
  --type-color-sa-subtle: var(--palette-red-50);
  --type-color-sa-border: var(--palette-red-200);
  --type-color-sa-text: var(--palette-red-600);
  --type-color-sa-text-strong: var(--palette-red-800);

  /* CD 拖拉題 — cyan */
  --type-color-cd-subtle: var(--palette-cyan-50);
  --type-color-cd-border: var(--palette-cyan-200);
  --type-color-cd-text: var(--palette-cyan-700);
  --type-color-cd-text-strong: var(--palette-cyan-800);

  /* TYPING 打字題 — teal */
  --type-color-typing-subtle: var(--palette-teal-50);
  --type-color-typing-border: var(--palette-teal-200);
  --type-color-typing-text: var(--palette-teal-700);
  --type-color-typing-text-strong: var(--palette-teal-900);

  /* AIGC 生成題 — violet */
  --type-color-ai-subtle: var(--palette-violet-50);
  --type-color-ai-border: var(--palette-violet-200);
  --type-color-ai-text: var(--palette-violet-700);
  --type-color-ai-text-strong: var(--palette-violet-800);

  /* Office 測評 — orange */
  --type-color-office-subtle: var(--palette-orange-50);
  --type-color-office-border: var(--palette-orange-200);
  --type-color-office-text: var(--palette-orange-700);
  --type-color-office-text-strong: var(--palette-orange-800);
}
         
/* ═══ 內聯結束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   官網專案特有變數
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 官網漸層 ─── */
  --gradient-primary: linear-gradient(
    135deg,
    var(--palette-teal-500) 0%,
    var(--palette-teal-600) 100%
  );
  --gradient-hot: linear-gradient(
    135deg,
    var(--palette-orange-500) 0%,
    var(--palette-red-500) 100%
  );
  --gradient-success: linear-gradient(135deg, var(--palette-green-500) 0%, var(--palette-green-600) 100%);

  /* ─── 官網按鈕實色（非漸層，語義化命名）─── */
  --btn-color-primary: var(--color-primary);
  --btn-color-primary-hover: var(--color-primary-hover);
  --btn-color-yellow: var(--palette-yellow-500);
  --btn-color-yellow-hover: var(--palette-yellow-400);
  --btn-color-blue: var(--palette-blue-500);
  --btn-color-blue-hover: var(--palette-blue-400);

  /* ─── 官網背景實色 ─── */
  --bg-dark: var(--palette-gray-800);

  --section-padding: var(--spacing-12);

  /* ─── 語意色 RGB 分量（供 alpha 合成使用）─── */
  --color-success-rgb: 16 185 129; /* palette-green-500 */
  --color-danger-rgb: 239 68 68; /* palette-red-500 */
  --color-orange-rgb: 249 115 22; /* palette-orange-500 */

  /* ─── 官網陰影擴展 ─── */
  --shadow-primary: 0 10px 40px -10px rgb(var(--color-primary-rgb) / 0.3);
  --shadow-accent: 0 10px 40px -10px rgb(251 191 36 / 0.3);
  /* --shadow-card-float 已移除（0 引用） */

  /* ─── 焦點環陰影 ─── */
  --shadow-focus-ring: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.15);
  --shadow-focus-ring-strong: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.2);

  /* --shadow-glow-* 系列（success / danger / sale / primary / accent）已移除：
     原本用於 .badge-glow-* / .counter-complete 等 utility，全部已刪 */

  /* ─── Section 色調帷幕（冷暖交替，營造視覺節奏）─── */
  --section-tint-cool: rgb(224 242 252 / 0.45); /* 淡天藍 — Ecosystem、Stats */
  --section-tint-warm: rgb(253 245 220 / 0.45); /* 淡奶黃 — News */

  /* ─── 螢光筆基色（RGB 分量）─── */
  --highlighter-yellow-rgb: 250 204 21; /* ~palette-yellow-300 */
  --highlighter-pink-rgb: 244 114 182;
  --highlighter-green-rgb: 34 197 94; /* ~palette-green-400 */

  /* ─── 官網玻璃態擴展 ─── */
  /* --glass-bg-level-1 / --glass-bg-level-2 已移除（0 引用，只 -3 有用） */
  --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);
  --hp-glass-blur: var(--glass-blur-lg) var(--glass-saturate);
  --hp-glass-blur-sm: var(--glass-blur-md) saturate(160%);
  --hp-glass-blur-md: blur(28px) saturate(185%);
  --hp-glass-blur-lg: blur(40px) 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-sm: 40px;
  --blur-decorative-md: 60px;
  --blur-decorative-lg: 80px;
  --blur-decorative-xl: 100px;

  /* ─── 官網響應式字體大小（hp- 前綴，避免覆蓋核心 --text-* 令牌）─── */
  /* 12px 下限：原本 clamp 下限 0.7rem 在手機會算出 11.2px，高齡使用者不易閱讀 */
  --hp-text-xs: clamp(0.75rem, 0.65rem + 0.2vw, 0.75rem);
  --hp-text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
  --hp-text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --hp-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --hp-text-xl: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  --hp-text-2xl: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem);
  --hp-text-3xl: clamp(1.6rem, 1.3rem + 0.8vw, 1.875rem);
  --hp-text-4xl: clamp(2rem, 1.5rem + 1.2vw, 2.25rem);
  --hp-text-5xl: clamp(2.5rem, 1.8rem + 1.8vw, 3rem);
  --hp-text-6xl: clamp(3rem, 2rem + 2.5vw, 3.75rem);

  /* ─── 官網專用緩動函數 ─── */
  --ease-bounce-subtle: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ─── 官網區塊間距 ─── */
  --hp-section-py: 3.75rem;    /* 60px — 標準區塊內距 */
  --hp-section-py-lg: 6.25rem; /* 100px — 大型區塊內距 */
  --hp-section-py-xl: 7.5rem;  /* 120px — 英雄區塊內距 */
  --hp-gap-sm: 1.875rem;       /* 30px */
  --hp-gap-md: 2.5rem;         /* 40px */
  --hp-gap-lg: 3.75rem;        /* 60px */
  --hp-gap-xl: 3.5rem;         /* 56px（原 80px → 縮減至適中間距）*/
  --hp-gap-2xl: 4.5rem;        /* 72px（原 100px → 縮減至適中間距）*/

  /* ─── 佈局 ─── */
  --nav-section-height: 48px;
  /* --control-height-nav-mobile 已移除（0 引用） */
  --container-padding: clamp(1rem, 5vw, 2rem);

  /* ─── 角色主題色 ─── */
  /* 教師角色色維持深棕 brown-600（2026-06-12 使用者決策：與 Nuxt 首頁端一致，
     曾短暫改 orange-600 後回退——不要再改成橘色） */
  --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-rgb: 45 95 126;
  --about-primary-dark: #1a4058;
  --about-primary-dark-rgb: 26 64 88;
  --about-secondary: #f4a261;
  --about-secondary-rgb: 244 162 97;
  --about-accent: #e76f51;
  --about-light-bg: #faf8f5;
  --about-dark-text: #1a2930;
  --about-mid-text: #4a5568;
  --about-shadow-soft: 0 8px 30px rgb(var(--about-primary-rgb) / 0.08);
  --about-shadow-medium: 0 12px 40px rgb(var(--about-primary-rgb) / 0.12);
  --about-border-radius: var(--radius-xl);

  /* ─── 教學頁面主題 ─── */
  --teaching-primary: var(--palette-yellow-500);
  --teaching-primary-dark: var(--palette-yellow-600);
  --teaching-secondary: var(--palette-yellow-400);
  --teaching-amber-rgb: 251 191 36;  /* yellow-400 */
  --teaching-dark-orange-rgb: 217 119 6; /* amber-600 */
  --teaching-bg-light: var(--palette-yellow-50);
  --teaching-bg-medium: var(--palette-yellow-100);
  --teaching-bg-warm: var(--palette-orange-50);
  --teaching-bg-section: #fff9f5;
  --teaching-text-dark: var(--palette-yellow-900);

  /* ─── 資源頁面主題（改用 palette 引用，減少硬編碼）─── */
  --resources-primary: var(--palette-orange-500); /* 原 #ff6b35 → 統一使用 palette */
  --resources-primary-rgb: 249 115 22; /* palette-orange-500 RGB */
  --resources-primary-dark: var(--palette-orange-600);
  --resources-secondary: var(--palette-yellow-500); /* 原 #f7931e → 統一使用 palette */
  --resources-secondary-rgb: 245 158 11; /* palette-yellow-500 RGB */
  --resources-accent: var(--palette-red-400); /* 原 #ff4757 → 統一使用 palette */
  --resources-accent-rgb: 248 113 113; /* palette-red-400 RGB */
  --resources-text-light: var(--color-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   響應式調整
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --section-padding: var(--spacing-8); /* 32px（修復：原 spacing-16=64px 比桌面版更大）*/
    --hp-gap-xl: 2rem;       /* 32px */
    --hp-gap-2xl: 2.5rem;    /* 40px */
    --blur-decorative-sm: 20px;
    --blur-decorative-md: 30px;
    --blur-decorative-lg: 40px;
    --blur-decorative-xl: 50px;
  }
}

@media (max-width: 576px) {
  :root {
    --section-padding: var(--spacing-6); /* 24px（修復：原 spacing-4=16px 過小）*/
    --hp-gap-xl: 1.5rem;     /* 24px */
    --hp-gap-2xl: 2rem;      /* 32px */
  }
}