/* ========================================================================== 
   AI with Everyone — Global Brand Stylesheet
   File: /css/aiwitheveryone.css
   Version: 1.0
   Updated: 2026-09-03
   ========================================================================== */

/*
   [這個檔案負責什麼？]

   這是 aiwitheveryone.com 的「全站共用品牌樣式」。
   目標不是把所有頁面的 CSS 都集中到這裡，而是提供每一頁都應該一致的視覺基礎：

   1. Design Tokens：顏色、陰影、圓角、Navbar 高度等。
   2. Base Styles：body、selection、anchor、section 等基礎行為。
   3. Global Components：Navbar、Eyebrow、Footer 等跨頁共用元件。
   4. Accessibility：Reduced Motion 等全站無障礙行為。

   [未來維護原則]

   - 如果修改會影響「所有頁面」，通常應該改這個檔案。
   - 如果樣式只屬於某一頁，例如首頁 Topic Card、VyScout 功能比較表，
     請留在該頁專屬 CSS，不要塞進這個檔案。
   - 全站自訂 CSS 變數統一使用 --awe- 前綴，避免和 Bootstrap 或其他套件撞名。
   - 共用元件 class 優先使用 .awe- 前綴，讓來源清楚、方便未來 AI 判讀。

   [建議載入順序]

   Bootstrap CSS
       ↓
   /css/aiwitheveryone.css
       ↓
   page-specific CSS（例如 home.css / vyscout.css，或頁面內 <style>）

   這樣頁面仍可在必要時覆寫全站預設值，但不會破壞品牌的一致性。
*/


/* ========================================================================== 
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   所有全站可重複使用的視覺常數集中在這裡。
   未來想調整網站整體風格時，優先修改 Token，而不是逐頁搜尋色碼。
   ========================================================================== */

:root {
  /* 固定 Navbar 高度。
     JS 會依實際 navbar.offsetHeight 動態更新此值，避免 fixed navbar 遮住內容。 */
  --awe-nav-height: 68px;

  /* ---------- Brand / Surface Colors ---------- */
  --awe-color-page-bg: #f3f3f1;
  --awe-color-surface-glass: rgba(255, 255, 255, .86);
  --awe-color-surface: #ffffff;
  --awe-color-surface-soft: #f8f8f6;

  /* ---------- Text Colors ---------- */
  --awe-color-text: #242424;
  --awe-color-text-muted: #696969;

  /* ---------- Border ---------- */
  --awe-color-line: rgba(40, 40, 40, .10);

  /* ---------- Accent ----------
     主 Accent 刻意維持低飽和藍灰，保留目前 AI with Everyone 的理性、工具感。
     若未來品牌主色調整，優先從這三個 Token 開始。 */
  --awe-color-accent: #3f6f8c;
  --awe-color-accent-soft: rgba(63, 111, 140, .10);
  --awe-color-accent-muted: #6f7f86;

  /* ---------- Selection ---------- */
  --awe-color-selection-bg: #cfe3ee;
  --awe-color-selection-text: #111111;

  /* ---------- Shadow ---------- */
  --awe-shadow-card: 0 18px 50px rgba(28, 31, 33, .08);
  --awe-shadow-card-hover: 0 22px 65px rgba(28, 31, 33, .14);

  /* ---------- Radius ----------
     Large：主要卡片 / 區塊。
     Medium：按鈕、子卡片。
     Pill：標籤、膠囊按鈕。 */
  --awe-radius-large: 24px;
  --awe-radius-medium: 12px;
  --awe-radius-pill: 999px;
}


