/* ============================================================
   SiteVance — Design Tokens
   對應 design.md v3.1 附錄 A
   ------------------------------------------------------------
   規則：任何顏色、字級、間距只要沒寫在這個檔案，
        就不准出現在頁面上。守住這條，三年後改版還是乾淨的。
   ============================================================ */

:root{
  /* ---- 表面（v3.1 淺灰底）---- */
  --sv-bg-base:      #EFF2F7;  /* 頁面主底：淺灰藍 */
  --sv-bg-card:      #FFFFFF;  /* 卡片／面板／表單 */
  --sv-bg-sunken:    #E7ECF4;  /* 交替區塊 */
  --sv-bg-teal-tint: #E4F4F4;  /* 重點卡片底 */
  --sv-bg-ink:       #09132E;  /* 深色錨點（全站限 2 個） */
  --sv-bg-ink-deep:  #050A16;  /* 頁尾 */

  /* ---- 格線與邊框 ----
     白卡對灰底只有 1.12 落差，看不出邊界 → 卡片一定要配格線 */
  --sv-grid-line:          #DCE3EE;
  --sv-border-default:     #D5DDEA;
  --sv-border-interactive: #7E8CA8;  /* 灰底 3.02 / 白卡 3.39，達 UI 3:1 */

  /* ---- 文字（灰底 / 白卡）---- */
  --sv-text-primary:     #09132E;  /* 16.36 / 18.35 */
  --sv-text-body:        #3D4B69;  /*  7.77 /  8.72 */
  --sv-text-muted:       #5A6883;  /*  5.00 /  5.61 */
  --sv-text-placeholder: #8A96AC;  /* 僅 placeholder */
  --sv-text-on-ink:      #FFFFFF;
  --sv-text-on-ink-body: #C3CCDE;

  /* ---- 品牌青（700 當字、600 當邊、400 以下只當圖）---- */
  --sv-teal-100:#E4F4F4;
  --sv-teal-300:#8FD8D8;  /* 灰底 1.62 ✕ 僅深色區塊 */
  --sv-teal-400:#67C2C3;  /* Logo 原色，灰底 1.86 ✕ 只當圖形 */
  --sv-teal-500:#4AA8AA;  /* 灰底 2.50 ✕ 圖示填色 */
  --sv-teal-600:#3D9497;  /* 灰底 3.18 ✓ UI 邊界、focus */
  --sv-teal-700:#2E7679;  /* 灰底 4.70 ✓ 文字連結（離 4.5 只剩 0.2，底色別再調暗） */
  --sv-teal-800:#276467;  /* 灰底 6.03 ✓ Eyebrow */

  /* ---- 語意色（因淺灰底加深過，白底版的 5.02 在灰底只剩 4.47）---- */
  --sv-success:#127035;  /* 灰底 5.51 */
  --sv-warning:#9A4708;  /* 灰底 5.71 */
  --sv-danger: #B91C1C;  /* 灰底 5.77 */

  /* ---- 陰影（墨藍調，不用純黑；有格線撐邊界所以收斂一階）---- */
  --sv-shadow-sm:  0 1px 2px 0 rgba(9,19,46,.05);
  --sv-shadow-md:  0 4px 16px -6px rgba(9,19,46,.10);
  --sv-shadow-lg:  0 18px 44px -14px rgba(9,19,46,.18);
  --sv-shadow-xl:  0 28px 70px -18px rgba(9,19,46,.24);
  --sv-shadow-ink: 0 8px 24px -8px rgba(9,19,46,.32);
  --sv-shadow-teal:0 8px 24px -8px rgba(103,194,195,.5);

  /* ---- 漸層 ---- */
  --sv-gradient-hero:radial-gradient(110% 70% at 50% 0%,rgba(103,194,195,.20) 0%,rgba(239,242,247,0) 62%);
  --sv-gradient-ink:linear-gradient(180deg,#09132E 0%,#050A16 100%);
  --sv-gradient-divider:linear-gradient(90deg,transparent,rgba(103,194,195,.6),transparent);

  /* ---- 圓角 ---- */
  --sv-radius-sm:8px; --sv-radius-md:12px; --sv-radius-lg:16px;
  --sv-radius-xl:24px; --sv-radius-full:999px;

  /* ---- 間距（4px 基準）---- */
  --sv-space-1:4px;   --sv-space-2:8px;   --sv-space-3:12px;
  --sv-space-4:16px;  --sv-space-5:24px;  --sv-space-6:32px;
  --sv-space-8:48px;  --sv-space-10:64px; --sv-space-12:80px;
  --sv-space-16:120px;--sv-space-20:160px;

  /* ---- 動效 ---- */
  --sv-ease-out:cubic-bezier(.22,1,.36,1);
  --sv-ease-in-out:cubic-bezier(.65,0,.35,1);
  --sv-dur-fast:150ms; --sv-dur-base:240ms; --sv-dur-slow:420ms;

  /* ---- 字型 ---- */
  --sv-font-h:"Sora",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  --sv-font-b:"Inter",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
}

/* 中文標題不用負字距（負值只套用在英數） */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3{ letter-spacing:0; }

/* 全站基底 */
body{
  background:var(--sv-bg-base);
  color:var(--sv-text-body);
  font-family:var(--sv-font-b);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--sv-font-h); color:var(--sv-text-primary); }
p{ line-height:1.8; }  /* 中文行高要比英文高，這是可讀性不是留白美學 */