/* =========================================================================
   ASUKA — Design Tokens
   -------------------------------------------------------------------------
   這是整站唯一的「設計變數」來源。
   想改品牌色、字級、圓角、間距、容器寬度，全部只改這個檔案。
   ========================================================================= */

:root {
  /* ---------- 品牌色 Brand ---------- */
  --brand:            #EE7623;   /* ASUKA 主橘 */
  --brand-strong:     #D2600F;
  --brand-soft:       #FFB877;
  --brand-tint:       rgba(238, 118, 35, 0.12);

  --accent:           #37B6C8;   /* 科技藍（sensing / IoT 用） */
  --accent-soft:      #8AD9E4;

  /* ---------- 深色底 Ink（Aptiv 式深色版面） ---------- */
  /* v1.0 A 版：原本的 #05090F 幾乎是純黑，主管反應「太黑」。
     改成帶藍的石墨色，暗度降低但仍然穩重，橘色在上面更亮。 */
  --ink-900:          #111823;
  --ink-850:          #17202C;
  --ink-800:          #1D2835;
  --ink-700:          #26333F;
  --ink-600:          #33414F;
  --ink-500:          #4A5867;

  /* ---------- 淺色底 Surface ---------- */
  --surface-0:        #FFFFFF;
  --surface-1:        #F5F7F9;
  --surface-2:        #EAEEF2;
  --surface-3:        #DCE2E8;

  /* ---------- 文字 Text ---------- */
  --text-on-dark:     #FFFFFF;
  --text-on-dark-2:   rgba(255, 255, 255, 0.72);
  --text-on-dark-3:   rgba(255, 255, 255, 0.52);
  --text-on-light:    #101922;
  --text-on-light-2:  #4A5765;
  --text-on-light-3:  #78848F;

  /* ---------- 線條 Line ---------- */
  --line-dark:        rgba(255, 255, 255, 0.14);
  --line-light:       rgba(16, 25, 34, 0.12);

  /* ---------- 字體 Typography ---------- */
  --font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* 標題用 Archivo：Aptiv 的品牌字體是 Formular（商業授權、且不宜直接照抄
     同業的品牌字），Archivo 是免費字體裡最接近那種工業幾何感的一支，
     大字時骨架夠硬，寬度也比 Inter 開，正是主管說的「Aptiv 那個感覺」。
     內文維持 Inter，閱讀性較好；中文一律 Noto Sans TC。 */
  --font-display: "Archivo", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
                  "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

  /* 流體字級：小螢幕→大螢幕自動縮放 */
  /* v1.0：主管反應標題偏小，整體字級上調一階。
     區塊標題（--fs-h2）幅度最大，因為那正是被點名的地方。 */
  --fs-display: clamp(2.9rem, 1.4rem + 5.2vw, 6.0rem);
  --fs-h1:      clamp(2.4rem, 1.3rem + 3.8vw, 4.2rem);
  --fs-h2:      clamp(2.0rem, 1.25rem + 2.8vw, 3.4rem);
  --fs-h3:      clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
  --fs-h4:      clamp(1.1rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.75rem;
  --fs-eyebrow-lg: 1.125rem;   /* v1.40：各區塊眉標（.eyebrow）放大為 1.5 倍；頁尾標題、選單小標等仍用 --fs-eyebrow */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:   -0.025em;   /* 大字收緊一點，這是 Aptiv / Samsara 共同的特徵 */

  /* ---------- 間距 Spacing ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* 區塊上下留白（整站節奏） */
  --section-y: clamp(56px, 6vw, 112px);

  /* ---------- 版面 Layout ---------- */
  --container:      1320px;   /* 主容器最大寬 */
  --container-narrow: 900px;  /* 文章型內容寬 */
  --gutter:         clamp(20px, 4vw, 48px);
  --header-h:       76px;

  /* ---------- 圓角 / 陰影 / 動態 ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(5, 9, 15, .08);
  --shadow:    0 8px 24px rgba(5, 9, 15, .10);
  --shadow-lg: 0 24px 60px rgba(5, 9, 15, .18);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .32s;
  --flip-dur: .9s;                           /* v1.28 翻牌卡翻面時間（原 .55s，太快看了不舒服） */
  --flip-ease: cubic-bezier(.45, .05, .25, 1);   /* 慢進慢出 */

  --z-header: 100;
  --z-menu:   110;
  --z-modal:  200;
}

/* 想整站換風格時，只要覆寫上面的變數即可，例如：
   :root { --brand: #0A5CFF; --radius: 0px; --container: 1180px; }
*/