/* =========================================================================
 * BNE Style eSIM — Design Tokens
 * 對齊 bnesim 截圖校準：白底乾淨、珊瑚橘強調、卡片化、圓角、留白充足。
 * 與 theme.json 同步；改色彩只需改這裡與 theme.json 兩處。
 *
 * 切換深色 Hero：在 :root 覆寫 --hero-bg / --hero-text 即可（見檔尾說明）。
 * ====================================================================== */

:root {
  /* ---- Color · 對照 theme.json palette ---- */
  --c-bg: #FFFFFF;
  --c-surface: #F6F7F9;
  --c-surface-muted: #EEF1F4;
  --c-text: #1B2430;
  --c-text-muted: #6A7685;
  --c-accent: #F08A5C;          /* 珊瑚橘：CTA / 連結 / 作用中 */
  --c-accent-strong: #E5763F;   /* hover / 按下 */
  --c-accent-soft: #FCE6DA;     /* 淺珊瑚底 / 標籤 */
  --c-accent-border: #F6B79A;   /* 珊瑚邊框（如搜尋框） */
  --c-dark: #232329;            /* 深色塊 / 頁尾 */
  --c-dark-2: #2D2D34;
  --c-gold: #C9A24A;            /* 獎項 badge */
  --c-success: #27AE60;
  --c-danger: #EB5757;
  --c-border: #E7EAEF;
  --c-border-strong: #D4DAE2;

  --c-text-on-dark: #FFFFFF;
  --c-text-on-dark-muted: #B7C0CC;

  /* ---- Typography ---- */
  --font-display: Poppins, system-ui, -apple-system, "Segoe UI",
                  "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.65;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale ---- */
  --sp-10: 0.5rem;
  --sp-20: 0.75rem;
  --sp-30: 1rem;
  --sp-40: 1.5rem;
  --sp-50: 2rem;
  --sp-60: 3rem;
  --sp-70: 4rem;
  --sp-80: 6rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadow（柔和、低彩度，符合乾淨風）---- */
  --shadow-xs: 0 1px 2px rgba(27, 36, 48, 0.06);
  --shadow-sm: 0 2px 8px rgba(27, 36, 48, 0.07);
  --shadow-md: 0 8px 24px rgba(27, 36, 48, 0.08);
  --shadow-lg: 0 16px 48px rgba(27, 36, 48, 0.12);

  /* ---- Layout ---- */
  --container-content: 720px;
  --container-wide: 1200px;
  --header-h: 72px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;

  /* ---- Hero（預設淺底；要深色 Hero 改這兩個即可）---- */
  --hero-bg: var(--c-bg);
  --hero-text: var(--c-text);
  --hero-text-muted: var(--c-text-muted);
}

/* 範例：若要切換成規格書原本的「深色 navy Hero」，取消下面註解即可。
:root {
  --hero-bg: linear-gradient(180deg, #0B1B2B 0%, #102A43 100%);
  --hero-text: #FFFFFF;
  --hero-text-muted: #AEC0D0;
}
*/