/* ==========================================================================
   祐天兒 UTR Health × 三高小姐姐黛比 — 共用設計 Tokens
   版本：v1.0（2026-10-15）｜階段：02 CIS（source_complete，待使用者審）
   規範說明：brand/02_CIS規範.md（每個數值的理由與來源）
   前綴：--ai-（阿爾發品質標準 v1.0 規定）
   用法：<html data-site="utr"> 或 <html data-site="debby">
   注意：CSS 自訂屬性不能用在 @media 條件裡；斷點數值請照抄。
   ========================================================================== */

:root {
  color-scheme: light; /* 第一期只做淺色模式，避免表單元件被系統深色化 */

  /* ------------------------------------------------------------------------
     1. 色彩原始值（Primitive）— 只在本檔引用，元件請用第 2 節語意 Token
     ------------------------------------------------------------------------ */

  /* 品牌青綠：以 Logo 實測 #5FC1C7 為 400，OKLCH 色相 200.7° 固定延伸 */
  --ai-teal-50:  #EDFAFB;
  --ai-teal-100: #D7F4F5;
  --ai-teal-200: #B2E8EB;
  --ai-teal-300: #89D7DC;
  --ai-teal-400: #5FC1C7; /* Logo 實測色＝品牌主色；白底對比 2.11，不可當文字色 */
  --ai-teal-500: #3DA1A7;
  --ai-teal-600: #247B80; /* 白底 4.98：大字、圖示、焦點框 */
  --ai-teal-700: #176266; /* 白底 7.06：連結、主按鈕、強調文字 */
  --ai-teal-800: #124D50; /* 白底 9.53：hover、深色帶 */
  --ai-teal-900: #103A3C;

  /* 中性色：帶青綠色相 205°，沿用日報 App 的 ink／ground／line */
  --ai-neutral-0:   #FFFFFF;
  --ai-neutral-50:  #F4F8F8;
  --ai-neutral-100: #E2ECED;
  --ai-neutral-200: #D9E8E9;
  --ai-neutral-300: #B3C1C3;
  --ai-neutral-400: #8B9C9E;
  --ai-neutral-500: #6A7F81; /* 白底 4.23：表單邊框（非文字 ≥3:1） */
  --ai-neutral-600: #51686B; /* 白底 5.93：次要文字 */
  --ai-neutral-700: #3A5255;
  --ai-neutral-800: #183437; /* 白底 13.25：正文 ink */
  --ai-neutral-900: #132B2D;

  /* 暖砂色：取自名片英文字的橄欖金色相（約 88°），黛比站小面積點綴用 */
  --ai-warm-50:  #FAF6EE;
  --ai-warm-100: #F4ECD9;
  --ai-warm-200: #E7DABA;
  --ai-warm-400: #BDA978; /* 白底 2.31：只能當裝飾線、引號，不承載資訊 */
  --ai-warm-700: #72613A; /* 白底 6.02：暖色小字 */

  /* 語意色：警示紅、注意琥珀、正常綠 */
  --ai-red-50:  #FFEEEC;
  --ai-red-200: #F6C2BD;
  --ai-red-500: #D24C49;
  --ai-red-600: #AF3C3A;
  --ai-red-700: #90302E;

  --ai-amber-50:  #FFF0DB;
  --ai-amber-200: #EBCBA7;
  --ai-amber-500: #B17000;
  --ai-amber-600: #925B00;
  --ai-amber-700: #784900;

  --ai-green-50:  #E9F8ED;
  --ai-green-200: #B3DDC0;
  --ai-green-500: #2C965D;
  --ai-green-600: #1F7C4B;
  --ai-green-700: #17653C;

  /* ------------------------------------------------------------------------
     2. 語意色彩（Semantic）— 元件一律引用這一層；未來深色模式只覆寫這一層
     ------------------------------------------------------------------------ */
  --ai-color-brand:         var(--ai-teal-400); /* Logo、裝飾面、圖示底 */
  --ai-color-brand-strong:  var(--ai-teal-700); /* 文字、連結、主按鈕 */
  --ai-color-brand-hover:   var(--ai-teal-800);
  --ai-color-brand-soft:    var(--ai-teal-50);
  --ai-color-brand-tint:    var(--ai-teal-100);

  --ai-color-bg:            var(--ai-neutral-0);
  --ai-color-bg-alt:        var(--ai-neutral-50);
  --ai-color-surface:       var(--ai-neutral-0);
  --ai-color-surface-dark:  var(--ai-teal-800);

  --ai-color-text:          var(--ai-neutral-800);
  --ai-color-heading:       var(--ai-neutral-800);
  --ai-color-text-muted:    var(--ai-neutral-600);
  --ai-color-text-on-dark:  var(--ai-neutral-0);
  --ai-color-text-on-dark-muted: var(--ai-teal-200);
  --ai-color-text-on-brand: var(--ai-neutral-800); /* 亮青綠底上用深色字 6.27 */

  --ai-color-link:          var(--ai-teal-700);
  --ai-color-link-hover:    var(--ai-teal-800);

  --ai-color-line:          var(--ai-neutral-200); /* 裝飾分隔線 */
  --ai-color-border:        var(--ai-neutral-300); /* 卡片邊框 */
  --ai-color-border-input:  var(--ai-neutral-500); /* 表單邊框 ≥3:1 */

  --ai-color-focus:         var(--ai-teal-600);
  --ai-color-focus-on-dark: var(--ai-teal-200);

  --ai-color-danger:        var(--ai-red-600);
  --ai-color-danger-soft:   var(--ai-red-50);
  --ai-color-warning:       var(--ai-amber-600);
  --ai-color-warning-soft:  var(--ai-amber-50);
  --ai-color-success:       var(--ai-green-600);
  --ai-color-success-soft:  var(--ai-green-50);
  --ai-color-info:          var(--ai-teal-700);
  --ai-color-info-soft:     var(--ai-teal-50);

  /* 報告三分類（招牌機制）：顏色＋圖形＋文字三重編碼，不可只靠顏色 */
  --ai-status-now-fg:     var(--ai-red-700);    /* 現在處理 */
  --ai-status-now-bg:     var(--ai-red-50);
  --ai-status-now-border: var(--ai-red-200);
  --ai-status-now-icon:   var(--ai-red-500);

  --ai-status-wait-fg:     var(--ai-amber-700); /* 可以先等 */
  --ai-status-wait-bg:     var(--ai-amber-50);
  --ai-status-wait-border: var(--ai-amber-200);
  --ai-status-wait-icon:   var(--ai-amber-500);

  --ai-status-gap-fg:     var(--ai-teal-700);   /* 還少驗什麼：資訊缺口，不用綠色 */
  --ai-status-gap-bg:     var(--ai-teal-50);
  --ai-status-gap-border: var(--ai-teal-600);   /* 虛線框 */
  --ai-status-gap-icon:   var(--ai-teal-600);

  --ai-status-ok-fg:     var(--ai-green-700);   /* 正常／已完成（不屬三分類） */
  --ai-status-ok-bg:     var(--ai-green-50);
  --ai-status-ok-border: var(--ai-green-200);
  --ai-status-ok-icon:   var(--ai-green-500);

  /* 站別強調（預設＝UTR；data-site 覆寫） */
  --ai-accent:        var(--ai-teal-800);
  --ai-accent-soft:   var(--ai-teal-50);
  --ai-accent-line:   var(--ai-teal-400);
  --ai-accent-text:   var(--ai-teal-700);

  /* ------------------------------------------------------------------------
     3. 字型
     ------------------------------------------------------------------------ */
  --ai-font-sans:  "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ai-font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --ai-font-num:   "IBM Plex Sans", "Noto Sans TC", system-ui, sans-serif; /* 大數字、統計 */
  --ai-font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* 報告數值欄 */

  --ai-font-body:    var(--ai-font-sans);
  --ai-font-heading: var(--ai-font-sans);
  --ai-font-display: var(--ai-font-sans);

  --ai-weight-regular: 400;
  --ai-weight-medium:  500;
  --ai-weight-bold:    700;
  --ai-weight-heading: 700;
  --ai-weight-serif:   600;

  /* 字級：390 → 1440 流動；括號為 390／768／1440 實際 px */
  --ai-text-display: clamp(2.125rem, 1.5rem + 2.9vw, 4rem);      /* 35／46／64 */
  --ai-text-h1:      clamp(2rem, 1.55rem + 1.9vw, 3.25rem);      /* 32／39／52 */
  --ai-text-h2:      clamp(1.625rem, 1.35rem + 1.15vw, 2.375rem);/* 26／30／38 */
  --ai-text-h3:      clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem); /* 21／23／26 */
  --ai-text-h4:      clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* 18／19／20 */
  --ai-text-lead:    clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); /* 18／19／20 */
  --ai-text-body:    clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);/* 17／17.4／18 */
  --ai-text-small:   0.9375rem; /* 15 */
  --ai-text-caption: 0.875rem;  /* 14：最小字級，不再更小 */
  --ai-text-num-xl:  clamp(2.5rem, 2rem + 2.2vw, 4rem);          /* 41／49／64 */
  --ai-text-num-md:  1.5rem;

  --ai-leading-tight:   1.2;
  --ai-leading-heading: 1.35;
  --ai-leading-body:    1.75; /* 中文正文 */
  --ai-leading-num:     1.1;

  --ai-tracking-body:    0.02em;
  --ai-tracking-heading: 0.01em;
  --ai-tracking-eyebrow: 0.14em;

  /* ------------------------------------------------------------------------
     4. 間距（4px 基準）
     ------------------------------------------------------------------------ */
  --ai-space-1:  0.25rem; /* 4 */
  --ai-space-2:  0.5rem;  /* 8 */
  --ai-space-3:  0.75rem; /* 12 */
  --ai-space-4:  1rem;    /* 16 */
  --ai-space-5:  1.5rem;  /* 24 */
  --ai-space-6:  2rem;    /* 32 */
  --ai-space-7:  3rem;    /* 48 */
  --ai-space-8:  4rem;    /* 64 */
  --ai-space-9:  6rem;    /* 96 */
  --ai-space-10: 8rem;    /* 128 */

  --ai-space-section: clamp(4rem, 2.5rem + 6vw, 8rem);   /* 64／86／126 */
  --ai-space-gutter:  clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* 21／28／40 */
  --ai-space-stack:   var(--ai-space-5); /* 段落區塊間距 */

  /* ------------------------------------------------------------------------
     5. 版面：斷點與容器
     ------------------------------------------------------------------------ */
  --ai-bp-mobile:  390px;  /* 設計基準；最小支援 320px */
  --ai-bp-tablet:  768px;  /* @media (min-width: 768px) */
  --ai-bp-laptop:  1024px; /* @media (min-width: 1024px) */
  --ai-bp-desktop: 1440px; /* @media (min-width: 1440px) */

  --ai-container:       1200px;
  --ai-container-wide:  1320px;
  --ai-container-prose: 680px; /* 18px 中文約 37 字一行 */
  --ai-grid-columns-mobile: 4;
  --ai-grid-columns-tablet: 8;
  --ai-grid-columns-desktop: 12;

  /* ------------------------------------------------------------------------
     6. 圓角、邊框、陰影
     ------------------------------------------------------------------------ */
  --ai-radius-xs:   4px;
  --ai-radius-sm:   8px;
  --ai-radius-md:   12px;
  --ai-radius-lg:   20px;
  --ai-radius-xl:   28px;
  --ai-radius-pill: 999px;
  --ai-radius-u:    0 0 50% 50% / 0 0 40% 40%; /* Logo「U」形遮罩：上平下半圓（4:5 圖框時為正半圓） */

  --ai-radius-card:   var(--ai-radius-md);
  --ai-radius-button: var(--ai-radius-sm);
  --ai-radius-input:  var(--ai-radius-sm);
  --ai-radius-media:  var(--ai-radius-md);

  --ai-border-width: 1px;
  --ai-border-width-strong: 1.5px;

  --ai-shadow-xs: 0 1px 2px rgba(24, 52, 55, 0.06);
  --ai-shadow-sm: 0 2px 8px rgba(24, 52, 55, 0.06), 0 1px 2px rgba(24, 52, 55, 0.04);
  --ai-shadow-md: 0 8px 24px rgba(24, 52, 55, 0.08);
  --ai-shadow-lg: 0 18px 48px rgba(30, 77, 80, 0.10); /* 沿用日報 App */
  --ai-shadow-card: var(--ai-shadow-xs);
  --ai-shadow-card-hover: var(--ai-shadow-md);

  /* ------------------------------------------------------------------------
     7. 互動元件：按鈕、表單、焦點
     ------------------------------------------------------------------------ */
  --ai-btn-height-sm: 40px;
  --ai-btn-height:    48px; /* 觸控 ≥44px */
  --ai-btn-height-lg: 56px;
  --ai-btn-padding-x: 1.5rem;
  --ai-btn-font-size: 1rem;
  --ai-btn-font-weight: 700;

  --ai-btn-primary-bg:        var(--ai-teal-700);
  --ai-btn-primary-bg-hover:  var(--ai-teal-800);
  --ai-btn-primary-bg-active: var(--ai-teal-900);
  --ai-btn-primary-fg:        var(--ai-neutral-0);

  --ai-btn-secondary-bg:       var(--ai-neutral-0);
  --ai-btn-secondary-bg-hover: var(--ai-teal-50);
  --ai-btn-secondary-fg:       var(--ai-teal-700);
  --ai-btn-secondary-border:   var(--ai-teal-700);

  --ai-btn-bright-bg:       var(--ai-teal-400); /* 亮色按鈕：品牌色底＋深字 */
  --ai-btn-bright-bg-hover: var(--ai-teal-300);
  --ai-btn-bright-fg:       var(--ai-neutral-800);

  --ai-btn-disabled-bg: var(--ai-neutral-100);
  --ai-btn-disabled-fg: var(--ai-neutral-500);

  --ai-input-height:   48px;
  --ai-input-padding-x: 0.875rem;
  --ai-input-bg:       var(--ai-neutral-0);
  --ai-input-bg-disabled: var(--ai-neutral-50);
  --ai-input-fg:       var(--ai-neutral-800);
  --ai-input-placeholder: var(--ai-neutral-600);
  --ai-input-border:   var(--ai-neutral-500);
  --ai-input-border-hover: var(--ai-teal-600);
  --ai-input-border-focus: var(--ai-teal-700);
  --ai-input-border-error: var(--ai-red-600);
  --ai-input-border-success: var(--ai-green-600);

  --ai-focus-width:  3px;
  --ai-focus-offset: 2px;
  --ai-focus-ring:   0 0 0 var(--ai-focus-offset) var(--ai-neutral-0), 0 0 0 calc(var(--ai-focus-offset) + var(--ai-focus-width)) var(--ai-color-focus);

  /* ------------------------------------------------------------------------
     8. 動態（L2：CSS＋原生 JS）
     ------------------------------------------------------------------------ */
  --ai-dur-instant: 100ms;
  --ai-dur-fast:    160ms; /* hover、按壓 */
  --ai-dur-base:    240ms; /* 展開、切換 */
  --ai-dur-reveal:  640ms; /* 捲動進場 */
  --ai-dur-slow:    900ms; /* 首頁主要互動焦點 */
  --ai-stagger:     80ms;  /* 群組依序進場，最多 6 個 */

  --ai-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ai-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ai-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --ai-reveal-distance: 24px;  /* 手機改 16px，見下方 */
  --ai-reveal-scale:    0.98;  /* 圖片進場 */
  --ai-hover-lift:      -2px;

  /* ------------------------------------------------------------------------
     9. 圖層
     ------------------------------------------------------------------------ */
  --ai-z-base: 1;
  --ai-z-sticky: 100;
  --ai-z-dropdown: 200;
  --ai-z-overlay: 900;
  --ai-z-modal: 1000;
  --ai-z-toast: 1100;

  /* ------------------------------------------------------------------------
     10. 影像比例
     ------------------------------------------------------------------------ */
  --ai-ratio-portrait: 4 / 5;
  --ai-ratio-square:   1 / 1;
  --ai-ratio-scene:    3 / 2;
  --ai-ratio-banner:   16 / 9;
  --ai-ratio-hero-wide: 21 / 9;
  --ai-hero-media-width: 40%;
}

