/* ==========================================================================
   AI with Everyone — Global Brand Stylesheet
   File: /css/aiwitheveryone.css
   Version: 1.1
   Updated: 2026-09-17
   Bootstrap Baseline: 5.3.3
   ========================================================================== */

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

   這是 aiwitheveryone.com 的「全站共用 Design System 基礎層」。

   它負責：
   1. 全站 Design Tokens：顏色、圓角、陰影、內容寬度、間距與動態速度。
   2. Bootstrap 5.3.3 Bridge：讓 Bootstrap 基礎色彩與全站品牌 Token 對齊。
   3. Base / Typography：body、標題、段落、連結、圖片與文字選取。
   4. Global Layout：Section、閱讀寬度、Surface、Card。
   5. Global Components：Navbar、Eyebrow、Button Variant、Screenshot、Footer。
   6. Accessibility：Focus Visible、Reduced Motion。

   [載入順序]

   Bootstrap 5.3.3
       ↓
   /css/aiwitheveryone.css
       ↓
   /css/viadivy.css（只有 Viadivy 頁面需要）
       ↓
   page-specific CSS，例如 /css/pages/vycapture.css

   [維護原則]

   - 只有「跨多數頁面都合理」的樣式才放在這裡。
   - Viadivy 品牌專屬視覺放在 viadivy.css。
   - 單一產品或單一頁面的特殊 Layout 放在 page-specific CSS。
   - 全站自訂 CSS 變數統一使用 --awe- 前綴。
   - 共用 Class 統一使用 .awe- 前綴。
   - 不要為了少幾行 CSS，就把不同責任的樣式混在同一區塊。
   - 未來 Canva Branding 定案後，優先調整 Token，不要逐頁搜尋色碼。
*/


/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   所有全站會重複使用的視覺常數集中在這裡。
   未來品牌調整時，優先改 Token，不要逐頁改硬編碼值。
   ========================================================================== */

:root {
  /* ---------- Navigation ---------- */
  --awe-nav-height: 68px;

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

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

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

  /* ---------- Accent ----------
     目前沿用低飽和藍灰。
     未來若 Canva Branding 定義正式主色，優先從此區替換。 */
  --awe-color-accent: #3f6f8c;
  --awe-color-accent-hover: #345f79;
  --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;

  /* ---------- Footer ---------- */
  --awe-color-footer-bg: #222728;
  --awe-color-footer-text: rgba(255, 255, 255, .68);
  --awe-color-footer-link: rgba(255, 255, 255, .72);
  --awe-color-footer-heading: #ffffff;

  /* ---------- Layout ----------
     content-max-width：一般 Landing Page / Product Page 最大內容寬度。
     reading-max-width：長文閱讀寬度，避免中文字行過長。 */
  --awe-content-max-width: 1200px;
  --awe-reading-max-width: 760px;

  /* ---------- Section Spacing ----------
     保持跨頁面一致的垂直節奏。 */
  --awe-section-space: 96px;
  --awe-section-space-mobile: 64px;

  /* ---------- Typography ---------- */
  --awe-font-size-body: 1rem;
  --awe-line-height-body: 1.75;
  --awe-line-height-heading: 1.25;

  /* ---------- 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 ---------- */
  --awe-radius-large: 24px;
  --awe-radius-medium: 12px;
  --awe-radius-small: 8px;
  --awe-radius-pill: 999px;

  /* ---------- Motion ----------
     只有互動元件使用，純內容不要為了華麗而加動畫。 */
  --awe-transition-fast: 160ms ease;
  --awe-transition-normal: 240ms ease;
}


/* ==========================================================================
   2. BOOTSTRAP 5.3.3 BRIDGE
   --------------------------------------------------------------------------
   目的：讓 Bootstrap 基礎文字、背景、邊框與連結色彩接近 AWE 品牌。

   注意：
   Bootstrap 的 .btn-primary 在編譯後具有自己的 Component Variables，
   因此品牌主要按鈕請使用下方自訂的 .btn-awe-primary，
   不假設只修改 --bs-primary 就能完整改寫所有 Bootstrap 元件。
   ========================================================================== */

:root {
  --bs-body-bg: var(--awe-color-page-bg);
  --bs-body-color: var(--awe-color-text);
  --bs-secondary-color: var(--awe-color-text-muted);
  --bs-border-color: var(--awe-color-line);

  --bs-link-color: var(--awe-color-accent);
  --bs-link-hover-color: var(--awe-color-accent-hover);

  --bs-border-radius: var(--awe-radius-small);
  --bs-border-radius-lg: var(--awe-radius-medium);
  --bs-border-radius-xl: var(--awe-radius-large);
}


/* ==========================================================================
   3. BASE / DOCUMENT FOUNDATION
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  /* fixed navbar 會佔據頁面頂部，因此 body 預留對應高度。
     env() 用於支援有 Safe Area 的裝置。 */
  padding-top: calc(var(--awe-nav-height) + env(safe-area-inset-top, 0px));

  font-family:
    'Inter',
    'Noto Sans TC',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  font-size: var(--awe-font-size-body);
  line-height: var(--awe-line-height-body);
  color: var(--awe-color-text);
  background-color: var(--awe-color-page-bg);

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

/* 圖片預設不超出父容器，減少 RWD 頁面橫向溢位風險。 */
img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--awe-color-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

a:hover {
  color: var(--awe-color-accent-hover);
}

::selection {
  background: var(--awe-color-selection-bg);
  color: var(--awe-color-selection-text);
}

/* anchor 跳轉時預留 fixed navbar 空間。 */
section {
  scroll-margin-top: calc(var(--awe-nav-height) + 18px);
}


