/* =========================================================================
   Relai 瑞來 — Design System  (Jade Ink × Gold)
   Shared design tokens + base + components for landing + product demo.
   ========================================================================= */

:root {
  /* ---- Brand palette: Jade Ink × Gold (premium, auspicious, distinct) ---- */
  --ink:          #0A1A16;   /* deep jade-black, dark sections / hero      */
  --ink-2:        #0F241E;   /* slightly lifted ink surface                */
  --ink-3:        #16332B;   /* ink card / border on dark                  */

  --jade:         #0E8C6E;   /* primary brand jade                         */
  --jade-deep:    #0A6E56;   /* hover / pressed                            */
  --jade-bright:  #1ED7A6;   /* glow / accent on dark                      */
  --jade-soft:    #E4F4EE;   /* tinted surface on light                    */
  --jade-soft-2:  #D2ECE2;

  --gold:         #D8A24A;   /* warm accent, auspicious highlight          */
  --gold-soft:    #F6ECD7;

  --bg:           #FAFAF6;   /* warm paper white                           */
  --surface:      #FFFFFF;
  --surface-2:    #F4F4EE;   /* subtle raised / alt rows                   */
  --text:         #14201C;
  --text-muted:   #5A6B64;
  --text-faint:   #8A958F;
  --border:       #E7E7DE;
  --border-2:     #EFEFE7;

  /* channel brand dots */
  --c-line:    #06C755;
  --c-ig:      #E1306C;
  --c-fb:      #1877F2;
  --c-wa:      #25D366;
  --c-web:     #6366F1;

  /* status */
  --ok:    #0E8C6E;
  --warn:  #D8A24A;
  --hot:   #E2603F;
  --info:  #3B82C4;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Noto Sans TC', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Noto Sans TC', system-ui, sans-serif;
  --font-tc:      'Noto Sans TC', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, monospace;

  /* ---- Spacing (comfortable scale) ---- */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 48px;
  --s6: 64px; --s7: 96px;  --s8: 128px;

  /* ---- Radii ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-full: 999px;

  /* ---- Shadows (used sparingly) ---- */
  --sh-sm: 0 1px 2px rgba(10,26,22,.06), 0 1px 3px rgba(10,26,22,.05);
  --sh-md: 0 8px 24px -8px rgba(10,26,22,.14);
  --sh-lg: 0 24px 60px -18px rgba(10,26,22,.28);
  --sh-jade: 0 16px 50px -16px rgba(14,140,110,.45);

  --tr: 220ms cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- reset / base ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
::selection { background: var(--jade-bright); color: var(--ink); }

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cfd6d2; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b6c0ba; background-clip: content-box; }

/* ----------------------------- typography ------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.tc { font-family: var(--font-tc); }
.mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jade);
}

/* ----------------------------- layout ----------------------------------- */
.container { width: min(1180px, 92vw); margin-inline: auto; }
.container-wide { width: min(1320px, 94vw); margin-inline: auto; }
.section { padding: var(--s7) 0; }
@media (max-width: 768px){ .section { padding: var(--s6) 0; } }

/* ----------------------------- buttons ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: var(--r-full);
  transition: var(--tr); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--jade); color: #fff; box-shadow: var(--sh-jade); }
.btn-primary:hover { background: var(--jade-deep); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--jade); color: var(--jade); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ----------------------------- pills / badges --------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
}
.pill-jade { background: var(--jade-soft); border-color: var(--jade-soft-2); color: var(--jade-deep); }
.pill-gold { background: var(--gold-soft); border-color: #ecdcb8; color: #9a6b1c; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ----------------------------- cards ------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* ----------------------------- reveal animation ------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
.reveal[data-d="4"]{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* lang toggle helper: hide the inactive language */
[data-lang="en"] .i18n-tc { display: none; }
[data-lang="tc"] .i18n-en { display: none; }