@media (max-width: 767.98px) {
  :root { --ai-reveal-distance: 16px; }
}

/* ==========================================================================
   站別覆寫：同一套 Tokens，以「強調比例」區分
   ========================================================================== */

/* UTR Health：冷靜可信——深青綠帶、留白多、邊框代替陰影、無襯線標題 */
[data-site="utr"] {
  --ai-accent:      var(--ai-teal-800);
  --ai-accent-soft: var(--ai-teal-50);
  --ai-accent-line: var(--ai-teal-400);
  --ai-accent-text: var(--ai-teal-700);

  --ai-font-heading: var(--ai-font-sans);
  --ai-font-display: var(--ai-font-sans);
  --ai-weight-heading: 700;

  --ai-radius-card:   var(--ai-radius-md);   /* 12 */
  --ai-radius-button: var(--ai-radius-sm);   /* 8 */
  --ai-radius-media:  var(--ai-radius-md);
  --ai-shadow-card:   var(--ai-shadow-xs);
  --ai-shadow-card-hover: var(--ai-shadow-sm);

  --ai-hero-media-width: 40%; /* 主視覺以流程／團隊／情境為主，人像不超過首屏 1/3 */
  --ai-section-alt-bg: var(--ai-neutral-50);
}

/* 三高小姐姐黛比：親切有人味——暖砂點綴、人像比例高、襯線標題、圓潤 */
[data-site="debby"] {
  --ai-accent:      var(--ai-warm-400);
  --ai-accent-soft: var(--ai-warm-50);
  --ai-accent-line: var(--ai-warm-400);
  --ai-accent-text: var(--ai-warm-700);

  --ai-font-heading: var(--ai-font-serif);
  --ai-font-display: var(--ai-font-serif);
  --ai-weight-heading: var(--ai-weight-serif);

  --ai-radius-card:   var(--ai-radius-lg);   /* 20 */
  --ai-radius-button: var(--ai-radius-pill);
  --ai-radius-media:  var(--ai-radius-xl);
  --ai-shadow-card:   var(--ai-shadow-md);
  --ai-shadow-card-hover: var(--ai-shadow-lg);

  --ai-hero-media-width: 48%; /* 人像佔首屏約一半 */
  --ai-section-alt-bg: var(--ai-warm-50);
}

/* ==========================================================================
   全域基礎規則（兩站共用）
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ai-focus-width) solid var(--ai-color-focus);
  outline-offset: var(--ai-focus-offset);
}
:where(.ai-on-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--ai-color-focus-on-dark);
}

/* 動畫掛點：只有 JS 成功載入（html.ai-js）才先隱藏，JS 失敗時內容照常可讀 */
.ai-js [data-ai-motion="reveal"] {
  opacity: 0;
  transform: translate3d(0, var(--ai-reveal-distance), 0);
  transition:
    opacity var(--ai-dur-reveal) var(--ai-ease-out),
    transform var(--ai-dur-reveal) var(--ai-ease-out);
  transition-delay: calc(var(--ai-reveal-index, 0) * var(--ai-stagger));
}
.ai-js [data-ai-motion="reveal"].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ai-dur-fast: 0ms;
    --ai-dur-base: 0ms;
    --ai-dur-reveal: 0ms;
    --ai-dur-slow: 0ms;
    --ai-stagger: 0ms;
    --ai-reveal-distance: 0px;
    --ai-reveal-scale: 1;
    --ai-hover-lift: 0px;
  }
  html { scroll-behavior: auto; }
  .ai-js [data-ai-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }
}