/* alligator LP · design tokens
 * 色・書体・間隔・角丸はここだけで決める。lp.css では生の値を書かない。
 * ブランドの緑（ロゴの #2AC572）と、管理画面（app/src/client/index.css）・ゲスト向け画面の色に合わせてある。
 */
:root {
  /* 紙の面: 帳場の紙。緑の墨に寄せた、ごく薄い色味 */
  --color-paper: oklch(97.6% 0.006 100);
  --color-paper-2: oklch(94.5% 0.008 100);
  --color-rule: oklch(87% 0.008 110);
  --color-rule-strong: oklch(74% 0.01 120);
  --color-field: oklch(99.2% 0.005 100);

  /* 文字: 3 つの役割 */
  --color-ink: oklch(21% 0.015 160);
  --color-ink-2: oklch(38% 0.014 160);
  --color-muted: oklch(48% 0.012 160);

  /* ブランドの緑。面には広げない。文字に使うのは deep だけ */
  --color-brand: oklch(72.7% 0.173 154); /* #2ac572 */
  --color-brand-hover: oklch(67% 0.165 154);
  --color-brand-deep: oklch(42% 0.09 155);
  --color-brand-soft: oklch(93% 0.035 155);
  --color-on-brand: oklch(21% 0.015 160);
  --color-focus: oklch(42% 0.09 155);
  --color-danger: oklch(46% 0.16 27);

  /* 管理画面の見本（app/src/client/index.css の値を OKLCH にしたもの） */
  --ui-canvas: oklch(19.3% 0.006 286); /* #141417 */
  --ui-panel: oklch(25.5% 0.011 286); /* #222228 */
  --ui-raised: oklch(28.8% 0.013 286); /* #2a2a31 */
  --ui-fg: oklch(94% 0.005 286);
  --ui-fg-2: oklch(80% 0.008 286);
  --ui-fg-3: oklch(71.3% 0.019 286); /* #a1a1ae */
  --ui-line: oklch(34% 0.012 286);
  --ui-line-strong: oklch(41% 0.014 286);
  --ui-accent: oklch(61.8% 0.111 155); /* #469968 */
  --ui-accent-text: oklch(74% 0.106 156); /* #6fbf8f */
  --ui-accent-soft: oklch(37.7% 0.046 158); /* #2c4938 */
  --ui-accent-ink: oklch(25% 0.009 159); /* #1e2320 */
  --ui-warning: oklch(84.4% 0.106 81); /* #efc579 */
  --ui-warning-soft: oklch(31.5% 0.03 79); /* #3a3020 */
  --ui-shadow: oklch(15% 0.01 286 / 0.22);

  /* ゲスト向け画面の見本（guest の配色） */
  --kiosk-bg: oklch(96.8% 0.007 248); /* #f1f5f9 */
  --kiosk-surface: oklch(99.3% 0.005 248);
  --kiosk-ink: oklch(25% 0.01 260);
  --kiosk-muted: oklch(50% 0.015 260);
  --kiosk-line: oklch(89% 0.008 250);
  --kiosk-action: oklch(56% 0.21 26); /* 製品は #e53232。白い文字が 4.5:1 を満たすよう、少し暗くしてある */
  --kiosk-on-action: oklch(99% 0.005 26);

  /* 書体: 外部のフォントは読み込まない。見出しは明朝、本文と画面の見本はゴシック */
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP",
    "Noto Sans CJK JP", Meiryo, system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;

  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); /* 26–36 */
  --text-display: clamp(2.25rem, 1.3rem + 4.2vw, 4rem); /* 36–64 */

  /* 間隔: 4px の目盛り */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max: 72rem;
  --measure: 38rem;

  /* 動き: 色と面の切り替えだけ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;

  /* 角丸: 管理画面と同じ段（4 / 6 / 8 / 12） */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-float: 0 1px 2px oklch(21% 0.015 160 / 0.06), 0 12px 32px oklch(21% 0.015 160 / 0.1);
}