/* Hallmark · route: custom (tuned) · vibe: "北海道の現場・人の顔が見える・紺と黄色の安全標識"
 * paper: #fff / cream · accent: oklch(88.5% 0.165 93) yellow · action: LINEの緑
 * display: Zen Kaku Gothic New 900 · body: BIZ UDPGothic
 * 参考の型：宅トラ（色面＋白い角丸の紙＋申込みの塊の繰り返し）・Cycle by GMO（線画のイラスト・場面の切り替え）
 * 絵の色は LP_作業/make_illustrations.py と同じ値（どちらかを変えたら両方直す）
 */
:root {
  /* 色：紺・黄色・白。行動はLINEの緑。✕だけ赤 */
  --color-ink: oklch(27% 0.07 268);          /* 文字・線（絵の K） */
  --color-ink-2: oklch(40% 0.085 266);       /* 絵の NAVY2 */
  --color-night: oklch(23% 0.06 268);        /* ページの地 */
  --color-night-2: oklch(19% 0.05 268);      /* 足元 */
  --color-paper: oklch(100% 0 0);
  --color-cream: oklch(98.5% 0.012 90);
  --color-sky: oklch(82% 0.065 252);
  --color-sky-2: oklch(93% 0.03 245);
  --color-sky-3: oklch(96.5% 0.015 245);
  --color-hero-sky: oklch(92% 0.033 223.4);  /* 冒頭の動画の空の色（#ceeaf5）。スマホで動画の上に置く帯をつなげる */
  --color-gray: oklch(91% 0.01 265);
  --color-gray-2: oklch(80% 0.018 265);
  --color-muted: oklch(45% 0.035 268);
  --color-accent: oklch(88.5% 0.165 93);     /* 黄色（絵の Y） */
  --color-accent-2: oklch(96.5% 0.06 95);    /* 薄い黄色（絵の Y2） */
  --color-accent-deep: oklch(78% 0.16 82);
  --color-line: oklch(72.4% 0.205 148.6);    /* LINEの緑 #06C755 */
  --color-line-deep: oklch(57.4% 0.16 149.3);
  --color-cross: oklch(60% 0.2 28);
  --color-on-dark: oklch(100% 0 0);
  --color-on-dark-2: oklch(86% 0.02 265);
  --color-focus: oklch(62% 0.19 255);
  --color-shade: oklch(27% 0.07 268 / 0.12);
  --color-shine: oklch(100% 0 0 / 0.45);       /* ボタンを流れる光 */
  --color-text-shadow: oklch(0% 0 0 / 0.22);   /* 緑の上の白い字を締める */

  /* 印（形だけ。色は background で付ける） */
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.6 1.6 4.9 4 6.3-.2 1.1-.8 2.6-1.6 3.7 2-.2 4-1.1 5.3-2.2.8.1 1.5.2 2.3.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/%3E%3C/svg%3E");
  --icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");

  /* 書体 */
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 文字の大きさ（スマホ基準） */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --text-3xl: clamp(1.75rem, 1.2rem + 2.6vw, 2.875rem);
  --text-display: clamp(2.125rem, 1.3rem + 4.2vw, 4rem);

  /* 余白 */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --container: 66rem;
  --sheet-r: clamp(1.5rem, 0.9rem + 3vw, 2.75rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border: 2.5px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 700ms;
}