/* ============================================================
   OPTIC — design tokens
   ・地は淡いグレー、面は白。角は丸く、影はやわらかく
   ・文字はサンセリフ一種類。太さと大きさだけで差をつける
   ・番号マーカーは白い丸。選ばれたら黒に反転する
   ・有彩色は「いいね」の赤だけ
   ============================================================ */
:root{
  color-scheme:light;
  --f-ui:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-display:var(--f-ui);
  --f-mono:var(--f-ui);
  --f-jp:'M PLUS 2','Hiragino Sans','Yu Gothic',sans-serif;

  /* ---- ground ---- */
  --bg:#F3F3F5;
  --bg-2:#EAEAEE;
  --well:#E4E4E9;
  --card:#FFFFFF;
  --ink:#101014;
  --ink-2:#55555E;
  --mut:#6A6A74;          /* 4.8:1 以上。ドメイン文字が本文基準を満たす */
  --line:rgba(16,16,20,.09);
  --line-2:rgba(16,16,20,.055);

  /* ---- 影。輪郭ではなく影で浮かせる ---- */
  --sh-1:0 1px 2px rgba(16,16,20,.05);
  --sh-2:0 2px 6px rgba(16,16,20,.07), 0 1px 2px rgba(16,16,20,.05);
  --sh-3:0 6px 20px -4px rgba(16,16,20,.16), 0 2px 6px rgba(16,16,20,.08);
  --sh-mk:0 2px 7px rgba(0,0,0,.26), 0 0 0 .5px rgba(0,0,0,.05);

  /* ---- accents ---- */
  --red:#E0213F;          /* いいね と、枠のささやかな差し色 */
  --warn:#C62B2B;         /* 取り消せない操作だけ */
  --on:#fff;

  /* 他ページがまだ参照している名前だけ残す（実測して確認済み） */
  --hot:var(--warn);                 /* p-settings.js */
  --sug-hi:rgba(16,16,20,.05);
  --cred-hi:rgba(16,16,20,.035); --cred-sel:rgba(16,16,20,.05);
  /* 面の上に置く固定色。写真やテーマに左右されない */
  --on-photo:#FFFFFF; --on-photo-ink:#101014;

  /* ---- metrics ---- */
  --r-1:10px; --r-2:14px; --r-3:18px; --r-pill:999px;
  --pad:18px; --gap:14px; --head:58px;
  --shell:980px;
  --max:var(--shell);     /* p-about.js が参照 */
  --veil:rgba(16,16,20,.4);

  /* ---- motion ---- */
  --t1:120ms; --t2:200ms; --t3:320ms; --t4:520ms;
  --e:cubic-bezier(.3,.7,.3,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-pop:cubic-bezier(.2,1.25,.4,1);
}
@media (min-width:640px){ :root{ --pad:24px; --gap:18px; } }
@media (min-width:1024px){ :root{ --pad:28px; --gap:20px; --head:62px; } }

:root[data-t="dark"]{
  color-scheme:dark;
  --bg:#0C0C0F; --bg-2:#17171B; --well:#1E1E23; --card:#17171B;
  --ink:#F3F3F5; --ink-2:#A2A2AC; --mut:#9A9AA6;   /* 暗い面でも 6.4:1 */
  --line:rgba(243,243,245,.11); --line-2:rgba(243,243,245,.06);
  --sh-1:none;
  --sh-2:0 2px 8px rgba(0,0,0,.5);
  --sh-3:0 8px 26px -6px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --sug-hi:rgba(243,243,245,.07);
  --cred-hi:rgba(243,243,245,.045); --cred-sel:rgba(243,243,245,.07);
  --veil:rgba(0,0,0,.62);
}