/* ========================================================================== 
   2. BASE / DOCUMENT FOUNDATION
   --------------------------------------------------------------------------
   只放所有頁面都合理的基礎規則。
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: calc(var(--awe-nav-height) + env(safe-area-inset-top, 0px));

  /* Inter 負責英文與數字；Noto Sans TC 負責繁體中文。
     system-ui 與後續字型為 fallback，避免外部字型載入失敗時版面崩壞。 */
  font-family:
    'Inter',
    'Noto Sans TC',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  color: var(--awe-color-text);

  /* 全站基礎背景。
     個別頁面如果需要純白或深色背景，可以在 page-specific CSS 覆寫 body。 */
  background-color: var(--awe-color-page-bg);
  background-image:
    radial-gradient(circle at top left, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(145deg, #f7f7f5 0%, #ededeb 50%, #e6e7e6 100%);

  min-height: 100vh;
  overflow-x: hidden;
}

/* 預設讓連結繼承文字顏色；具體按鈕 / Footer / Card Link 再自行定義。 */
a {
  color: inherit;
}

/* 使用者反白文字時保留品牌一致性與足夠對比。 */
::selection {
  background: var(--awe-color-selection-bg);
  color: var(--awe-color-selection-text);
}

/* 配合 fixed navbar。
   所有 section 使用 anchor 跳轉時，自動保留 Navbar 上方空間。 */
section {
  scroll-margin-top: calc(var(--awe-nav-height) + 18px);
}


/* ========================================================================== 
   3. GLOBAL NAVBAR
   --------------------------------------------------------------------------
   HTML 建議：
   <nav class="navbar navbar-expand-lg fixed-top awe-navbar">...</nav>

   使用 .awe-navbar 作 Scope，避免未來某個子頁若出現第二個 Bootstrap navbar，
   也被全站樣式意外套用。
   ========================================================================== */

.awe-navbar {
  min-height: var(--awe-nav-height);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(247, 247, 245, .90);
  border-bottom: 1px solid var(--awe-color-line);
}

.awe-navbar .navbar-brand {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--awe-color-text);
}

/* 如果品牌名稱未來需要第二段較淡文字，可使用：
   <span>...</span> */
.awe-navbar .navbar-brand span {
  color: var(--awe-color-accent-muted);
  font-weight: 500;
}

.awe-navbar .nav-link {
  color: var(--awe-color-text-muted) !important;
  font-size: .93rem;
  font-weight: 500;
}

.awe-navbar .nav-link:hover,
.awe-navbar .nav-link:focus-visible {
  color: var(--awe-color-text) !important;
}


/* ========================================================================== 
   4. GLOBAL EYEBROW / SECTION LABEL
   --------------------------------------------------------------------------
   用途：Hero 上方小標、Section 類別標示，例如 Explore / About。

   HTML：
   <div class="awe-eyebrow">
     <span class="awe-eyebrow-dot"></span>
     Explore
   </div>
   ========================================================================== */

.awe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .78rem;
  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-pill);
  background: rgba(255,255,255,.65);
  color: var(--awe-color-text-muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.awe-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--awe-color-accent);
  box-shadow: 0 0 0 5px var(--awe-color-accent-soft);
}


/* ========================================================================== 
   5. GLOBAL FOOTER
   --------------------------------------------------------------------------
   Footer 是全站品牌錨點，建議所有主要頁面維持相同視覺與基本結構。
   個別頁面可以改 Footer 內容，但不要重新定義另一套 Footer 外觀。
   ========================================================================== */

.awe-footer {
  padding: 42px 0 30px;
  background: #222728;
  color: rgba(255,255,255,.68);
}

.awe-footer h5 {
  color: #ffffff;
  font-weight: 700;
}

.awe-footer a {
  color: rgba(255,255,255,.70);
  text-decoration: none;
}

.awe-footer a:hover,
.awe-footer a:focus-visible {
  color: #ffffff;
}

.awe-footer-rule {
  border-top: 1px solid rgba(255,255,255,.10);
}


/* ========================================================================== 
   6. RESPONSIVE GLOBAL TOKENS
   --------------------------------------------------------------------------
   只調整真正屬於全站的 responsive 值。
   Grid、Topic Card 等首頁版型請留在首頁 CSS。
   ========================================================================== */

@media (max-width: 767.98px) {
  :root {
    --awe-nav-height: 62px;
    --awe-radius-large: 20px;
  }
}


/* ========================================================================== 
   7. ACCESSIBILITY — REDUCED MOTION
   --------------------------------------------------------------------------
   尊重作業系統「減少動態效果」設定。
   放在 Global CSS，避免每一頁重複撰寫。
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}