:root {
  /* LIFF — LINE-native palette */
  --color-primary:          #06C755;
  --color-bg:               #FFFFFF;
  --color-liff-surface:     #F7F7F7;  /* LIFF card/slot backgrounds */
  --color-text-primary:     #1A1A1A;
  --color-text-secondary:   #888888;
  --color-disabled:         #CCCCCC;

  /* Admin + Restaurant portals — surface is white, not grey */
  --color-surface:          #FFFFFF;

  /* Admin + Restaurant portals — minimalist-ui palette */
  --color-canvas:           #FBFBFA;
  --color-border:           #EAEAEA;
  --color-text-off-black:   #111111;
  --color-text-muted:       #787774;
  --color-btn-bg:           #111111;
  --color-btn-text:         #FFFFFF;
  --color-cta-line:         #06C755;

  /* Status pastels */
  --color-status-paid:      #EDF3EC;
  --color-status-paid-text: #346538;
  --color-status-unpaid:    #FDEBEC;
  --color-status-unpaid-text: #9F2F2D;
  --color-status-pending:   #FBF3DB;
  --color-status-pending-text: #956400;

  /* Typography */
  --font-body:          'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-heading-latin: 'Geist Sans', 'Helvetica Neue', sans-serif;
  --font-mono:          'Geist Mono', 'SF Mono', monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* Breakpoints (as custom props for JS; use media queries in CSS) */
  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-desktop: 1280px;
}