/* Design tokens only. Do not place component or page selectors here. */
:root {
  /* Canvas / surfaces */
  --ni-color-page: #fdfbf8;
  --ni-color-bg: #fdfbf8;
  --ni-color-canvas: #fdfbf8;
  --ni-color-surface: #fffdf9;
  --ni-color-surface-soft: #fbf4ee;
  --ni-color-milk: #fbf4ee;
  --ni-color-ivory: #fffaf6;

  /* Lines / text */
  --ni-color-line: rgba(219, 195, 181, .62);
  --ni-color-line-strong: rgba(219, 195, 181, .82);
  --ni-color-text: #5d514b;
  --ni-color-heading: #4e372f;
  --ni-color-muted: #8a766f;
  --ni-color-subtle: #a48d83;

  /* Breadcrumb — category listing baseline; separator follows text color */
  --ni-breadcrumb-text: #a48d83;
  --ni-breadcrumb-link: var(--ni-breadcrumb-text);
  --ni-breadcrumb-separator: var(--ni-breadcrumb-text);
  --ni-breadcrumb-link-hover: #9b6463;

  /* Brand accents — category listing baseline */
  --ni-color-rose: #b77675;
  --ni-color-rose-deep: #9b6463;
  --ni-color-rose-cta: #9b6463;
  --ni-color-rose-soft: #f7ece8;
  --ni-color-accent: #9b6463;
  --ni-color-accent-soft: #b77675;
  --ni-color-accent-bg: rgba(155, 100, 99, .075);
  --ni-color-accent-bg-hover: rgba(155, 100, 99, .06);
  --ni-color-accent-line: rgba(155, 100, 99, .48);
  --ni-color-tea: #7e6d65;

  /* Footer 訂閱按鈕 / 全站分頁所在頁 — 珊瑚粉 canonical */
  --ni-color-coral: #cf717b;
  --ni-color-coral-hover: #bf626d;
  --ni-color-coral-soft: #fff5f6;
  --ni-color-coral-line: rgba(207, 113, 123, .48);
  --ni-pagination-current-bg: var(--ni-color-coral);
  --ni-pagination-current-border: var(--ni-color-coral);
  --ni-pagination-current-shadow: rgba(207, 113, 123, .24);
  --ni-pagination-hover-border: rgba(207, 113, 123, .46);
  --ni-pagination-hover-bg: var(--ni-color-coral-soft);
  --ni-pagination-hover-text: #a85a64;

  /* Radius */
  --ni-radius-sm: 10px;
  --ni-radius-md: 18px;
  --ni-radius-lg: 26px;
  --ni-radius-xl: 32px;
  --ni-radius-pill: 999px;

  /* Shadow */
  --ni-shadow-soft: 0 10px 28px rgba(120, 90, 80, .10);
  --ni-shadow-card: 0 14px 36px rgba(120, 90, 80, .12);
  --ni-shadow-subtle: 0 8px 22px rgba(120, 90, 80, .07);

  /* Widths / breakpoints — canonical media-query vocabulary (pixel values in @media must match) */
  --ni-container: 960px;
  --ni-page-max: 960px;
  --ni-frame: 960px;
  --ni-readable: 720px;
  --ni-breakpoint-mobile: 700px;
  --ni-breakpoint-mobile-max: 700px;
  --ni-breakpoint-tablet: 1024px;
  --ni-breakpoint-tablet-compact-max: 865px;
  --ni-breakpoint-tablet-compact-min: 866px;

  /* Spacing */
  --ni-gap-xs: 6px;
  --ni-gap-sm: 10px;
  --ni-gap-md: 16px;
  --ni-gap-lg: 24px;
  --ni-gap-xl: 34px;
  --ni-page-gutter: clamp(14px, 3vw, 28px);
  /* Page shell + breadcrumb inset (category listing baseline) */
  --ni-page-shell-edge: 32px;
  --ni-page-shell-edge-tablet: 24px;
  --ni-page-shell-edge-mobile: 16px;
  --ni-breadcrumb-inset-x: 28px;
  --ni-breadcrumb-inset-x-mobile: 11px;
  /* 主內容頂部 inset — 主內容↔footer 間距由 layout.css .ni-site-footer margin-top 負責 */
  --ni-page-main-top: clamp(18px, 3vw, 28px);
  /* 手機購物車浮島預留 — 由 footer margin-bottom 負責，主內容不重複加 */
  --ni-mobile-cart-reserve: 76px;
  /* 桌面 footer 與視窗底緣間距 */
  --ni-footer-bottom: 10px;

  /* Typography */
  --ni-font-body: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
  --ni-font-heading: "Noto Serif TC", "Hiragino Mincho ProN", "PMingLiU", serif;
  --ni-font-serif: var(--ni-font-heading);
  --ni-font-serif-weight: 700;
  --ni-font-sans-bold-weight: 700;
  --ni-font-button: var(--ni-font-body);
  --ni-button-font-weight: 700;
  --ni-button-letter-spacing: .03em;
  --ni-letter-soft: .035em;

  /* Kicker — 全前台英文標籤 canonical */
  --ni-kicker-color: var(--ni-color-subtle, #a48d83);
  --ni-kicker-line: var(--ni-color-accent-line, rgba(155, 100, 99, .48));
  --ni-kicker-title-gap: 7px;
  --ni-kicker-font-size: 11px;
  --ni-kicker-font-weight: 700;
  --ni-kicker-letter-spacing: .16em;
  --ni-kicker-line-height: 1.35;

  /* Page hero title — category listing baseline */
  --ni-page-hero-title-size: clamp(24px, 3vw, 34px);
  --ni-page-hero-title-size-mobile: 24px;
  --ni-page-hero-title-weight: 700;
  --ni-page-hero-title-line-height: 1.24;
  --ni-page-hero-title-letter-spacing: .045em;

  /* Runtime layers */
  --ni-z-header: 900;
  --ni-z-drawer: 1000;
  --ni-z-floating: 880;
  --ni-z-modal: 1200;

  /* Motion */
  --ni-transition-fast: 140ms ease;
  --ni-transition-base: 180ms ease;
}