/* ═══════════════════════════════════════════════════
   MODERNEAST Design System — CSS Variables
   前衛東方 雙入口網站 品牌色彩與間距系統
   ═══════════════════════════════════════════════════ */

:root {
  /* ── 核心色票 ── */
  --bg: #f7f5f1;                      /* 生亞麻 — 頁面底色 */
  --ink: #1c1b18;                     /* 暖炭黑 — 主要文字 */
  --accent: #9a8456;                  /* 品牌金 — 主色調 */
  --mute: #8a8580;                    /* 暖灰 — 次要文字 */
  --line: #e6e1d8;                    /* 米線 — 分隔線/邊框 */
  --card: #ffffff;                    /* 白 — 卡片底色 */
  --dark: #2a2620;                    /* 深棕 — Hero/Footer */
  --overlay: rgba(28, 27, 24, .5);    /* 覆蓋層 — 圖片遮罩 */

  /* ── 擴充色票 ── */
  --accent-light: #b09a6a;            /* 淺金 — hover/活躍態 */
  --accent-dark: #7a6a42;             /* 深金 — 按下態 */
  --terra: #a0785a;                   /* 赤陶 — 師傅端 CTA */
  --stone: #c8bfb0;                   /* 砂岩 — 次要背景 */
  --sage: #8a9484;                    /* 鼠尾草 — 認證/成功 */
  --error: #c45c5c;                   /* 珊瑚紅 — 錯誤/警告 */
  --surface-warm: #f2ece3;            /* 暖底 — 交替區塊 */
  --surface-cool: #eceae6;            /* 冷底 — 交替區塊 */

  /* ── 間距系統 (8px 基礎) ── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 100px;

  /* ── 圓角 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ── 陰影 ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .08);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, .06);

  /* ── 過渡 ── */
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: .2s;
  --duration-normal: .4s;
  --duration-slow: .8s;

  /* ── 斷點 (供 JS 參考) ── */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1025px;
  --bp-wide: 1400px;

  /* ── 容器寬度 ── */
  --container-max: 1100px;
  --container-wide: 1400px;
  --container-narrow: 720px;

  /* ── LINE 品牌色 ── */
  --line-green: #06C755;
}