/* =============================================== */
/*  VARIABLES.CSS                                  */
/*  Design tokens — 全站可調整的單一來源            */
/*  改設計、改品牌色，只需修改本檔                  */
/* =============================================== */

:root {

  /* ---------- 1. COLORS ---------- */

  /* 主色：深海軍藍家族 */
  --navy:      #1B3A6B;   /* 主要品牌色 */
  --navy-d:    #0F2548;   /* 深色，用於 footer / dark section */
  --navy-xl:   #EEF2FB;   /* 極淺，用於 hero 左側、淺色背景區 */

  /* 強調色：精品紅 */
  --red:       #C0222A;   /* 義式斜體強調、按鈕、紅色底線 */
  --red-d:     #9A1A21;   /* hover 深紅 */

  /* 中性色 */
  --off:       #F6F7FB;   /* 灰白底，business / process 區段 */
  --line:      #DDE3EF;   /* 卡片邊線、表單邊框、分隔線 */
  --line-l:    #ECEFF6;   /* 更淡的邊線 */
  --gtext:     #3D4F6E;   /* 內文灰藍色，比黑色更柔和 */
  --ink:       #1A2540;   /* 標題深色，比 navy 更暗 */
  --muted:     #7A8AA8;   /* 次要文字、eyebrow 灰色版本 */

  /* 功能色 */
  --white:     #FFFFFF;
  --black:     #000000;

  /* 透明色（用於 overlay / gradient） */
  --navy-90:   rgba(15, 37, 72, 0.90);
  --navy-70:   rgba(15, 37, 72, 0.70);
  --navy-40:   rgba(15, 37, 72, 0.40);
  --navy-10:   rgba(15, 37, 72, 0.10);


  /* ---------- 2. TYPOGRAPHY ---------- */

  /* 字體家族 */
  --ff-serif-en:   'Playfair Display', 'Noto Serif TC', Georgia, serif;
  --ff-serif-tc:   'Noto Serif TC', 'Playfair Display', Georgia, serif;
  --ff-sans-tc:    'Noto Sans TC', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-sans-en:    'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 字級 — 採模組化比例 (1.25 major third) */
  --fs-xs:     0.75rem;    /* 12px — 標籤、版權 */
  --fs-sm:     0.875rem;   /* 14px — eyebrow、卡片副文 */
  --fs-base:   1rem;       /* 16px — 內文 */
  --fs-md:     1.125rem;   /* 18px — 大內文、 lead */
  --fs-lg:     1.375rem;   /* 22px — 卡片標題 */
  --fs-xl:     1.75rem;    /* 28px — 小區段標題 */
  --fs-2xl:    2.25rem;    /* 36px — 區段標題 */
  --fs-3xl:    3rem;       /* 48px — 大區段標題 */
  --fs-4xl:    4rem;       /* 64px — Hero 主標 */
  --fs-5xl:    5.5rem;     /* 88px — RENOS watermark */

  /* 字重 */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 行高 */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-loose:   1.8;

  /* 字距 */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.12em;   /* eyebrow 字距 */
  --ls-widest:   0.2em;


  /* ---------- 3. SPACING ---------- */

  /* 全站間距系統 (4px 為基準) */
  --sp-1:    0.25rem;   /* 4px */
  --sp-2:    0.5rem;    /* 8px */
  --sp-3:    0.75rem;   /* 12px */
  --sp-4:    1rem;      /* 16px */
  --sp-5:    1.5rem;    /* 24px */
  --sp-6:    2rem;      /* 32px */
  --sp-7:    2.5rem;    /* 40px */
  --sp-8:    3rem;      /* 48px */
  --sp-9:    4rem;      /* 64px */
  --sp-10:   5rem;      /* 80px */
  --sp-11:   6rem;      /* 96px */
  --sp-12:   8rem;      /* 128px */


  /* ---------- 4. LAYOUT ---------- */

  --container-max:   1280px;
  --container-pad:   1.5rem;   /* 桌機左右 padding */
  --container-pad-m: 1.25rem;  /* 手機左右 padding */

  --section-py:      var(--sp-11);   /* 區段上下 padding 桌機 */
  --section-py-m:    var(--sp-8);    /* 區段上下 padding 手機 */

  --header-h:        80px;   /* 固定導覽列高度 */
  --header-h-m:      64px;   /* 手機版導覽列高度 */


  /* ---------- 5. BORDER & RADIUS ---------- */

  --bw:        1px;
  --bw-2:      2px;
  --bw-thick:  3px;

  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;


  /* ---------- 6. SHADOWS ---------- */

  --shadow-xs:   0 1px 2px rgba(15, 37, 72, 0.04);
  --shadow-sm:   0 2px 6px rgba(15, 37, 72, 0.06);
  --shadow:      0 4px 16px rgba(15, 37, 72, 0.08);
  --shadow-md:   0 8px 28px rgba(15, 37, 72, 0.10);
  --shadow-lg:   0 16px 48px rgba(15, 37, 72, 0.14);
  --shadow-nav:  0 1px 0 rgba(27, 58, 107, 0.06), 0 4px 16px rgba(15, 37, 72, 0.04);


  /* ---------- 7. TRANSITIONS ---------- */

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --t-fast:   150ms var(--ease);
  --t:        250ms var(--ease);
  --t-slow:   400ms var(--ease-out);


  /* ---------- 8. Z-INDEX SCALE ---------- */

  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    50;
  --z-header:    100;
  --z-overlay:   500;
  --z-modal:     1000;
}


/* ---------- 9. BASE BODY TYPOGRAPHY ---------- */

body {
  font-family: var(--ff-sans-tc);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--gtext);
  background-color: var(--white);
}

/* 主要標題使用襯線中文字 + Playfair 英文 */
h1, h2, h3, h4 {
  font-family: var(--ff-serif-tc);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

h5, h6 {
  font-family: var(--ff-sans-tc);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* 連結 hover */
a {
  transition: color var(--t-fast);
}

a:hover {
  color: var(--red);
}