/* =========================================================================
   DESIGN TOKENS — Loopick 訂餐網站（理想版）色票
   來源：Loopick_訂餐網站_理想版網頁版_元件素材.txt（Figma CSS 匯出）
   設計系統唯一入口：所有元件 CSS 只引用 token，不寫死色碼／圓角／字型。
   ========================================================================= */
:root{

  /* ---------- 品牌色 ---------- */
  --loopick-o:#FC7044;        /* Loopick O 主橘 */
  --loopick-b:#0E5075;        /* Loopick B 深藍 */
  --loopick-w:#FEFCF5;        /* Loopick W 米白 */
  --loopick-p:#ABC3FF;        /* Loopick P 淡藍 */

  /* ---------- 色彩：底層 ---------- */
  --c-bg:#FEFCF5;                        /* 頁面底色（Loopick W） */
  --c-bg-grad-1:#FEE7D5;                 /* 背景漸層 1 淺橘 */
  --c-bg-grad-2:#F6EDDC;                 /* 背景漸層 2 米 */
  --c-bg-grad-3:#FDFBF4;                 /* 背景漸層 3 暖白 */
  --c-surface:rgba(255,255,255,.88);     /* 卡片 */
  --c-surface-solid:#FFFFFF;             /* 抽屜、彈窗 */
  --c-surface-sunken:#F6EDDC;            /* 內嵌區塊、資訊條 */
  --c-line:#EBEBEB;                      /* 邊框、分隔線 */
  --c-line-strong:#FFD7B8;               /* 強調邊框、次要按鈕框 */
  --c-scrim:rgba(35,24,21,.45);          /* 抽屜遮罩（Black 透明） */

  /* ---------- 色彩：文字 ---------- */
  --c-text:#453E3E;                      /* 內文 Gray */
  --c-text-strong:#231815;               /* 標題 Black */
  --c-muted:#A6A6A6;                     /* 次要文字、label */
  --c-on-primary:#FEFCF5;                /* 主色上的文字 */

  /* ---------- 色彩：語意 ---------- */
  --c-primary:#FC7044;                   /* 主色：CTA、主按鈕、選中狀態 */
  --c-primary-hover:#E85B2C;
  --c-primary-soft:#FEE7D5;
  --c-focus:rgba(252,112,68,.22);        /* focus ring */

  --c-accent:#0E5075;                    /* 次強調：金額、標題、footer */
  --c-accent-hover:#0A3C59;
  --c-accent-soft:#E2ECF3;

  --c-ok:#09D775;                        /* 成功 */
  --c-ok-soft:#E1FAEE;
  --c-danger:#F33E35;                    /* 錯誤、必填、拒單 */
  --c-danger-soft:#FDE7E5;
  --c-warn:#FFB908;                      /* 提醒、待確認 */
  --c-warn-soft:#FFF3D6;
  --c-info-soft:#FEE7D5;                 /* 一般狀態底色 */

  /* ---------- 字型 ---------- */
  --font-display:'Noto Sans TC','Noto Sans',sans-serif;  /* 標題 */
  --font-body:'Noto Sans TC','Noto Sans',sans-serif;     /* 內文／UI */

  /* ---------- 圓角（形狀一致鎖） ---------- */
  --r-card:20px;                         /* 卡片、區塊 */
  --r-btn:100px;                         /* 按鈕：pill */
  --r-input:10px;                        /* 輸入框 */
  --r-pill:999px;                        /* 標籤、chip */

  /* ---------- 陰影 ---------- */
  --sh-1:0 2px 8px rgba(69,62,62,.08);
  --sh-2:0 4px 16px rgba(69,62,62,.14);
  --sh-3:0 -4px 16px rgba(69,62,62,.16);

  /* ---------- 間距（8px 網格） ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* ---------- 動效 ---------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.25s;
}