/* ============================================================================
   MeiSIM USA — site.css
   THE single source of truth for colour and type across all 162 pages.

   Palette: Rolex Cosmograph Daytona, platinum ref. 126506 —
   ice-blue dial, chestnut-brown Cerachrom bezel, platinum case.

   To restyle the whole site, edit the tokens in :root below. Nothing else.
   Legacy aliases (--red, --gold, --cream …) are kept so older page CSS that
   still says var(--red) keeps working; they point at the new tokens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root{
  /* ---- the watch -------------------------------------------------------- */
  --ice:            #a9c8d4;   /* ice-blue dial — the signature             */
  --ice-pale:       #e3edf1;   /* dial in low light: tinted surfaces        */
  --ice-deep:       #4a6e7c;   /* legible ice for text and small marks      */
  --chestnut:       #5c3a2b;   /* Cerachrom bezel — primary action          */
  --chestnut-lift:  #7e5240;   /* bezel, hovered                            */
  --platinum:       #e7e9ea;   /* the case                                  */
  --platinum-deep:  #cfd6d8;   /* case, in shadow                           */

  /* ---- surfaces & text -------------------------------------------------- */
  --bg:             #f1f4f5;
  --bg-tint:        var(--ice-pale);
  --surface:        #ffffff;
  --surface-2:      #e2e8ea;
  --white:          #ffffff;
  --ink:            #14181a;
  --muted:          #5f6b70;
  --muted-strong:   #3d474c;
  --border:         rgba(28,58,68,0.14);
  --border-strong:  rgba(28,58,68,0.26);

  /* ---- channel triples, for rgba() with alpha --------------------------- */
  --ink-rgb:        20,24,26;
  --bg-rgb:         241,244,245;
  --brand-rgb:      92,58,43;
  --accent-rgb:     74,110,124;
  --ice-rgb:        169,200,212;
  --surface-2-rgb:  226,232,234;
  --good-rgb:       31,107,79;

  /* ---- semantic --------------------------------------------------------- */
  --brand:          var(--chestnut);
  --brand-lift:     var(--chestnut-lift);
  --accent:         var(--ice-deep);
  --accent-fill:    var(--ice);
  --good:           #1f6b4f;
  --warn:           #8a5a12;
  --bad:            #9b2c1f;

  /* ---- dark surfaces (checkout, portal, wholesale, SMS) ------------------ */
  --dark-bg:        #0e1113;
  --dark-bg-2:      #141819;
  --dark-surface:   #171c1e;
  --dark-surface-2: #1f2528;
  --dark-line:      rgba(169,200,212,0.16);
  --dark-ink:       #e9eef0;
  --dark-muted:     #93a1a6;
  /* On dark grounds chestnut disappears; the dial reads instead. */
  --dark-brand:     var(--ice);
  --dark-brand-2:   var(--ice-pale);

  /* ---- type ------------------------------------------------------------- */
  --font-sans:      'IBM Plex Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:   'Newsreader','Noto Serif SC',Georgia,'Times New Roman',serif;
  --font-mono:      'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- shape ------------------------------------------------------------ */
  --radius:         14px;
  --radius-sm:      8px;
  --shadow:         0 1px 2px rgba(20,24,26,.05), 0 10px 30px rgba(20,24,26,.06);

  /* ---- legacy aliases: old page CSS still references these --------------- */
  --red:      var(--brand);
  --red2:     var(--brand-lift);
  --red-2:    var(--brand-lift);
  --brand-2:  var(--accent);
  --accent-2: var(--brand-lift);
  --gold:     var(--accent);
  --gold2:    var(--accent-fill);
  --cream:    var(--bg);
  --cream2:   var(--surface-2);
  --surface2: var(--surface-2);
  --surface3: var(--platinum-deep);
  --muted2:   var(--muted-strong);
  --line:     var(--border);
  --border2:  var(--border-strong);
  --text:     var(--ink);
  --sans:     var(--font-sans);
  --mono:     var(--font-mono);
  --display:  var(--font-display);
  --card:     var(--surface);
  --card-bg:  var(--surface);
  --card-bg-2:var(--surface-2);
  --card-line:var(--border);
  --card-text:var(--ink);
  --card-muted:var(--muted);
  --card-2:   var(--surface-2);
  --ok:       var(--good);
  --green:    var(--good);
  --blue:     var(--accent);
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bot: env(safe-area-inset-bottom,0px);
}

/* Headings carry the display face. Page CSS no longer sets font-family on
   headings, so changing --font-display here changes every heading sitewide. */
h1,h2,h3,.msa-h1{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
h1,.msa-h1{ line-height:1.08; }
h2{ line-height:1.15; }

code,kbd,pre,samp{ font-family:var(--font-mono); }

/* ---------------------------------------------------------------------------
   THREE PLACES THAT CANNOT READ THESE TOKENS — update them by hand if the
   palette changes. Everything else on the site follows :root above.

   1. Stripe Elements `appearance.variables` — Stripe renders in an iframe, so
      var() never resolves. Literal hex only.
      account.html, buy-att-esim.html, checkout.html, dealer-topup.html,
      recharge.html, topup.html, verify-esim.html
   2. <meta name="theme-color"> — browser chrome, literal hex only.
      account.html
   3. Translated guides live in the guide_translations DB table, not in this
      repo. They link this file by absolute URL. To restyle them after a
      palette change, nothing is needed — they read this file live.
   --------------------------------------------------------------------------- */