/*
 * 食在南得 — 設計變數（Design Tokens）
 *
 * 整個網站的顏色、字體、字級、圓角、陰影、動畫都定義在這裡。
 * 想換配色或換字體，只要改這個檔案，程式完全不用動。
 *
 * 設計概念：「學生的方格紙美食手帳」
 *   logo 是用紅筆寫在白紙上的字，所以底色就是那張紙：近白色＋淡淡的方格線。
 *   唯一大膽的元素是「拍立得＋紙膠帶」（首頁拼貼、今日一味），其他地方都保持安靜。
 *
 * 配色（文字顏色都對白底通過 WCAG AA 4.5:1）
 *   紙 Paper     #fffef9   logo 的白紙
 *   格線 Grid    #f4eee1   方格紙的線
 *   墨 Ink       #2a1f1a   文字
 *   朱 Vermilion #d83126   logo 的紅筆（白字放在上面 4.8:1）
 *   蛋黃 Yolk    #f2b630   陽光、紙膠帶
 *   蔥 Scallion  #237a48   營業中（5.3:1）
 */

:root {
  /* ── 紙與墨 ── */
  --paper: #fffef9;
  --paper-2: #faf5ea;        /* 稍深的紙：面板、輸入框底色 */
  --grid: #f4eee1;           /* 方格紙格線（淡到不搶內容） */
  --card: #ffffff;
  --ink: #2a1f1a;
  --ink-2: #5f4f45;          /* 次要文字（9.0:1） */
  --ink-3: #7d6a5c;          /* 提示文字（5.2:1） */
  --line: #e8dcc6;

  /* ── 主色 ── */
  --red: #d83126;            /* logo 朱紅 */
  --red-deep: #b0241b;       /* 小字用的紅 */
  --red-tint: #fdeae5;
  --yolk: #f2b630;           /* 蛋黃（只當底色、膠帶，不當文字色） */
  --yolk-deep: #8a5f00;      /* 黃色系的文字 */
  --yolk-tint: #fff3d1;
  --scallion: #237a48;       /* 營業中 */
  --scallion-tint: #e2f3e7;

  /* ── 分類色（地圖圖釘、分類小圓點；不拿來當文字底色） ── */
  --cat-rice: #d83126;
  --cat-noodles: #ee7a2f;
  --cat-soup: #1c8a9a;        /* 湯・羹：清湯的湖水綠 */
  --cat-snack: #9a6b3f;       /* 小吃：滷汁的醬色 */
  --cat-light: #f2b630;
  --cat-foreign: #2e8b57;
  --cat-hotpot: #4b5bd1;
  --cat-dessert: #e0628f;

  /* ── 字體：兩種，角色分明 ── */
  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;  /* 內文：電腦內建，不另外下載 */
  --font-hand: "LXGW WenKai TC", "Noto Sans TC", "PingFang TC", serif;  /* 標題：手寫感，呼應 logo */

  /* ── 字級：1.25 倍等比（大三度），以 16px 為基準 ── */
  --fs-xs: 0.8rem;     /* 12.8 */
  --fs-s: 0.875rem;    /* 14 */
  --fs-0: 1rem;        /* 16 內文 */
  --fs-1: 1.25rem;     /* 20 */
  --fs-2: 1.5625rem;   /* 25 區塊標題 */
  --fs-3: 1.953rem;    /* 31 頁面標題 */
  --fs-4: clamp(1.953rem, 5vw, 2.441rem);  /* 31–39 */
  --fs-5: clamp(2.441rem, 7vw, 3.815rem);  /* 39–61 首頁大字 */

  /* ── 尺寸 ── */
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --header-h: 64px;
  --tabbar-h: 64px;
  --maxw: 1120px;
  --measure: 38em;     /* 內文行長上限（中文約 38 字） */

  /* ── 陰影：只用在「浮起來」的東西（彈出視窗、拍立得、按鈕） ── */
  --shadow-s: 0 1px 2px rgba(90, 60, 20, .08);
  --shadow: 0 2px 6px rgba(90, 60, 20, .08), 0 10px 24px rgba(90, 60, 20, .08);
  --shadow-l: 0 14px 40px rgba(90, 60, 20, .18);

  /* ── 動畫 ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s;
  --t: .28s;

  color-scheme: light;
}

/* 分類色對應：元素加上 data-cat="rice" 就會拿到 --cat */
[data-cat="rice"]    { --cat: var(--cat-rice); }
[data-cat="noodles"] { --cat: var(--cat-noodles); }
[data-cat="soup"]    { --cat: var(--cat-soup); }
[data-cat="snack"]   { --cat: var(--cat-snack); }
[data-cat="light"]   { --cat: var(--cat-light); }
[data-cat="foreign"] { --cat: var(--cat-foreign); }
[data-cat="hotpot"]  { --cat: var(--cat-hotpot); }
[data-cat="dessert"] { --cat: var(--cat-dessert); }

/* 使用者設定「減少動態效果」：所有動畫、轉場一律關掉 */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}