/* ============================================================
   新覺 Your Neighbor Kitchen — 設計 Token 與基底（二版）
   美學方向：浮世繪 × 莫蘭迪——版畫紙上的錦繪
   語彙：暖米版畫紙底、木刻墨線、莫蘭迪靛藍×灰朱雙色、
         青海波底紋、套色錯位陰影（版畫套印的溫潤手感）
   ============================================================ */

:root {
  /* 版畫紙（亮底三階，非純白） */
  --bg: #efe9dd;
  --bg-card: #f7f3ea;
  --bg-inset: #e6dfd0;
  --bg-hover: #ddd5c4;

  /* 墨（暖灰褐文字階） */
  --tx: #3b3833;        /* 正文，對比約 9.5:1 */
  --tx-soft: #6a645a;   /* 次要，對比約 4.9:1 */
  --tx-faint: #857e70;  /* 僅裝飾與大字 */

  /* 界線 */
  --line: #d9d1c0;
  --line-strong: #bcb098;
  --line-ink: #3b3833;  /* 木刻墨線 */

  /* 藍（浮世繪藍降彩度＝莫蘭迪靛，主色） */
  --ai-700: #3c4c63;
  --ai-600: #4a5d78;
  --ai-500: #5c6f8a;
  --ai-glaze: rgba(74, 93, 120, 0.12);

  /* 朱（logo 朱紅降彩度＝灰朱，強調色） */
  --aka-700: #9c4038;
  --aka-600: #b5544a;
  --aka-500: #c96f63;
  --aka-glaze: rgba(181, 84, 74, 0.13);

  /* 狀態色（莫蘭迪化） */
  --amber-text: #7d6234;
  --amber-fill: #c2a26d;
  --amber-glaze: rgba(194, 162, 109, 0.2);
  --moss-text: #5d7053;
  --moss-fill: #96a48a;
  --moss-glaze: rgba(150, 164, 138, 0.22);

  /* 字體 */
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* 尺度 */
  --radius-s: 6px;
  --radius-m: 10px;

  /* 版畫套色錯位陰影 */
  --print-shadow: 3px 3px 0 rgba(74, 93, 120, 0.16);
  --print-shadow-ink: 3px 3px 0 rgba(59, 56, 51, 0.22);

  /* 青海波底紋（低對比靛藍線稿） */
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cg fill='none' stroke='%235c6f8a' stroke-opacity='0.13'%3E%3Ccircle cx='32' cy='32' r='30'/%3E%3Ccircle cx='32' cy='32' r='22'/%3E%3Ccircle cx='32' cy='32' r='14'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Ccircle cx='0' cy='16' r='30'/%3E%3Ccircle cx='0' cy='16' r='22'/%3E%3Ccircle cx='0' cy='16' r='14'/%3E%3Ccircle cx='0' cy='16' r='6'/%3E%3Ccircle cx='64' cy='16' r='30'/%3E%3Ccircle cx='64' cy='16' r='22'/%3E%3Ccircle cx='64' cy='16' r='14'/%3E%3Ccircle cx='64' cy='16' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* hidden 屬性永遠優先於任何 display 設定 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); margin: 0; line-height: 1.25; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
input, textarea, select { font-family: inherit; }

/* Logo：以 mask 上色，任何前景色都能套用 */
.logo-mark {
  display: inline-block;
  aspect-ratio: 477.89 / 456.16;
  background-color: currentColor;
  -webkit-mask: url("/logo.svg") no-repeat center / contain;
  mask: url("/logo.svg") no-repeat center / contain;
}

/* 無障礙 */
:focus-visible {
  outline: 2px solid var(--ai-700);
  outline-offset: 2px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 動效基準：短促利落（套印落紙），一律 transform / opacity */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}