/* 
=========================================================
  Figma custom variables
  This file contains the CSS custom properties (variables)
  extracted from Figma designs for the official website.
=========================================================
*/

/* Primitive Variables */
:root {
  /* Sizes */
  --Size-20: 20px;
  --Size-22: 22px;
  --Size-24: 24px;
  --Size-32: 32px;
  --Size-36: 36px;
  --Size-40: 40px;
  --Size-48: 48px;
  --Size-56: 56px;
  --Size-72: 72px;
  --Size-84: 84px;
  --Size-96: 96px;

  /* Line Heights */
  --LineHeight-20: 30px;
  --LineHeight-22: 32px;
  --LineHeight-24: 36px;
  --LineHeight-36: 54px;
  --LineHeight-40: 56px;
  --LineHeight-48: 60px;
  --LineHeight-56: 72px;
  --LineHeight-72: 90px;
  --LineHeight-84: 100px;
  --LineHeight-96: 120px;

  /* Weights */
  --Weight-Regular: 400;
  --Weight-Medium: 500;
  --Weight-Bold: 700;

  /* Letter Spacing */
  --LetterSpacing-Tight: -0.02em;
  --LetterSpacing-Normal: 0em;
  --LetterSpacing-Wide: 0.02em;

  /* Spcacing */
  --Spacing-4: 4px;
  --Spacing-8: 8px;
  --Spacing-16: 16px;
  --Spacing-24: 24px;
  --Spacing-32: 32px;
  --Spacing-40: 40px;
  --Spacing-48: 48px;
  --Spacing-64: 64px;
  --Spacing-80: 80px;
  --Spacing-160: 160px;
  --Spacing-300: 300px;

  /* Colors */
  --Color-BlueGreen-100: #E6F3F4;
  --Color-BlueGreen-500: #00838F;
  --Color-BlueGreen-600: #006064;
  --Color-GrayV2-200: #F5F5F7;
  --Color-GrayV2-300: #AAB0BC;
  --Color-GrayV2-400: #86868B;
  --Color-GrayV2-600: #6E6E73;
  --Color-GrayV2-900: #1D1D1F;
  --Color-BlueV2-White: #FFFFFF;
  --Color-BlueGreen-White: #FFFFFF;
  --Color-Optional-Transparent: transparent;
  --Color-Optional-Overlay: #34383D;
  --Color-Optional-Semi-Transparent: rgba(255, 255, 255, 0.8);
  --Color-Status-Success: #34C759;
  --Color-Status-Warning: #FF9500;
  --Color-Status-Danger: #E2626B;

  /* Misc */
  --Radius-4: 4px;
  --Radius-8: 8px;
  --Radius-16: 16px;
  --Radius-999: 999px;
  --Effect-Blur-5: blur(5px);
  --Effect-Blur-10: blur(10px);
  --Effect-Blur-20: blur(20px);
}

