/* =============================================================================
   tokens.css — 統一設計 Token
   -----------------------------------------------------------------------------
   規格優先順序：本次整合規格 > DESIGN.md > tem3.html > tem2.html
   全頁只有這一組 token；tem2 的字型、色彩、圓角、陰影與 tailwind.config 一律
   不保留，tem2 只提供結構、資訊層級、互動邏輯與元件狀態。
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. 字體
     Plus Jakarta Sans 不含中文字符，中文字元自動 fallback 至 Noto Sans TC。
     全站單一 stack，不依區塊切換。
     --------------------------------------------------------------------------- */
  --ds-font-sans: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
  /* 僅供展示頁說明文字中的 <code>／<kbd> 使用，不套用於任何元件；不載入字體檔 */
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------------------------------------------------------------------------
     2. 字級（依 DESIGN.md「中文優先字體層級」）
     --------------------------------------------------------------------------- */
  /* Hero 60 / 72 / 700 */
  --ds-text-display-hero-size: 60px;
  --ds-text-display-hero-line: 72px;
  --ds-text-display-hero-weight: 700;
  --ds-text-display-hero-mobile-size: 36px;
  --ds-text-display-hero-mobile-line: 44px;

  /* Section 標題 42 / 54 / 600 */
  --ds-text-headline-lg-size: 42px;
  --ds-text-headline-lg-line: 54px;
  --ds-text-headline-lg-weight: 600;
  --ds-text-headline-lg-mobile-size: 28px;
  --ds-text-headline-lg-mobile-line: 36px;

  /* 次級標題 24 / 34 / 600 */
  --ds-text-headline-md-size: 24px;
  --ds-text-headline-md-line: 34px;
  --ds-text-headline-md-weight: 600;

  /* 內文 16 / 28 / 400 */
  --ds-text-body-md-size: 16px;
  --ds-text-body-md-line: 28px;
  --ds-text-body-md-weight: 400;

  /* 導覽文字 15 / 22 / 500 */
  --ds-text-nav-label-size: 15px;
  --ds-text-nav-label-line: 22px;
  --ds-text-nav-label-weight: 500;

  /* CTA 16 / 24 / 600 */
  --ds-text-cta-size: 16px;
  --ds-text-cta-line: 24px;
  --ds-text-cta-weight: 600;

  /* --- 以下為 DESIGN.md 未定義、UI 元件需要的擴充級距 --- */
  --ds-text-headline-sm-size: 20px;   /* 卡片標題 */
  --ds-text-headline-sm-line: 28px;
  --ds-text-headline-sm-weight: 600;

  --ds-text-body-lg-size: 18px;       /* 卡片導言 */
  --ds-text-body-lg-line: 28px;
  --ds-text-body-lg-weight: 400;

  --ds-text-body-sm-size: 14px;       /* 元件內次要說明 */
  --ds-text-body-sm-line: 22px;
  --ds-text-body-sm-weight: 400;

  --ds-text-label-sm-size: 13px;      /* 標籤、小按鈕 */
  --ds-text-label-sm-line: 18px;
  --ds-text-label-sm-weight: 500;

  --ds-text-caption-size: 12px;       /* 徽章、計數、輔助說明（最小字級） */
  --ds-text-caption-line: 16px;
  --ds-text-caption-weight: 400;

  --ds-tracking-hero: -0.02em;
  --ds-tracking-headline: -0.015em;
  --ds-tracking-sub: -0.01em;
  --ds-tracking-wide: 0.05em;         /* 全大寫微標籤 */

  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* ---------------------------------------------------------------------------
     3. 色彩
     --------------------------------------------------------------------------- */
  /* 品牌 */
  --ds-color-primary: #00b4d8;
  --ds-color-primary-hover: #0094b1;
  --ds-color-primary-dark: #00364d;
  --ds-color-on-primary: #ffffff;
  --ds-color-primary-wash: #eefbfe;          /* 主色淺底：當前導覽項 */
  --ds-color-primary-wash-30: rgba(238, 251, 254, .3);
  --ds-color-primary-0: rgba(0, 180, 216, 0);
  --ds-color-primary-30: rgba(0, 180, 216, .3);
  --ds-color-primary-40: rgba(0, 180, 216, .4);
  --ds-color-primary-55: rgba(0, 180, 216, .55);
  --ds-color-primary-60: rgba(0, 180, 216, .6);
  --ds-color-primary-80: rgba(0, 180, 216, .8);

  /* Cyan：Tertiary 強調光，用於 hero eyebrow、Cyan CTA 漸層與其陰影 */
  --ds-color-cyan: #33d3ff;
  --ds-color-cyan-40: rgba(51, 211, 255, .4);
  --ds-color-cyan-55: rgba(51, 211, 255, .55);
  --ds-color-cyan-60: rgba(51, 211, 255, .6);

  /* Secondary：次要按鈕、連結、Tabs 選取狀態與部分互動元件 */
  --ds-color-secondary: #482be7;
  --ds-color-secondary-hover: #3217ca;
  --ds-color-secondary-wash: #f2f0fc;
  --ds-color-secondary-wash-30: rgba(242, 240, 252, .3);
  --ds-color-secondary-80: rgba(72, 43, 231, .8);
  --ds-color-on-secondary: #ffffff;

  /* Accent（原 Tertiary Cyan）：僅用於通知、待處理、Live 狀態與小面積提醒，不作大面積背景 */
  --ds-color-accent: #e93a7d;
  --ds-color-accent-deep: #df1965;
  --ds-color-accent-container: #fcf0f5;
  --ds-color-accent-container-hover: #f9d2e1;
  --ds-color-accent-border: #f4bdd2;
  --ds-color-accent-ink: #931042;
  --ds-color-accent-ink-hover: #7d0e38;
  --ds-color-accent-0: rgba(233, 58, 125, 0);
  --ds-color-accent-40: rgba(233, 58, 125, .4);
  --ds-color-accent-50: rgba(233, 58, 125, .5);
  --ds-color-accent-55: rgba(233, 58, 125, .55);
  --ds-color-accent-60: rgba(233, 58, 125, .6);
  --ds-color-on-accent: #ffffff;

  /* 輔助色：深色底標籤上分辨分類用，不做一般用途強調色 */
  --ds-color-coral: #ff6b4a;
  --ds-color-teal: #00bfa5;
  --ds-color-violet: #7047eb;
  /* 加淺版：實際套在 --ds-color-surface-dark 底上的文字色，對比更高更好讀
     （原色對 #191919 的對比度 coral 6.2:1／teal 7.5:1／violet 只有 3.2:1，
     加淺後三色統一拉到 7:1 以上） */
  --ds-color-coral-light: #ffab91;
  --ds-color-teal-light: #5eead4;
  --ds-color-violet-light: #b794f6;

  /* 背景層級：頁面 → 卡片 → 卡片內層 → 內層互動態 */
  --ds-color-page: #ffffff;
  --ds-color-card: #ffffff;
  --ds-color-surface-inner: #f8fafc;
  --ds-color-surface-inner-soft: rgba(248, 250, 252, .7);
  --ds-color-surface-muted: #f1f5f9;         /* 內層 hover／停用底 */
  --ds-color-surface-strong: #e2e8f0;        /* 內層最深一階 */

  /* 文字：text-primary 專供 Heading，text-secondary 為全站內文預設（Body，見 base.css） */
  --ds-color-text-primary: #1e0e62;
  --ds-color-action-ink: #111111;            /* DESIGN.md Action Ink：Ink 按鈕 hover 與外框按鈕的文字／邊框 */
  --ds-color-text-secondary: #6e6d83;
  --ds-color-text-muted: #6b6c7c;            /* placeholder、次要圖示；由 tem3 的 #757687 加深以達 4.5:1 */
  --ds-color-text-disabled: rgba(69, 70, 85, .4);

  /* 邊框 */
  --ds-color-hairline: rgba(226, 232, 240, .6);
  --ds-color-border: #e2e8f0;                /* 需要明確邊界時的實色細線 */

  /* 深色表面（頁尾等反白區塊） */
  --ds-color-surface-dark: #191919;
  --ds-color-on-dark: #ffffff;
  --ds-color-on-dark-strong: rgba(255, 255, 255, .82);
  --ds-color-on-dark-muted: rgba(255, 255, 255, .72);
  --ds-color-on-dark-hairline: rgba(255, 255, 255, .12);

  /* 語意色（沿用 tem3） */
  --ds-color-success: #10b981;
  --ds-color-success-soft: rgba(16, 185, 129, .1);
  --ds-color-success-soft-strong: rgba(16, 185, 129, .15);
  --ds-color-warning: #f59e0b;
  --ds-color-warning-soft: rgba(245, 158, 11, .15);
  --ds-color-error: #ba1a1a;
  --ds-color-error-container: #ffdad6;
  --ds-color-on-error-container: #93000a;

  /* ---------------------------------------------------------------------------
     4. 間距
     --------------------------------------------------------------------------- */
  --ds-space-xxs: 4px;
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 72px;
  --ds-space-4xl: 96px;    /* 行銷版面的區塊節奏 */
  --ds-space-5xl: 128px;
  --ds-container-padding-mobile: 16px;
  --ds-container-padding-desktop: 32px;
  /* 全站內容容器寬度：所有頁面的主要內容區塊（.container / .marketing-container
     等）都應該用這個值，不要各自寫死不同數字。定案沿用 marketing-content.php
     既有的 80rem（1280px），css/page-shell.css 原本引用的 --ds-container-max
     fallback 現在有了真正的定義。 */
  --ds-container-max: 80rem;
  /* 頁首／頁尾為全站共用元件，寬度固定、不隨各頁面的內容容器寬度變動 */
  --ds-header-max-width: 1400px;
  --ds-footer-max-width: 1280px;

  /* ---------------------------------------------------------------------------
     5. 圓角（四級）
     膠囊、Badge、Chip → full；一般卡片與面板 → lg
     --------------------------------------------------------------------------- */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     6. 邊框
     --------------------------------------------------------------------------- */
  --ds-border-width: 1px;
  --ds-border-width-emphasis: 2px;
  --ds-border-width-accent: 4px;
  --ds-border-hairline: 1px solid var(--ds-color-hairline);

  /* ---------------------------------------------------------------------------
     7. 陰影
     --------------------------------------------------------------------------- */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
  --ds-shadow-ambient: 0 1px 8px rgba(0, 0, 0, .04);
  /* 主要卡片、展示面板與需要明確層級的容器（.ds-panel）；由 tem2 的
     .datarize-card-elevated 擷取為全域 token，不在元件內重複硬編碼 */
  --ds-shadow-panel: 0 4px 20px -2px rgba(15, 23, 42, .08), 0 2px 6px -1px rgba(15, 23, 42, .04);
  --ds-shadow-header: 0 6px 20px rgba(0, 0, 0, .16);   /* 固定導覽列捲動後的分層 */
  --ds-shadow-focus: 0 0 0 2px var(--ds-color-primary);
  --ds-shadow-underline: 0 2px 0 0 var(--ds-color-secondary);  /* Tabs 選取底線，統一用 Secondary */
  --ds-shadow-cyan: 0 4px 14px var(--ds-color-cyan-40);
  --ds-shadow-cyan-hover: 0 6px 20px var(--ds-color-cyan-60);

  /* ---------------------------------------------------------------------------
     8. 元件尺寸
     --------------------------------------------------------------------------- */
  --ds-control-height-sm: 36px;
  --ds-control-height-md: 44px;
  --ds-control-height-lg: 52px;
  --ds-control-height-icon: 40px;
  --ds-control-height-icon-sm: 32px;
  --ds-segmented-height: 46px;
  --ds-segmented-item-height: 34px;    /* 分段切換與膠囊分頁共用 */
  --ds-field-height: 34px;
  --ds-field-height-floating: 48px;
  --ds-field-search-width: 240px;
  --ds-navbar-height: 64px;
  --ds-avatar-size: 28px;
  --ds-bottom-nav-width: 448px;

  /* ---------------------------------------------------------------------------
     9. 動態
     --------------------------------------------------------------------------- */
  --ds-duration-fast: 200ms;
  --ds-duration-slow: 300ms;
  --ds-duration-media: 500ms;
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --ds-scale-active: .95;
  --ds-scale-active-icon: .9;
}

@media (max-width: 767px) {
  :root {
    --ds-text-display-hero-size: var(--ds-text-display-hero-mobile-size);
    --ds-text-display-hero-line: var(--ds-text-display-hero-mobile-line);
    --ds-text-headline-lg-size: var(--ds-text-headline-lg-mobile-size);
    --ds-text-headline-lg-line: var(--ds-text-headline-lg-mobile-line);
  }
}