/* オンライン支援のボードゲーム＆1on1ツール：色・文字・形の共通の決まり
   tagiii.me（portfolio の style.css）と同じ色と線を土台にしている */

/* 文字は tagiii.me と同じ Zen Maru Gothic。外部から読みこまず、同梱したファイルを使う
   （shared/fonts/。SIL Open Font License 1.1。作り方は scripts/build_fonts.py）。
   読みこみが終わるまでは、端末に入っている文字で先に表示する */
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ZenMaruGothic-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/ZenMaruGothic-Black.woff2") format("woff2");
}

:root {
  /* 色（tagiii.me と共通） */
  --cream: #fff8ec;
  --cream-deep: #ffecd0;
  --paper: #ffffff;
  --ink: #3b2414;
  --ink-soft: #76583f;
  --line: #2a1a0e;
  --green: #1e9a4b;
  --green-deep: #157a3a;
  --coral: #f07a6a;
  --tile-border: #f1e1c8;

  /* 色（このツール集で足したもの） */
  --green-shade: #0f5e2b; /* 緑の台の、影になる面 */
  --coral-deep: #d95f50;
  --sun: #f6c453;
  --sky: #7db7e8;
  --lilac: #b9a0e6;

  /* 文字。2番目からは、同梱の文字が読みこめなかったときの代わり */
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", sans-serif;

  /* Zen Maru Gothic の数字と英字は、行のまんなかより少し下に出る（文字の大きさの8.6%。
     フォントの中の数値から計算した）。丸の中の数字などは、下にこの2倍のすき間
     （padding-bottom: calc(var(--num-lift) * 2)）を入れて、まんなかに見えるよう持ち上げる */
  --num-lift: 0.086em;

  /* 形 */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --border: 2.5px solid var(--line);
  --edge: 0 4px 0 var(--line); /* 下方向のくっきりした影＝厚み */

  /* 動き */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-back: cubic-bezier(0.3, 1.35, 0.5, 1);
  --t-fast: 120ms;
  --t-move: 420ms;
  --t-flip: 520ms;

  color-scheme: light;
}

/* 動きを減らす（OSの設定か、アプリ内の切り替え）。shared/js/util.js が data-motion を付ける */
:root[data-motion="reduce"] {
  --t-fast: 0ms;
  --t-move: 0ms;
  --t-flip: 0ms;
}