/* Semantic - Mode 1 */
:root {
  --Heading-Display-Desktop: var(--Size-72);
  --Heading-Display-Weight: var(--Weight-Bold);
  --Heading-Display-LineHeight: var(--LineHeight-84);
  --Heading-Display-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-Title-Desktop: var(--Size-48);
  --Heading-Title-Weight: var(--Weight-Bold);
  --Heading-Title-LineHeight: var(--LineHeight-56);
  --Heading-Title-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H1-Desktop: var(--Size-72);
  --Heading-H1-Weight: var(--Weight-Bold);
  --Heading-H1-LineHeight: var(--LineHeight-72);
  --Heading-H1-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H2-Desktop: var(--Size-48);
  --Heading-H2-Weight: var(--Weight-Bold);
  --Heading-H2-LineHeight: var(--LineHeight-48);
  --Heading-H2-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H3-Desktop: var(--Size-36);
  --Heading-H3-Weight: var(--Weight-Bold);
  --Heading-H3-LineHeight: var(--LineHeight-40);
  --Heading-H3-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H4-Desktop: var(--Size-32);
  --Heading-H4-Weight: var(--Weight-Bold);
  --Heading-H4-LineHeight: var(--LineHeight-36);
  --Heading-H4-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H5-Desktop: var(--Size-24);
  --Heading-H5-Weight: var(--Weight-Bold);
  --Heading-H5-LineHeight: var(--LineHeight-24);
  --Heading-H5-LetterSpacing: var(--LetterSpacing-Tight);
  --Heading-H6-Desktop: var(--Size-20);
  --Heading-H6-Weight: var(--Weight-Bold);
  --Heading-H6-LineHeight: var(--LineHeight-20);
  --Heading-H6-LetterSpacing: var(--LetterSpacing-Wide);
  --Heading-MainTitle-Desktop: var(--Size-96);
  --Heading-MainTitle-Weight: var(--Weight-Bold);
  --Heading-MainTitle-LineHeight: var(--LineHeight-96);
  --Heading-MainTitle-LetterSpacing: var(--LetterSpacing-Tight);
  --Body-Lead-Desktop: var(--Size-36);
  --Body-Lead-Weight-Regular: var(--Weight-Medium);
  --Body-Lead-Weight-Bold: var(--Weight-Bold);
  --Body-Lead-LineHeight: var(--LineHeight-36);
  --Body-Lead-LetterSpacing: var(--LetterSpacing-Normal);
  --Body-Main-Desktop: var(--Size-24);
  --Body-Main-Weight-Regular: var(--Weight-Regular);
  --Body-Main-Weight-Bold: var(--Weight-Bold);
  --Body-Main-LineHeight: var(--LineHeight-24);
  --Body-Main-LetterSpacing: var(--LetterSpacing-Normal);
  --Body-Small-Desktop: var(--Size-22);
  --Body-Small-Weight: var(--Weight-Regular);
  --Body-Small-LineHeight: var(--LineHeight-22);
  --Body-Small-LetterSpacing: var(--LetterSpacing-Normal);
  --UI-Button-Desktop: var(--Size-24);
  --UI-Button-Weight: var(--Weight-Bold);
  --UI-Button-LineHeight: var(--LineHeight-24);
  --UI-Button-LetterSpacing: var(--LetterSpacing-Normal);
  --UI-Link-Desktop: var(--Size-24);
  --UI-Link-Weight: var(--Weight-Medium);
  --UI-Link-LineHeight: var(--LineHeight-24);
  --UI-Link-LetterSpacing: var(--LetterSpacing-Normal);
  --Brand-Action: var(--Color-BlueGreen-500);
  --Brand-Action-Hover: var(--Color-BlueGreen-600);
  --Brand-Action-Subtle: var(--Color-BlueGreen-100);
  --Brand-Action-Disable-Fill: var(--Color-GrayV2-300);
  --Brand-Table-light: var(--Color-BlueGreen-100);
  --Brand-Table-middle: var(--Color-BlueGreen-500);
  --Brand-Table-dark: var(--Color-BlueGreen-600);
  --Text-Heading: var(--Color-GrayV2-900);
  --Text-Body: var(--Color-GrayV2-600);
  --Text-Muted: var(--Color-GrayV2-300);
  --Text-On-Color: var(--Color-BlueV2-White);
  --Text-Disable: var(--Color-GrayV2-600);
  --Text-Brand: var(--Color-BlueGreen-500);
  --Text-Brand-Dark: var(--Color-BlueGreen-600);
  --Surface-Page: var(--Color-GrayV2-200);
  --Surface-Section: var(--Color-BlueGreen-White);
  --Surface-Border: var(--Color-GrayV2-300);
  --Surface-Section-Dark: var(--Color-GrayV2-900);
  --Surface-Transparent: var(--Color-Optional-Transparent);
  --Surface-Mask: var(--Color-Optional-Overlay);
  --Surface-Section-Blur: var(--Color-Optional-Semi-Transparent);
  --Surface-Section-Blur-Dark: var(--Color-Optional-Semi-Transparent);
  --Space-Inset-XS: var(--Spacing-4);
  --Space-Inset-S: var(--Spacing-8);
  --Space-Inset-M: var(--Spacing-16);
  --Space-Inset-L: var(--Spacing-24);
  --Space-Stack-Tight: var(--Spacing-8);
  --Space-Stack-Normal: var(--Spacing-16);
  --Space-Stack-Wide: var(--Spacing-32);
  /* ========================================
     Responsive Section Spacing

     Section-level tokens use clamp() for fluid scaling.
     Mobile min → fluid vw → Desktop max

     --Space-Section-Gap-Desktop:        40px → 5vw  → 80px
     --Space-Section-Gap-Desktop-Large:  48px → 11vw → 160px
     --Space-Page-Gutter-Desktop:        24px → 20vw → 300px

     Inset and Stack tokens remain static (4px-32px)
     as they are too small to benefit from responsive scaling.
     ======================================== */
  --Space-Section-Gap-Desktop: clamp(40px, 5vw, 80px);
  --Space-Section-Gap-Desktop-Large: clamp(48px, 11vw, 160px);
  --Space-Page-Gutter-Desktop: clamp(24px, 20vw, 300px);
  --Radius-Small: var(--Radius-4);
  --Radius-Medium: var(--Radius-8);
  --Radius-Large: var(--Radius-16);
  --Radius-Full: var(--Radius-999);
  --Status-Yes: var(--Color-Status-Success);
  --Status-No: var(--Color-Status-Danger);
  --Status-Warn: var(--Color-Status-Warning);
  --Effects-Blur-Small: var(--Effect-Blur-5);
  --Effects-Blur-Middle: var(--Effect-Blur-10);
  --Effects-Blur-Haevy: var(--Effect-Blur-20);
  --Chart-Primary: var(--Color-BlueGreen-500);
  --Chart-Second: var(--Color-GrayV2-300);
  --Chart-background: var(--Color-BlueGreen-White);
  --Brand-Navigator: var(--Color-GrayV2-900);
  --Brand-Navigator-Hover: var(--Color-BlueGreen-600);
}

