/* ============================================================
   colors_and_type.css — 蕉您來好康農場 · 購物網
   設計代幣(色彩 / 字型 / 圓角 / 陰影)。App 以 data-theme 切換。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Baloo+2:wght@500;700;800&display=swap');

:root,
[data-theme="banana"] {
  /* 底色層 */
  --bg-page:    #FFFBF2;
  --bg-surface: #FFFFFF;
  --bg-cream:   #FDF6E6;
  --bg-sunk:    #FBF3E1;

  /* 文字 */
  --fg-1: #2C2820;   /* 標題 */
  --fg-2: #4B4534;   /* 內文 */
  --fg-3: #968D78;   /* 次要 / 說明 */

  /* 香蕉黃主色 */
  --accent:        #F4B400;
  --accent-strong: #E0A100;
  --accent-ink:    #5A4400;
  --accent-soft:   #FCEEBE;

  /* 農場綠輔色 */
  --leaf:      #3E7A4B;
  --leaf-soft: #E5F0E3;

  /* 線條 */
  --border:        #EEE4CD;
  --border-strong: #E2D5B4;

  --danger:  #C8472B;
  --success: #2E7D4F;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  --shadow-card: 0 14px 34px -16px rgba(120, 92, 12, .28);
  --shadow-soft: 0 6px 20px -10px rgba(0, 0, 0, .16);

  --font-ui:      'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-display: 'Baloo 2', 'Noto Sans TC', sans-serif;
}

/* 備用主題(App 可切換 data-theme="leaf") */
[data-theme="leaf"] {
  --bg-page:    #F6FAF4;
  --bg-cream:   #ECF5EA;
  --accent:        #4CA85F;
  --accent-strong: #3E8C4F;
  --accent-ink:    #16361E;
  --accent-soft:   #DCEFDD;
  --fg-1: #1F2A1F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-1); margin: 0; }
p { margin: 0; }
::selection { background: var(--accent-soft); color: var(--fg-1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }