/*
 * FaceHeart Design System — design-tokens.css
 * v6  |  對應 spec: faceheart-design-system-spec.md
 */

/* ── 1. 字型引入（本地 Satoshi）─────────────────────────────── */
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Light.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Light.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-LightItalic.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-LightItalic.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Regular.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Italic.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Italic.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Italic.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Medium.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-MediumItalic.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Bold.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-BoldItalic.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Black.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Black.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-BlackItalic.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: 'Satoshi-Variable';
    src: url('/fonts/satoshi/Satoshi-Variable.woff2') format('woff2'),
         url('/fonts/satoshi/Satoshi-Variable.woff') format('woff'),
         url('/fonts/satoshi/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

/* ── 2. CSS Variables (:root) ───────────────────────────────────── */
:root {
  /* Font */
  --font-primary:    'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-mono:       'Roboto Mono', monospace;

  /* ↓ 覆蓋 main.css 裡的舊變數，確保全站使用 Satoshi */
  --font-inter-tight: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-sans:        'Satoshi', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --scale-01: 12px;
  --scale-02: 14px;
  --scale-03: 16px;
  --scale-04: 20px;
  --scale-05: 24px;
  --scale-06: 32px;
  --scale-07: 40px;
  --scale-08: 48px;
  --scale-09: 64px;
  --scale-10: 72px;

  /* Typography sizes — Desktop */
  --fs-title-hero:    var(--scale-10);
  --fs-title-page-lg: var(--scale-09);
  --fs-title-page:    var(--scale-08);
  --fs-subtitle:      var(--scale-06);
  --fs-heading:       var(--scale-05);
  --fs-subheading:    var(--scale-04);
  --fs-body:          var(--scale-03);
  --fs-body-sm:       var(--scale-02);

  /* Letter spacing */
  --ls-title-hero:    -2.16px;
  --ls-title-page-lg: -1.28px;
  --ls-title-page:    -0.96px;
  --ls-heading:       -0.48px;

  /* Background — Base (Neutral) */
  --bg-base:                  #ffffff;
  --bg-base-hover:            #f5f5f5;
  --bg-base-secondary:        #f5f5f5;
  --bg-base-secondary-hover:  #e6e6e6;
  --bg-base-tertiary:         #d9d9d9;
  --bg-base-tertiary-hover:   #b3b3b3;

  /* Background — Brand */
  --bg-brand:                 #16264a;
  --bg-brand-hover:           #6b7a9a;
  --bg-brand-secondary:       #6b7a9a;
  --bg-brand-secondary-hover: #939fb9;
  --bg-brand-tertiary:        #939fb9;
  --bg-brand-tertiary-hover:  #a7b2c8;

  /* Background — Utility */
  --bg-disabled:  #757575;
  --bg-warning:   #fffbeb;
  --bg-scrim:     rgba(255, 255, 255, 0.8);
  --bg-blanket:   rgba(0, 0, 0, 0.7);
  --bg-overlay:   rgba(0, 0, 0, 0.5);

  /* Accent */
  --accent:       #24b28e;

  /* Text — Neutral */
  --text-default:           #444444;
  --text-secondary:         #383838;
  --text-tertiary:          #2c2c2c;
  --text-disabled:          #757575;
  --text-on-disabled:       #d9d9d9;

  /* Text — Brand */
  --text-brand:                   #16264a;
  --text-brand-secondary:         #42547b;
  --text-brand-tertiary:          #6b7a9a;
  --text-on-brand:                #ffffff;
  --text-on-brand-secondary:      #f5f5f5;
  --text-on-brand-tertiary:       #e6e6e6;

  /* Text — Positive */
  --text-positive:                #0e4739;
  --text-positive-secondary:      #166b55;
  --text-positive-tertiary:       #24b28e;
  --text-on-positive:             #e9f7f4;
  --text-on-positive-secondary:   #d3f0e8;
  --text-on-positive-tertiary:    #7cd1bb;

  /* Text — Danger */
  --text-danger:                  #900b09;
  --text-danger-secondary:        #c00f0c;
  --text-danger-tertiary:         #ec221f;
  --text-on-danger:               #fee9e7;
  --text-on-danger-secondary:     #900b09;
  --text-on-danger-tertiary:      #900b09;

  /* Text — Warning */
  --text-warning:                 #522504;
  --text-warning-secondary:       #975102;
  --text-warning-tertiary:        #bf6a02;
  --text-on-warning:              #401b01;
  --text-on-warning-secondary:    #682d03;
  --text-on-warning-tertiary:     #522504;

  /* Border */
  --border-default:         #d9d9d9;
  --border-secondary:       #757575;
  --border-tertiary:        #383838;
  --border-disabled:        #444444;
  --border-brand:           #0e4739;
  --border-brand-secondary: #166b55;
  --border-brand-tertiary:  #24b28e;
  --border-warning:         #bf6a02;

  /* Border Gradient */
  --border-gradient: linear-gradient(90deg, #24B28E 0%, #73DBE7 50%, #201547 100%);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-16: 64px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;
}

/* Typography sizes — Mobile (≤767px) */
@media (max-width: 767px) {
  :root {
    --fs-title-hero:    var(--scale-07); /* Title Hero: 40px */
    --fs-title-page-lg: var(--scale-07); /* Title Page Large: 40px */
    --fs-title-page:    var(--scale-06); /* Title Page Base: 32px */
    --fs-subtitle:      var(--scale-05); /* Subtitle Base: 24px */
    --fs-heading:       var(--scale-04); /* Heading Base: 20px */
    --fs-subheading:    var(--scale-03); /* Subheading Base: 16px */
    --fs-body:          var(--scale-02); /* Body Base: 14px */
    --fs-body-sm:       var(--scale-01); /* Body Small: 12px */
  }
}

/* ── 3. Base Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 全站套用 Satoshi — html + body 同時設定，覆蓋 main.css 的 body { font-family: var(--font-inter-tight) } */
html,
body {
  font-family: var(--font-primary);
  color: var(--text-default);
  background-color: var(--bg-base);
}

/* ── 4. Typography Utilities ────────────────────────────────────── */
.title-hero {
  font-size: var(--fs-title-hero);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-title-hero);
  color: var(--text-brand);
  padding-bottom: 30px;
}
.title-page-lg {
  font-size: var(--fs-title-page-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-title-page-lg);
  color: var(--text-brand);
  padding-bottom: 30px;
}
.title-page {
  font-size: var(--fs-title-page);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-title-page);
  color: var(--text-brand);
  padding-bottom: 30px;
}
.subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  padding-bottom: 30px;
}
.heading {
  font-size: var(--fs-heading);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
}
.subheading {
  font-size: var(--fs-subheading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.body-base {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
}
.body-strong {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
}
.body-emphasis {
  font-size: var(--fs-body);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
}
.body-link {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
  color: var(--accent);
}
.body-sm {
  font-size: var(--fs-body-sm);
  font-weight: 300;
  line-height: 1.4;
}
.body-sm-strong {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: 1.4;
}

/* main.css legacy — align with Title Page token on mobile */
@media (max-width: 767px) {
  .page-section-title {
    font-size: var(--fs-title-page);
  }
}

/* ── 5. Component Utilities ─────────────────────────────────────── */

/* Button — Primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: #1d9a7a;
}

/* Button — Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-base-secondary);
  color: var(--text-brand);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
}
.btn-secondary:hover {
  background-color: var(--bg-base-secondary-hover);
}

/* Button — Ghost (白底深色邊框) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--text-brand);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--text-brand);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-ghost:hover {
  background-color: var(--text-brand);
  color: var(--text-on-brand);
}

/* Badge / Tag */
.badge {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--text-default);
  padding: 7px 20px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-pill);
  line-height: 1.4;
  opacity: 0 !important;
  position: absolute;
  left: 0;
  top: 0;
}
/* Border Gradient */
.border-gradient {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.border-gradient::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--border-gradient);
  z-index: -1;
}