/* ========================================
   Responsive Typography Classes

   Each class defines the full typography style:
   font-size (with !important), font-weight, line-height, letter-spacing.

   line-height uses unitless ratios (derived from Figma tokens)
   so it scales proportionally with clamp() font-size.

   font-weight / line-height / letter-spacing are set WITHOUT
   !important so Bootstrap utilities (fw-bold, fw-normal, lh-*)
   can override when needed.
   ======================================== */

/* Heading: Display — 72px desktop, bold, tight spacing */
.rwd-display {
  font-size: clamp(36px, 7vw, var(--Heading-Display-Desktop, 72px)) !important;
  font-weight: var(--Heading-Display-Weight, 700);
  line-height: 1.25;  /* Figma: 90/72 = 1.25 */
  letter-spacing: var(--Heading-Display-LetterSpacing, -0.02em);
}

/* Heading: Title — 48px desktop, bold, tight spacing */
.rwd-title {
  font-size: clamp(28px, 5vw, var(--Heading-Title-Desktop, 48px)) !important;
  font-weight: var(--Heading-Title-Weight, 700);
  line-height: 1.25;  /* Figma: 60/48 = 1.25 */
  letter-spacing: var(--Heading-Title-LetterSpacing, -0.02em);
}

/* Heading: H3 — 36px desktop, bold, tight spacing */
.rwd-h3 {
  font-size: clamp(24px, 5vw, var(--Heading-H3-Desktop, 36px)) !important;
  font-weight: var(--Heading-H3-Weight, 700);
  line-height: 1.6667;  /* Figma: 60/36 = 1.6667 */
  letter-spacing: var(--Heading-H3-LetterSpacing, -0.02em);
}

/* Heading: H4 — 32px desktop, bold, tight spacing */
.rwd-h4 {
  font-size: clamp(22px, 4vw, var(--Heading-H4-Desktop, 32px)) !important;
  font-weight: var(--Heading-H4-Weight, 700);
  line-height: 1.25;  /* Figma: 40/32 = 1.25 */
  letter-spacing: var(--Heading-H4-LetterSpacing, -0.02em);
}

/* Body: Main — 24px desktop, regular weight */
.rwd-body-main {
  font-size: clamp(19px, 2vw, var(--Body-Main-Desktop, 24px)) !important;
  font-weight: var(--Body-Main-Weight-Regular, 400);
  line-height: 1.5;  /* Figma: 36/24 = 1.5 */
  letter-spacing: var(--Body-Main-LetterSpacing, 0em);
  /* letter-spacing: -0.02em;  */
}

