/* shared-assets/css/global.css */

/* 1. 引入 Google 字體 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+TC:wght@300;400;700&display=swap');

/* 2. 引入 Font Awesome 圖標庫 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 你原本 global.css 底下的樣式代碼保持不變... */
:root {
  --font-en: "Inter", sans-serif;
  --font-tw: "Noto Sans TC", sans-serif;
  --color-bg: #020617; /* Slate-950 */
  --color-text: #f1f5f9; /* Slate-100 */
  --accent-indigo: #818cf8;
  --accent-purple: #c084fc;
}
  
  html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
  }
  
  body {
    font-family: var(--font-en);
    background-color: var(--color-bg) !important;
    color: var(--color-text);
    transition: background-color 0.3s ease;
  }
  
  body[lang="zh-TW"] {
    font-family: var(--font-tw);
  }
  
  /* 共用組件樣式 */
  .gradient-text {
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .glass-nav {
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .glass-panel {
    background: rgba(30, 41, 59, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .tool-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .tool-card:hover {
    transform: translateY(-8px);
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(129, 140, 248, 0.4);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  }