@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;900&display=swap');
/* ==========================================================================
   FOS v2 · CUSTOMER STORE design tokens  ·  tokens.css  ·  LIGHT-ONLY
   --------------------------------------------------------------------------
   Light-only port of FOS_v0703_cleanup/shared/tokens.css, trimmed to what the
   storefront actually uses. Two :root layers, faithful to the source:
     · Layer 1 — brand + semantic primitives (navy / gold / ok-warn-danger-info)
     · Layer 2 — semantic roles + typography / spacing / radius / shadow / z scales
   Dropped from the admin token set (never used by the store): the rail,
   sidebar, resort, tier, vip, messaging, priority and status palettes, the
   admin / partner / persona role colors, and the --font-body / --font-display
   families (the store uses only Noto Sans TC + JetBrains Mono).
   NO dark mode: there is deliberately no dark-scheme media block anywhere in
   this file — the storefront renders one light theme only.
   Google Fonts ship at the top (above), so any page that links ONLY tokens.css
   still gets Noto Sans TC + JetBrains Mono.
   ========================================================================== */

/* ============ LAYER 1 · brand + semantic primitives ============ */
:root {
  /* surfaces */
  --paper:#FFFFFF;
  --bg:#F4F7FB;
  --bg-2:#EAF0F7;

  /* brand navy */
  --ink:#0A2540;
  --ink-2:#1E3D5F;
  --ink-3:#445876;
  --ink-deep:#061829;

  /* brand gold */
  --gold:#E8C97A;
  --gold-dark:#C9A862;
  --gold-deep:#8B6E2D;
  --gold-soft:#FAF1D8;
  --gold-tint:#FBF4D9;

  /* borders / muted */
  --line:rgba(10,37,64,0.1);
  --line-strong:rgba(10,37,64,0.14);
  --muted:rgba(10,37,64,0.55);

  /* semantic soft/base (soft = tint fill, base = mid tone) */
  --ok:#2F7A5A;      --ok-soft:#E7F3ED;
  --warn:#A67A1C;    --warn-soft:#FFF5E8;
  --danger:#B35151;  --danger-soft:#FAE5E5;
  --info:#1F5A8C;    --info-soft:#E5F0FA;

  /* LINE brand (line-banner) */
  --line-green:#06C755;
  --line-soft:#D6F5E8;

  /* accent star (featured / rating marks) */
  --star:#F5A623;
}

/* ============ LAYER 2 · semantic roles + scales ============
   New/edited store code uses these role names. Contrast ratios are computed
   against WCAG 2.1 AA on white (see the v0703 MIGRATION note); the *-text /
   *-strong tokens are the AA-safe TEXT colors — raw --gold on white is 1.61:1
   (decoration only), so gold TEXT must use --gold-text. */
:root {
  /* text roles */
  --text-1:var(--ink);
  --text-2:var(--ink-2);
  --text-muted:var(--muted);
  --text-muted-strong:rgba(10,37,64,0.65); /* 5.02:1 on white — AA-safe hint text */
  --gold-text:#7E610F;                     /* 5.83:1 on white — gold-toned TEXT   */
  --warn-strong:#8A6516;                   /* 5.31:1 white / 4.93:1 on --warn-soft */
  --danger-strong:#9E4444;                 /* 5.17:1 on --danger-soft              */

  /* surface / border / accent roles */
  --surface-0:#FFFFFF;
  --surface-1:var(--bg);
  --surface-2:var(--bg-2);
  --white:var(--surface-0);                /* compat: some inline styles still use --white */
  --border:var(--line);
  --accent:var(--gold);
  --accent-strong:var(--gold-dark);

  /* typography */
  --font-sans:'Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Code',Consolas,Menlo,monospace;
  --fs-micro:12.5px; --fs-caption:13px; --fs-body:15px; --fs-body-lg:16px;
  --fs-sub:17px; --fs-h2:18px; --fs-h1:20px; --fs-title:24px; --fs-hero:28px;
  --lh-tight:1.3; --lh-body:1.55; --lh-loose:1.7;
  --fw-regular:400; --fw-medium:600; --fw-bold:700; --fw-heavy:800; --fw-black:900;

  /* spacing (base-4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* radii / shadows / focus */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(10,37,64,.05),0 1px 1px rgba(10,37,64,.03);
  --shadow-md:0 4px 14px rgba(10,37,64,.08),0 1px 3px rgba(10,37,64,.04);
  --shadow-lg:0 12px 32px rgba(10,37,64,.14);
  --shadow-up:0 -8px 24px rgba(10,37,64,.06);
  --shadow-lift:0 10px 30px rgba(10,37,64,.08),0 2px 6px rgba(10,37,64,.04);
  --shadow-gold:0 6px 18px rgba(201,168,98,.32),0 2px 4px rgba(201,168,98,.18);
  --ring-gold:0 0 0 3px rgba(232,201,122,.35);

  /* z-index ladder */
  --z-raised:1; --z-sticky:50; --z-header:60; --z-drawer:100;
  --z-overlay:200; --z-modal:300; --z-toast:400; --z-max:9999;

  /* layout frames */
  --frame-mobile:448px; --frame-desktop:1100px;
}