/* Body: Main Bold — 24px desktop, bold weight */
.rwd-body-main-bold {
  font-size: clamp(19px, 2vw, var(--Body-Main-Desktop, 24px)) !important;
  font-weight: 700;
  line-height: 1.5;  /* Figma: 36/24 = 1.5 */
  letter-spacing: var(--Body-Main-LetterSpacing, 0em);
}

/* Body: Small — 22px desktop, regular weight 400 (per Figma --Body-Small-Weight) */
.rwd-body-small {
  font-size: clamp(17px, 2vw, var(--Body-Small-Desktop, 22px)) !important;
  font-weight: var(--Body-Small-Weight, 400);
  line-height: 1.5;  /* Figma: 33/22 = 1.5 */
  letter-spacing: var(--Body-Small-LetterSpacing, 0em);
}

/* Table: Main — 20px desktop, bold, wide spacing */
.rwd-table-main {
  font-size: clamp(15px, 1.5vw, var(--Heading-H6-Desktop, 20px)) !important;
  font-weight: var(--Heading-H6-Weight, 700);
  line-height: 1.5;  /* Figma: 30/20 = 1.5 */
  letter-spacing: var(--Heading-H6-LetterSpacing, 0.02em);
}

/* Table: Small — 18px desktop, regular weight */
.rwd-table-small {
  font-size: clamp(14px, 1.5vw, 18px) !important;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0em;
}

.rwd-size-36 { font-size: clamp(24px, 2.5vw, 36px) !important; }
.rwd-size-32 { font-size: clamp(22px, 4vw, 28px) !important; line-height: 1.4286; letter-spacing: -0.02em; }  /* Figma: 40/28 = 1.4286、tracking -0.02em */
.rwd-size-28 { font-size: clamp(20px, 3vw, 24px) !important; line-height: 1.5; letter-spacing: -0.02em; }  /* Figma: 36/24 = 1.5 */
.rwd-size-24 { font-size: clamp(18px, 2vw, 24px) !important; }

/* ================================================
   Anti-Orphan Typography
   text-wrap: balance  — 標題：自動均衡行寬，避免最後一行僅剩 1-2 字
   text-wrap: pretty   — 段落：瀏覽器自動調整換行，避免孤字
   支援：Chrome 117+, Edge 117+, Safari 17.4+, Firefox 121+
   不支援的瀏覽器會忽略此屬性，無副作用
   ================================================ */

h1, h2, h3, h4, h5, h6,
.rwd-display,
.rwd-title,
.rwd-h3,
.rwd-h4 {
  text-wrap: balance;
}

p, li, dd, figcaption, blockquote, address,
.rwd-body-main,
.rwd-body-small,
.rwd-table-main,
.rwd-table-small {
  text-wrap: pretty;
}

/* ========================================
   Responsive Spacing Utilities

   Convenience classes using responsive spacing tokens.
   Use these in HTML instead of inline style="" for section-level gaps/padding.
   ======================================== */

.rwd-gap-section     { gap: var(--Space-Section-Gap-Desktop) !important; }
.rwd-gap-section-lg  { gap: var(--Space-Section-Gap-Desktop-Large) !important; }
.rwd-py-section      { padding-top: var(--Space-Section-Gap-Desktop) !important;
                       padding-bottom: var(--Space-Section-Gap-Desktop) !important; }
.rwd-py-section-lg   { padding-top: var(--Space-Section-Gap-Desktop-Large) !important;
                       padding-bottom: var(--Space-Section-Gap-Desktop-Large) !important; }
.rwd-mb-section      { margin-bottom: var(--Space-Section-Gap-Desktop) !important; }
.rwd-mb-section-lg   { margin-bottom: var(--Space-Section-Gap-Desktop-Large) !important; }
.rwd-pt-section      { padding-top: var(--Space-Section-Gap-Desktop) !important; }
.rwd-pt-section-lg   { padding-top: var(--Space-Section-Gap-Desktop-Large) !important; }
.rwd-mt-section      { margin-top: var(--Space-Section-Gap-Desktop) !important; }
.rwd-mt-section-lg   { margin-top: var(--Space-Section-Gap-Desktop-Large) !important; }