/* ==========================================================================
   4. TYPOGRAPHY
   --------------------------------------------------------------------------
   只定義全站閱讀習慣，不在 Global CSS 寫死 Hero H1 尺寸。
   頁面可搭配 Bootstrap display-* / fs-* 或 page-specific CSS。
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--awe-color-text);
  font-weight: 700;
  line-height: var(--awe-line-height-heading);
}

p {
  line-height: var(--awe-line-height-body);
}

.awe-text-muted {
  color: var(--awe-color-text-muted) !important;
}

/* 長文閱讀區使用較窄寬度，尤其適合繁體中文文章與說明頁。 */
.awe-reading-width {
  width: 100%;
  max-width: var(--awe-reading-max-width);
}


/* ==========================================================================
   5. GLOBAL LAYOUT
   ========================================================================== */

/* 主要 Section 的統一上下留白。
   未來不同頁面若沒有特殊理由，優先使用這個節奏。 */
.awe-section {
  padding-top: var(--awe-section-space);
  padding-bottom: var(--awe-section-space);
}

.awe-section-soft {
  background: var(--awe-color-surface-soft);
}

.awe-content-width {
  width: min(100%, var(--awe-content-max-width));
  margin-inline: auto;
}

/* Ambient 背景不是所有頁面都強制使用。
   需要較完整品牌氣氛的首頁 / Hero 頁面再加此 Class。 */
.awe-page-ambient {
  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%);
}


/* ==========================================================================
   6. GLOBAL COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 NAVBAR
   -------------------------------------------------------------------------- */

.awe-navbar {
  min-height: var(--awe-nav-height);

  /* backdrop-filter 讓 fixed navbar 在內容捲動時維持輕微玻璃感。 */
  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);
}

.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;
}

.awe-navbar .navbar-toggler {
  border-color: var(--awe-color-line);
}

.awe-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem var(--awe-color-accent-soft);
}


/* --------------------------------------------------------------------------
   6.2 EYEBROW / SECTION LABEL
   -------------------------------------------------------------------------- */

.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);
}


/* --------------------------------------------------------------------------
   6.3 CARD
   -------------------------------------------------------------------------- */

/* 基礎 Card 不預設 Hover 位移。
   只有真正可互動 / 可點擊的 Card 才額外加 .awe-card-interactive。 */
.awe-card {
  background: var(--awe-color-surface);
  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-large);
  box-shadow: var(--awe-shadow-card);
}

.awe-card-interactive {
  transition:
    transform var(--awe-transition-normal),
    box-shadow var(--awe-transition-normal);
}

.awe-card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--awe-shadow-card-hover);
}


/* --------------------------------------------------------------------------
   6.4 BUTTON VARIANTS
   --------------------------------------------------------------------------
   延伸 Bootstrap .btn，而不是另造完整按鈕系統。
   用法：
   <a class="btn btn-awe-primary">...</a>
   -------------------------------------------------------------------------- */

.btn-awe-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--awe-color-accent);
  --bs-btn-border-color: var(--awe-color-accent);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--awe-color-accent-hover);
  --bs-btn-hover-border-color: var(--awe-color-accent-hover);
  --bs-btn-focus-shadow-rgb: 63, 111, 140;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--awe-color-accent-hover);
  --bs-btn-active-border-color: var(--awe-color-accent-hover);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--awe-color-accent);
  --bs-btn-disabled-border-color: var(--awe-color-accent);

  border-radius: var(--awe-radius-medium);
  font-weight: 600;
}

.btn-awe-outline {
  --bs-btn-color: var(--awe-color-accent);
  --bs-btn-border-color: var(--awe-color-accent);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--awe-color-accent);
  --bs-btn-hover-border-color: var(--awe-color-accent);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--awe-color-accent-hover);
  --bs-btn-active-border-color: var(--awe-color-accent-hover);

  border-radius: var(--awe-radius-medium);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   6.5 PRODUCT / APP SCREENSHOT
   --------------------------------------------------------------------------
   適合產品頁真實畫面截圖。
   不在這裡決定 Screenshot 的版面位置，只定義視覺基礎。
   -------------------------------------------------------------------------- */

.awe-product-screenshot {
  display: block;
  width: 100%;

  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-medium);
  box-shadow: var(--awe-shadow-card);

  background: var(--awe-color-surface);
}


/* --------------------------------------------------------------------------
   6.6 FOOTER
   -------------------------------------------------------------------------- */

.awe-footer {
  padding: 42px 0 30px;
  background: var(--awe-color-footer-bg);
  color: var(--awe-color-footer-text);
}

.awe-footer h5 {
  color: var(--awe-color-footer-heading);
  font-weight: 700;
}

.awe-footer a {
  color: var(--awe-color-footer-link);
  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);
}


/* ==========================================================================
   7. GLOBAL UTILITIES
   --------------------------------------------------------------------------
   僅保留具有明確跨頁價值的 Utility。
   不要與 Bootstrap 已有的 spacing / flex / grid utility 重複造輪子。
   ========================================================================== */

.awe-surface {
  background: var(--awe-color-surface);
}

.awe-surface-soft {
  background: var(--awe-color-surface-soft);
}


/* ==========================================================================
   8. RESPONSIVE GLOBAL TOKENS
   ========================================================================== */

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

  .awe-section {
    padding-top: var(--awe-section-space-mobile);
    padding-bottom: var(--awe-section-space-mobile);
  }
}


/* ==========================================================================
   9. ACCESSIBILITY
   ========================================================================== */

/* 全站 Keyboard Focus。
   只在鍵盤導覽時顯示，避免滑鼠操作時畫面一直出現 outline。 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--awe-color-accent-soft);
  outline-offset: 3px;
}

/* 尊重作業系統「減少動態效果」設定。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}