/* Taiwan Life Buddy — shared design tokens and site chrome.
 *
 * Linked BEFORE each page's inline <style>, so any page-specific rule still
 * wins. That makes adoption safe: a page keeps whatever it already defines and
 * only inherits what it doesn't.
 *
 * Scope: tokens, the page container, and the header/footer chrome that should
 * look identical everywhere. Page-specific layout stays inline in each page.
 */

/* ---- tokens ---------------------------------------------------------------
 * THE palette. No page defines its own :root — every token lives here.
 *
 * Five copy-pasted :root blocks had drifted. Where they disagreed, the value
 * used by the most pages wins:
 *
 *   --ink     #17324d   pricing.html had #142f49
 *   --line    #dce8ee   pricing.html had #d8e6ee
 *   --blue    #eaf6fb   pricing.html had #e3f4ff   <- most visible change
 *   --muted   #516b81   was #60758a / #5b7186 / #5d7286 across three pages
 *   --shadow  14px/38px pricing + language-exchange had 18px/48px
 *
 * The muted grey is exposed under both historical names (--ink-soft and
 * --muted) so no page's rules need rewriting.
 */
:root{
  /* base */
  --white:#fff;
  --ink:#17324d;
  --ink-soft:#516b81;
  --muted:#516b81;
  --line:#dce8ee;

  /* brand */
  --sky:#4fa8d8;
  --teal:#238c87;
  --teal-dark:#176d69;
  --blue:#eaf6fb;
  --mint:#eaf7f4;
  --coral:#e8755f;

  /* surfaces */
  --surface:#fff;
  --panel:#f8fcfd;

  /* pricing tiers */
  --blue-strong:#1174a7;
  --green:#e3f6ea;
  --green-strong:#16764f;
  --black:#101820;
  --black-2:#1d2834;
  --gold:#c89b43;
  --gold-soft:#ffe8ad;

  /* semantic */
  --danger:#b54242;

  /* geometry */
  --shadow:0 14px 38px rgba(23,50,77,.1);
  --radius:14px;
}

/* ---- page container ------------------------------------------------------- */
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}

/* ---- header --------------------------------------------------------------- */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header .nav{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  /* Pages that previously laid the nav out inline (pricing.html) set a
     margin-bottom on .nav to separate it from content. Inside a sticky header
     that becomes dead space, so it is cancelled here. `header .nav` outranks a
     bare `.nav` rule, including one inside a media query. */
  margin-bottom:0;
}

/* ---- brand ---------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:10px;font-weight:950}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}

/* ---- footer --------------------------------------------------------------- */
footer{background:#10283f;color:#eaf6fb;padding:40px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:flex-start}
.footer-brand{display:flex;gap:12px;align-items:center;font-weight:900}
.footer-brand img{width:40px;height:40px;border-radius:50%}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;color:#b9d3df;font-weight:800}
.footer-small{margin-top:18px;color:#b9d3df;font-size:13px}

@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr}
}