/* ─── Jadegia shared design tokens + base typography ─────────── */
/* Consumed by jadegia pure-HTML pages and shared modules */

@import url('https://font.emtech.cc/css?family=GenRyuMinTW:200,300,400,500,600,700,900');

:root {
  --jade:       #2d5a40;
  --jade-dark:  #1a3628;
  --jade-light: #4a8060;
  --black:      #0d0d0d;
  --charcoal:   #333333;
  --mid:        #666666;
  --light:      #999999;
  --offwhite:   #f8f7f4;
  --menu-bg:    #ffffff;
  --white:      #ffffff;
  --border:     #e0ddd8;
  --gold:       #c9a96e;
  --serif-zh:   'Noto Serif TC', 'STSong', 'SimSun', serif;
  --serif-en:   'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;

  /* ── Brian Yang typography standard (2026-04-24) ─────────────────
     Canonical title face: PDP's GenRyuMinTW / font-genryumin stack.
     Athelas is a macOS/iOS system serif used for price numerals. */
  --serif-title: 'GenRyuMin 2.0', 'GenRyuMinTW', 'GenRyuMin TW', 'GenRyuMin', '源流明體', '源流明', 'Noto Serif TC', 'STSong', serif;
  --sans-zh:     'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --serif-price: 'Athelas', 'Georgia', serif;

  /* ── typography scale ── */
  --text-xs:     11px;
  --text-sm:     13px;
  --text-meta:   12px;   /* breadcrumbs, product annotation */
  --text-btn:    14px;   /* .jadegia-btn-primary, .jadegia-btn-action */
  --text-base:   16px;
  --text-btn-fn: 16px;   /* functional button text (concept CTA, 探索) */
  --text-body:   18px;   /* general body text */
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-price:  24px;   /* price numbers (NT$x,xxx) */
  --text-pname:  22px;   /* product name in PDP block */
  --text-title1: 32px;   /* Title 1: product/section headings */
  --text-3xl:    36px;
  --text-4xl:    48px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  /* Spec #5: general body text — Noto Sans TC light 18px */
  font-family: var(--sans-zh);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }