/* WAKE（仮）デザインのトークン。色・文字・余白・角・動きは、ここだけで差し替える。
   10/12 決定：A改がベース。地は純黒ではなく、ほんの少し青を混ぜた黒。
   10/12 夜：Celine・Prada のようなハイブランドの見せ方に。角丸なし・影なし・色は白黒だけ。写真に語らせ、文字は小さく静かに。
   10/12 夜3回目：使いやすさを戻す。Louis Vuitton・LOEWE・Prada の流れ（全面の写真 → 真ん中の見出し → 写真の並び → 一覧へ）に合わせ、文字は普通の太さで読みやすく。
   10/12 夜2回目：地は白。画面の幅いっぱいを使い、写真はすき間なしで並べる。黒は今日決めた青みの黒を「墨」として使う。 */
:root{
  /* 色（10/13 決定：白 #FAFCFF・黒 #1F1405（同日 #120A07 から変更）・青 #327CBD。カラー調整ページで選んだ3色）
     グレーは白と黒を混ぜて作った値（調整ページと同じ混ぜ方） */
  --bg:#FAFCFF;          /* ページの地（ほんの少し青みのある白） */
  --ink:#1F1405;         /* 黒（茶を含んだ温かい黒）。文字・ボタン */
  --bg-deep:#1F1405;     /* 動画の背景 */
  --cut-bg:linear-gradient(180deg,#F3F5F8 0%,#E8E9EB 100%); /* 切り抜いた船の地 */
  --tone-1:radial-gradient(120% 90% at 50% 30%,#F1F3F5 0%,#E4E5E6 100%); /* カードごとに少しずつ違う地 */
  --tone-2:radial-gradient(120% 90% at 50% 30%,#F6F7FA 0%,#E8E9EB 100%);
  --tone-3:radial-gradient(120% 90% at 50% 30%,#EFF0F2 0%,#E0E0E1 100%);
  --tone-4:radial-gradient(120% 90% at 50% 30%,#F3F5F8 0%,#E6E7E8 100%);
  --surface:#F1F3F5;     /* 一段沈めた面（凪よみの帯・地図・フッター） */
  --surface-2:#EBECED;
  --text:#1F1405;        /* 文字 */
  --sub:#726C64;         /* 補助の文字・単位 */
  --line:#E2E2E4;        /* 細い罫 */
  --line-hi:#C5C4C3;     /* 押せる部品の枠 */
  --tick:#D7D7D7;        /* 計器の消えている目盛り */
  --accent:#327CBD;      /* 青。選んでいる印・即納・比べる・艇を追加・タブの下線・計器の灯り */
  --accent-ink:#FFFFFF;  /* 青の上の文字（白に固定） */
  --shine:#327CBD;       /* 艇名の上を一度だけ通る光 */
  --btn:#1F1405;
  --btn-ink:#FAFCFF;
  --btn-hover:#393023;   /* 黒いボタンにカーソルを乗せたとき */
  --bar:#FAFCFF;         /* 上に残る帯（後ろの文字が透けないよう、塗りつぶす） */
  --scrim:31,20,5;       /* 映像の上の暗がり（黒の rgb の数字だけ） */

  /* 文字（端末の標準書体だけ。Mac・iPhone は SF Pro とヒラギノ角ゴ）。見出しは中くらいの太さ、字間は詰めすぎず広げすぎず */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fs-xs:12px;   /* 注記・ラベル */
  --fs-s:13px;    /* 項目名・ナビ・ボタン */
  --fs-m:15px;    /* 本文（スマホ） */
  --fs-b:16px;    /* 本文（PC） */
  --fs-h3:16px;   /* 小見出し */
  --fs-h2:clamp(20px,1.8vw,26px);   /* セクションの見出し */
  --fs-h1:clamp(26px,2.6vw,38px);   /* 艇名・ページの見出し */
  --fs-hero:clamp(24px,2.6vw,40px); /* ヒーローの一行 */
  --fs-giant:clamp(64px,13vw,240px);/* 画面いっぱいの大きな文字 */
  --fs-num:clamp(26px,2.4vw,34px);  /* 計器・スペックの数字 */
  --w-light:400; --w-reg:400; --w-mid:600;
  --track:.04em;       /* 日本語の見出し */
  --track-wide:.08em;  /* 英字の名前・ボタン */

  /* 余白（4の倍数） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:120px;
  --sec:clamp(72px,8vw,120px); /* セクションの上下 */
  --gutter:clamp(16px,2.4vw,40px);
  --max:100%;          /* 画面の幅いっぱいに使う */
  --hd:64px;           /* ヘッダーの高さ */

  /* 動き（ゆっくり始まり、長く減速して止まる） */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.3s; --t-mid:.7s; --t-slow:1.8s;
}