/* デザイントークン（開発ガイドラインA-3）。
   2026-08 POP方針への更新：暖色の背景・角丸を基調にする（suu-haa.jp参照）。
   2026-08 デザイン刷新：黄色ベース＋水色アクセントの配色に変更し、フォントもNoto Sans JPに統一
   （参考：https://origami-j6wyqvmix-junichi-kume-s-projects.vercel.app/）。
   画面個別CSSは、ここにない色・余白・角丸を新しく作らず、この変数だけを参照すること。 */

:root {
  --ink: #17222E;
  --ink-soft: #40495A;
  --ink-faint: #69707D;
  --paper: #FBF6EA;
  --surface: #FFFFFF;
  --line: #DDD0AC;
  --accent: #00B6CF;
  --accent-soft: #D6F4F8;
  --accent-deep: #007C94;
  --navy: #003A5C;
  --confirm: #3F8A5C;
  --confirm-soft: #DBEEE1;
  --pending: #C98A28;
  --pending-soft: #F6E7C9;
  --online: #4A6FE3;
  --pickup: #F72864;
  --pickup-soft: #FDE3EC;
  --highlight: #FEE96A;
  --highlight-soft: #FFFBEB;
  --highlight-line: #FFE082;

  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* 余白スケール（A-3）。これ以外の値を新規に使わない */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* 角丸スケール（POP方針）。カード・ボタン・入力欄はこの3段階だけを使う */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* 影（カードの浮遊感） */
  --shadow-card: 0 2px 10px rgba(23, 34, 46, 0.11);
  --shadow-card-hover: 0 6px 18px rgba(23, 34, 46, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F5F3EC; --ink-soft: #C7CCC1; --ink-faint: #979D91;
    --paper: #201C16; --surface: #2A2521; --line: #55493A;
    --accent: #4FD8EA; --accent-soft: #123840;
    --accent-deep: #7EE6F2; --navy: #8FB8D9;
    --confirm: #8FCBA5; --confirm-soft: #223228;
    --pending: #E8BE72; --pending-soft: #33280F;
    --online: #7C9CFF;
    --pickup: #FF7FAE;
    --pickup-soft: #3A1F29;
    --highlight: #C9A227; --highlight-soft: #332B12; --highlight-line: #6B5A22;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --ink: #F5F3EC; --ink-soft: #C7CCC1; --ink-faint: #979D91;
  --paper: #201C16; --surface: #2A2521; --line: #55493A;
  --accent: #4FD8EA; --accent-soft: #123840;
  --accent-deep: #7EE6F2; --navy: #8FB8D9;
  --confirm: #8FCBA5; --confirm-soft: #223228;
  --pending: #E8BE72; --pending-soft: #33280F;
  --online: #7C9CFF;
  --pickup: #FF7FAE;
  --pickup-soft: #3A1F29;
  --highlight: #C9A227; --highlight-soft: #332B12; --highlight-line: #6B5A22;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] {
  --ink: #17222E; --ink-soft: #40495A; --ink-faint: #69707D;
  --paper: #FBF6EA; --surface: #FFFFFF; --line: #DDD0AC;
  --accent: #00B6CF; --accent-soft: #D6F4F8;
  --accent-deep: #007C94; --navy: #003A5C;
  --confirm: #3F8A5C; --confirm-soft: #DBEEE1;
  --pending: #C98A28; --pending-soft: #F6E7C9;
  --online: #4A6FE3;
  --pickup: #F72864;
  --pickup-soft: #FDE3EC;
  --highlight: #FEE96A; --highlight-soft: #FFFBEB; --highlight-line: #FFE082;
  --shadow-card: 0 2px 10px rgba(23, 34, 46, 0.11);
  --shadow-card-hover: 0 6px 18px rgba(23, 34, 46, 0.18);
}