/* ========================================================================
   npn.tw — Rounded & friendly direction（粉圓橙）
   標題：GenSenRounded TW B（真粗體，自託管子集）→ Huninn → Noto Sans TC
   正文：Huninn → Noto Sans TC；橙 accent、暖米畫布
======================================================================== */
/* R4 包一：源泉圓體 TW Bold（SIL OFL 1.1，全站字符子集 954 字 / 215KB woff2）
   weight 範圍 600-900：粗標題命中真粗體；400 級 display 沿用 Huninn（同族圓體雙檔） */
@font-face {
  font-family: "GenSenRounded TW";
  src: url("../public/fonts/GenSenRoundedTW-B-sub.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ===== Brand ===== */
  --color-brand: #F5811F;
  --color-brand-dark: #D96A11;
  --color-brand-darker: #B85508;
  --color-brand-soft: #FFEEDD;

  /* ===== Text ===== */
  --color-ink: #1F1A14;
  --color-ink-soft: #4A4339;
  --color-ink-muted: #7A716A;
  --color-ink-faint: #A89F95;

  /* ===== Warm surfaces ===== */
  --color-cream: #FAF6EE;            /* main page bg, very light cream */
  --color-cream-deep: #F2EBDB;        /* slightly deeper cream for alt sections */
  --color-cream-soft: #FDFAF3;        /* near-white cream for cards */
  --color-paper: #FFFFFF;             /* clean white card surface */
  --color-paper-pure: #FFFFFF;

  /* Soft borders (warm tan tint, not cold gray) */
  --color-rule: rgba(31, 26, 20, 0.10);
  --color-rule-strong: rgba(31, 26, 20, 0.14);

  /* ===== Star / amber ===== */
  --color-star: #F5B742;

  /* ===== Status ===== */
  --color-success: #2C9A5E;
  --color-warning: #E08020;
  --color-error: #D44A3B;

  /* ===== Typography — rounded sans throughout ===== */
  --font-display: "GenSenRounded TW", "Huninn", "Noto Sans TC", "PingFang TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* R4：粗標題=源泉圓體真 700+，輕 display=Huninn 400 */
  --font-sans: "Noto Sans TC", "PingFang TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-base: var(--font-sans);

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-44: 44px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-64: 64px;
  --fs-72: 72px;

  --lh-tight: 1.12;
  --lh-heading: 1.22;
  --lh-body: 1.75;

  /* No more negative kicker letter-spacing or wide-spaced uppercase — keep type honest */
  --letter-display: 0;
  --letter-kicker: 0;

  /* ===== Spacing ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;

  /* ===== Radius — rounded, friendly ===== */
  --radius-sm: 8px;
  --radius-md: 14px;        /* input radius（R2-P10 對齊規格） */
  --radius-lg: 20px;        /* card radius */
  --radius-xl: 20px;
  --radius-2xl: 24px;       /* button radius (pill-ish but not full pill) */
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --radius-btn: 24px;
  --radius-card: 20px;
  --radius-input: 14px;

  /* ===== Brand alpha steps（品牌橙 rgba 唯一定義處，禁止在其他檔案散寫 rgba(245, 129, 31, …)） ===== */
  --brand-alpha-03: rgba(245, 129, 31, 0.03);
  --brand-alpha-10: rgba(245, 129, 31, 0.10);
  --brand-alpha-16: rgba(245, 129, 31, 0.16);
  --brand-alpha-20: rgba(245, 129, 31, 0.20);
  --brand-alpha-30: rgba(245, 129, 31, 0.30);
  --brand-alpha-40: rgba(245, 129, 31, 0.40);

  /* ===== Shadows — warm, soft ===== */
  --shadow-xs: 0 1px 2px rgba(31, 26, 20, 0.04);
  --shadow-sm: 0 4px 12px rgba(31, 26, 20, 0.06);
  --shadow-card: 0 12px 28px rgba(31, 26, 20, 0.08);
  --shadow-lift: 0 18px 42px rgba(31, 26, 20, 0.12);
  --shadow-brand: 0 8px 20px rgba(245, 129, 31, 0.28);
  --shadow-focus: 0 0 0 4px rgba(245, 129, 31, 0.20);

  /* ===== Motion ===== */
  --motion-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --motion-base: 220ms cubic-bezier(.2,.8,.2,1);
  --motion-slow: 400ms cubic-bezier(.2,.8,.2,1);

  /* ===== Layout ===== */
  --container: 1240px;
  --container-narrow: 880px;
  --container-pad: 18px;
  --header-height: 72px;
}

@media (min-width: 768px) {
  :root { --container-pad: 28px; }
}

@media (min-width: 1024px) {
  :root { --container-pad: 40px; }
}