/* ── 6. Color Bridge Utilities（供 Tailwind class 名稱對應使用）── */

/* Background */
.bg-brand            { background-color: var(--bg-brand); }
.bg-brand-secondary  { background-color: var(--bg-brand-secondary); }
.bg-brand-tertiary   { background-color: var(--bg-brand-tertiary); }
.bg-accent           { background-color: var(--accent); }
.bg-base-secondary   { background-color: var(--bg-base-secondary); }

/* Text */
.text-brand            { color: var(--text-brand); }
.text-brand-secondary  { color: var(--text-brand-secondary); }
.text-brand-tertiary   { color: var(--text-brand-tertiary); }
.text-on-brand         { color: var(--text-on-brand); }
.text-default-ds       { color: var(--text-default); }
.text-accent           { color: var(--accent); }
.text-positive         { color: var(--text-positive); }
.text-danger           { color: var(--text-danger); }
.text-warning-ds       { color: var(--text-warning); }

/* Border */
.border-brand          { border-color: var(--border-brand); }
.border-brand-tertiary { border-color: var(--border-brand-tertiary); }

/* ── 7. Section Themes ───────────────────────────────────────── */

/* 深藍主題 */
.section-dark {
  background-color: var(--bg-brand);
  color: rgba(255, 255, 255, 0.85);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: #ffffff;
}
.section-dark .title-hero,
.section-dark .title-page-lg,
.section-dark .title-page,
.section-dark .heading,
.section-dark .subtitle,
.section-dark .subheading {
  color: #ffffff;
}
.section-dark p {
  color: rgba(255, 255, 255, 0.72);
}
.section-dark .badge {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
}
.section-dark .badge-gradient-border {
  background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)) padding-box,
              linear-gradient(90deg, #89DCC6 0%, #2F2F93 100%) border-box;
  color: rgba(255, 255, 255, 0.9) !important;
}
.section-dark a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost) {
  color: rgba(255, 255, 255, 0.85);
}

