/* ==========================================================================
   JYT design system — tokens
   Character: calm, precise B2B technology. White, square-cornered pages held
   together by hairlines. Blue acts, teal signs.
   ========================================================================== */
:root {
  /* ---- Actions & structure: blue ---------------------------------------- */
  --brand-600: #116bff;  /* buttons, links, focus rings, active states; white text on it */
  --brand-700: #0a58d6;  /* hover/pressed */
  --brand-300: #6bb2e6;  /* illustration only (map routes, glows); never text */
  --brand-100: #d8eafe;  /* soft shapes in CTA band */
  --brand-50:  #f3f8fe;  /* closing CTA band + footer background */
  --on-brand:  #ffffff;

  /* Contrast rule for links: --brand-600 text is 4.59:1 on --surface but only
     4.36:1 on --surface-subtle and 4.30:1 on --brand-50 (fails AA for normal
     text). On those two grounds, links use --brand-700 (≈5.9:1) instead. */

  /* ---- Logo accents: SMALL ONLY ----------------------------------------- */
  --teal-500:  #29bfbf;  /* corner dots, eyebrow bar, thin strokes. NEVER text, buttons or large fills (2.3:1 on white) */
  --teal-700:  #0f7f80;  /* readable teal: eyebrow labels, feature icons, one highlighted stat */
  --teal-50:   #effafa;  /* feature icon chip background only */
  --amber-400: #ffbb00;  /* tiny wedge marker + rating stars only. NEVER text */

  /* ---- Neutrals ---------------------------------------------------------- */
  --ink:            #0a0a0a; /* headlines, titles */
  --ink-button:     #181818; /* compact dark nav button */
  --ink-secondary:  #4a4a4a; /* lead paragraphs, nav links */
  --ink-muted:      #6b6b6b; /* descriptions, captions */
  --ink-faded:      #c4c4c4; /* decorative fade in testimonial quotes only */
  --surface:        #ffffff; /* default page */
  --surface-subtle: #f9f9f9; /* alternate section bands */
  --surface-canvas: #ebebeb; /* outer frame behind a framed container (unused: the site is full-bleed) */
  --border:         #ececec; /* all hairlines, grid guides */
  --border-strong:  #d9d9d9; /* outline buttons, dividers */

  /* ---- Extensions (approved additions to the system) -------------------- */
  --danger-600:   #b42318; /* error text + invalid field border. 6.5:1 on --surface. Always paired with a text message, never colour alone */
  --border-input: #8a8a8a; /* form-field borders only (WCAG 1.4.11: ≥3:1 on --surface and --surface-subtle) */

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Geist", "Inter", system-ui, sans-serif; /* ALWAYS weight 400, negative tracking */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display-xl: 72px; /* hero, one per page: line-height 1.0, tracking -0.03em */
  --text-display-lg: 64px; /* closing CTA: 1.02, -0.03em */
  --text-heading-1:  44px; /* section headings: 1.08, -0.025em */
  --text-heading-2:  28px; /* row and card titles: 1.15, -0.02em */
  --text-body-lg:    18px; /* lead paragraphs, line-height 28px */
  --text-body:       16px; /* descriptions, line-height 24px (16 not 15: audience skews older) */
  --text-title:      17px; /* card titles, questions: 500, line-height 24px */
  --text-label:      15px; /* buttons: 500, line-height 20px */
  --text-nav:        14px; /* nav links, line-height 20px */
  --text-caption:    13px; /* captions, eyebrows, small labels: line-height 18px. Floor: nothing smaller */

  --tracking-display: -0.03em;
  --tracking-heading-1: -0.025em;
  --tracking-heading-2: -0.02em;
  --tracking-eyebrow: 0.06em;

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

  --section-pad: var(--space-9);   /* 96px desktop */
  --hero-pad-top: var(--space-10); /* 128px */
  --gutter: var(--space-4);        /* 16px mobile gutter */
  --content-max: 1120px;           /* content column */
  --header-height: 72px;           /* sticky header; anchors land below it */

  /* ---- Shape & elevation -------------------------------------------------- */
  --radius: 0;            /* default: buttons, cards, images, inputs */
  --radius-chip: 4px;     /* small icon chips, testimonial avatars */
  --radius-badge: 12px;   /* rating / social-proof badge only */
  --radius-round: 999px;  /* flags and dots */
  --shadow-float: 0 12px 32px rgba(17, 107, 255, 0.10); /* small floating UI cards inside imagery only */
  --focus-ring: 2px solid var(--brand-600);
  --focus-offset: 3px;

  /* ---- Motion: calm, ease-out, ≤ 600ms ----------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-reveal: 500ms;
}

/* Chinese: system CJK faces after Geist/Inter (no web-font download), and
   no negative tracking on display text. html[lang] is set by i18n.js. */
:root:lang(zh-Hant) {
  --font-display: "Geist", "Inter", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-sans: "Inter", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
:root:lang(zh-Hans) {
  --font-display: "Geist", "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-sans: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
:root:lang(zh-Hant),
:root:lang(zh-Hans) {
  --tracking-display: 0;
  --tracking-heading-1: 0;
  --tracking-heading-2: 0;
}

/* Display sizes step down about 40% on mobile. */
@media (max-width: 640px) {
  :root {
    --text-display-xl: 44px;
    --text-display-lg: 40px;
    --text-heading-1: 28px;
    --text-heading-2: 20px;
    --section-pad: var(--space-8);
    --hero-pad-top: var(--space-8);
    --header-height: 64px;
  }
}