/*
 * デザイントークン。値の元は docs/design.md の表。
 * 色・余白・大きさをここだけで定義し、ほかのCSSは var() で参照する。
 * 大きさを rem にしているのは、端末の文字サイズ設定に合わせて全体が伸び縮みするようにするため（16px = 1rem）。
 */
:root {
  --color-bg: #e8f4fb;
  --color-surface: #ffffff;
  --color-text: #23324a;
  --color-text-soft: #4d5d78;
  --color-primary: #2c63c4;
  --color-on-primary: #ffffff;
  --color-accent-1: #ffb23e;
  --color-accent-2: #f2708f;
  --color-accent-3: #4fbf8b;
  --color-accent-4: #8f7be8;

  /* ピアノの鍵盤（ド〜高いド）。となり同士は、色あいに加えて明るさも変えてある */
  --color-key-1: #f47c7c;
  --color-key-2: #ffa95c;
  --color-key-3: #ffdd5e;
  --color-key-4: #9bd65c;
  --color-key-5: #3bbfae;
  --color-key-6: #6aaef5;
  --color-key-7: #a48bec;
  --color-key-8: #f79ac4;

  /*
   * おえかきの絵の具（あか、だいだい、みどり、あお、むらさき、くろ）。
   * 新しい値は足さず、既存の色に別の名前を付ける。白い紙の上で見える色だけを選んである
   */
  --color-ink-1: var(--color-accent-2);
  --color-ink-2: var(--color-accent-1);
  --color-ink-3: var(--color-accent-3);
  --color-ink-4: var(--color-primary);
  --color-ink-5: var(--color-accent-4);
  --color-ink-6: var(--color-text);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;

  --tap-min: 4rem;
  --corner-size: 4.5rem;

  /*
   * 端末の表示（時計や電池、下の操作バー、カメラの切り欠き）と重ならないための余白。
   * Androidアプリ版は画面の端まで広がるので、端末が教えてくれる分だけ内側に寄せる。
   * 前の値は Capacitor が入れる値（古い WebView 用）、後ろはブラウザの標準の値。どちらもなければ 0
   */
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --stroke: 0.25rem;
  --pop: 0.375rem;
  --shadow-pop: 0 var(--pop) 0 var(--color-text);

  --font-rounded:
    "Hiragino Maru Gothic ProN", "HGMaruGothicMPRO", "BIZ UDPGothic", "Yu Gothic UI", "Noto Sans JP",
    sans-serif;
  --label-lg: clamp(1.5rem, 5vw, 2rem);
  --label-md: clamp(1.25rem, 4vw, 1.5rem);
  --label-sm: 1.25rem;
}