/* ============================================
   Maxwell Design Tokens
   Brand: Maxwell (Echo Maxwell Global SGGroup Pte.Ltd)
   Version: 1.1 — 內建真 Barlow 字體
   ============================================ */

/* ----------------------------------------
   @font-face — 真 Barlow 字體
   共 3 個家族 × 必要字重（網站不需要 54 個全裝）
   ---------------------------------------- */

/* === Barlow Condensed (Hero 衝擊標題) === */
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/condensed/BarlowCondensed-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/condensed/BarlowCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/condensed/BarlowCondensed-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/condensed/BarlowCondensed-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/condensed/BarlowCondensed-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* === Barlow (內文、副標題) === */
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/regular/Barlow-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* === Barlow SemiCondensed (UI、標籤、按鈕) === */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/semicondensed/BarlowSemiCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/semicondensed/BarlowSemiCondensed-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/semicondensed/BarlowSemiCondensed-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("assets/fonts/semicondensed/BarlowSemiCondensed-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------
     品牌配色 (Brand Colors) — 從 VI 指南萃取
     ---------------------------------------- */
  --color-maxwell-yellow: #FFBE00;    /* 暖黃 - 強調、活力 */
  --color-maxwell-pink:   #FF0080;    /* 桃紅 - 吸睛、社交（VI 海報版） */
  --color-maxwell-purple: #9B2DB9;    /* 紫 - 漸變中段 */
  --color-maxwell-blue:   #0037EB;    /* 主藍 - 主色，70%+ */
  --color-maxwell-sky:    #008CFF;    /* 天藍 - 漸變輔助 */
  --color-maxwell-navy:   #11103E;    /* 深藍 - 背景 */
  --color-maxwell-cream:  #F1EFE8;    /* 米白 - 中性背景 */

  /* ----------------------------------------
     漸變 (Gradients) — Maxwell 標誌性
     ---------------------------------------- */
  --gradient-maxwell: linear-gradient(
    90deg,
    var(--color-maxwell-yellow) 0%,
    var(--color-maxwell-pink)   35%,
    var(--color-maxwell-purple) 65%,
    var(--color-maxwell-blue)  100%
  );

  --gradient-maxwell-v: linear-gradient(
    180deg,
    var(--color-maxwell-yellow) 0%,
    var(--color-maxwell-pink)   50%,
    var(--color-maxwell-purple) 100%
  );

  --gradient-maxwell-radial: radial-gradient(
    ellipse at top left,
    var(--color-maxwell-pink)   0%,
    var(--color-maxwell-purple) 50%,
    var(--color-maxwell-blue)  100%
  );

  --gradient-maxwell-dark: linear-gradient(
    135deg,
    var(--color-maxwell-navy) 0%,
    var(--color-maxwell-purple) 60%,
    var(--color-maxwell-pink)  100%
  );

  /* ----------------------------------------
     中性色 (Neutrals)
     ---------------------------------------- */
  --color-black:    #000000;
  --color-gray-900: #1A1A1A;
  --color-gray-700: #444444;
  --color-gray-500: #888780;
  --color-gray-300: #D3D1C7;
  --color-gray-100: #F1EFE8;
  --color-white:    #FFFFFF;

  /* ----------------------------------------
     語義色 (Semantic)
     ---------------------------------------- */
  --color-bg-primary:   var(--color-white);
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-dark:      var(--color-maxwell-navy);
  --color-text-primary: var(--color-black);
  --color-text-muted:   var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-link:         var(--color-maxwell-blue);
  --color-cta:          var(--color-maxwell-yellow);

  /* ----------------------------------------
     字體 (Typography) — 真 Barlow 全套
     ---------------------------------------- */
  --font-display:     "Barlow Condensed", "Barlow", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body:        "Barlow", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-ui:          "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, monospace;

  /* 字級 (Type Scale) — 8pt 系統 */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  48px;
  --fs-3xl:  64px;
  --fs-4xl:  96px;
  --fs-hero: clamp(64px, 12vw, 160px);

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

  /* 行高 */
  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

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

  /* ----------------------------------------
     間距 (Spacing) — 8pt 系統
     ---------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ----------------------------------------
     圓角 (Radius)
     ---------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----------------------------------------
     陰影 (Shadow)
     ---------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-blue: 0 8px 24px rgba(0, 55, 235, 0.25);
  --shadow-glow: 0 0 64px rgba(245, 20, 110, 0.35);

  /* ----------------------------------------
     容器 (Container)
     ---------------------------------------- */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-text:   720px;

  /* ----------------------------------------
     動畫 (Animation)
     ---------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
}

/* ----------------------------------------
   Dark Mode
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary:   var(--color-black);
    --color-bg-secondary: var(--color-gray-900);
    --color-text-primary: var(--color-white);
    --color-text-muted:   var(--color-gray-300);
  }
}

/* ----------------------------------------
   使用範例
   ---------------------------------------- */
.hero {
  background: var(--gradient-maxwell);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-24) var(--space-8);
}

.cta-button {
  background: var(--color-maxwell-yellow);
  color: var(--color-black);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}