/* 白色主題 */
.section-light {
  background-color: var(--bg-base);
  color: var(--text-default);
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6,
.section-light .title-hero,
.section-light .title-page-lg,
.section-light .title-page,
.section-light .heading,
.section-light .subtitle,
.section-light .subheading {
  color: var(--text-brand);
}

/* ── 8. Global Button — Gradient Override ──────────────────────────
   全站按鈕統一使用漸層綠（teal → navy）
   FAQ "Inquire Now" 同款：linear-gradient(90deg, #89DCC6 → #2F2F93)
   ─────────────────────────────────────────────────────────────── */

/* 全站按鈕顏色變數 */
:root {
  --btn-solid-green: #24B28E;
  --btn-solid-green-border: #1fa07e;
  --btn-solid-green-hover: #1d9a7a;
}

/* ── v1 btn（main.css 系列）── */
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-white,
.btn-white-dark,
.btn-white-v2,
.btn-dark,
.btn-green,
.btn-ash {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 箭頭 icon 改為白色 */
.btn-primary:before,
.btn-secondary:before,
.btn-accent:before,
.btn-white:before,
.btn-white-dark:before,
.btn-white-v2:before,
.btn-green:before,
.btn-ash:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* hover 略深 */
@media (hover: hover) {
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-accent:hover,
  .btn-white:hover,
  .btn-white-dark:hover,
  .btn-white-v2:hover,
  .btn-dark:hover,
  .btn-green:hover,
  .btn-ash:hover {
    background: var(--btn-solid-green-hover) !important;
    background-color: var(--btn-solid-green-hover) !important;
  }
}

/* ── v2 btn（btn-v2 系列）── */
.btn-primary-v2,
.btn-secondary-v2,
.btn-green-v2,
.btn-v2-accent,
.btn-v2-white,
.btn-gray-v2,
.btn-stone-v2,
.btn-ash-v2 {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary-v2 .btn-v2-icon,
.btn-secondary-v2 .btn-v2-icon,
.btn-green-v2 .btn-v2-icon,
.btn-v2-white .btn-v2-icon,
.btn-gray-v2 .btn-v2-icon,
.btn-stone-v2 .btn-v2-icon,
.btn-ash-v2 .btn-v2-icon {
  fill: #ffffff !important;
}

/* group-hover/btn-v2 互動 hover 狀態 */
.group-hover\/btn-v2\:btn-primary-v2:is(:where(.group\/btn-v2):hover *),
.group-hover\/btn-v2\:btn-secondary-v2:is(:where(.group\/btn-v2):hover *),
.group-hover\/btn-v2\:btn-v2-white:is(:where(.group\/btn-v2):hover *) {
  background: var(--btn-solid-green-hover) !important;
  background-color: var(--btn-solid-green-hover) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
}

.group-hover\/btn-v2\:btn-primary-v2:is(:where(.group\/btn-v2):hover *) .btn-v2-icon,
.group-hover\/btn-v2\:btn-secondary-v2:is(:where(.group\/btn-v2):hover *) .btn-v2-icon {
  fill: #ffffff !important;
}

/* ── v3 btn（btn-v3 系列）── */
.btn-v3-primary,
.btn-v3-secondary,
.btn-v3-stone,
.btn-v3-white {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
}

.btn-v3-primary [data-button-v3-icon],
.btn-v3-secondary [data-button-v3-icon],
.btn-v3-stone [data-button-v3-icon],
.btn-v3-white [data-button-v3-icon] {
  fill: #ffffff !important;
}

/* ── Header 導覽列 Contact 按鈕 ── */
header a.btn-primary,
nav a.btn-primary {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  color: #ffffff !important;
}

/* ── 表單 submit 按鈕 ── */
button[type="submit"].btn,
button[type="submit"].btn-primary,
button[type="submit"].btn-secondary {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
}

/* ── solution potential-applications 的小按鈕 ── */
.btn-md-v2.btn-v2-white,
a[class*="btn-v2-white"] {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  border-color: var(--btn-solid-green-border) !important;
  color: #ffffff !important;
}

/* ── mirror-flow 獨立按鈕 ── */
a.btn-primary.group {
  background: var(--btn-solid-green) !important;
  background-color: var(--btn-solid-green) !important;
  color: #ffffff !important;
}


/* FAQ Rich Text Prose — override Tailwind base reset */
.faq-prose ul { list-style-type: disc !important; padding-left: 1.5em !important; margin-bottom: 0.75em; }
.faq-prose ol { list-style-type: decimal !important; padding-left: 1.5em !important; margin-bottom: 0.75em; }
.faq-prose li { display: list-item !important; margin-bottom: 0.25em; }
.faq-prose p { margin-bottom: 0.75em; }
.faq-prose p:last-child { margin-bottom: 0; }
.faq-prose strong { font-weight: 600; }
.faq-prose em { font-style: italic; }
.faq-prose a { text-decoration: underline; }