/**
 * 案件の変数。色・書体・字間・ルートのfont sizeの基準・動きの速さを持つ。
 *
 * smooooth-code-snippetsの01_colors.css・09_typography.css・11_interaction.cssの
 * :rootと、字間の基本の指定を集めたもの。案件のデザインに合わせて値を変える。
 * ユーティリティのclass（utilities.css）と、main.cssは、ここの変数を参照する。
 */

:root {
  --snow: #ffffff;
  --ink: #1f332a;
  --gray: #808080;
  --light-gray: #d3d3d3;
  --dark-gray: #696969;
  /* Rebirthの色。Figmaのデザインの値 */
  --green: #284e3a;
  --deep: #0f241a;
  --gold: #8b7857;
  --gold-light: #a69364;
  --cream: #f7f4ed;
  --line: #eceee6;
  /* --redは必須バッジ、--blueは記事本文のリンク色として参照される。
   * いずれも白地・白文字とのコントラスト比がWCAG AAを満たす値を初期値としている。 */
  --red: #d32f2f;
  --blue: #1a5fb4;

  /* 影とスクリム（画像上に敷く暗幕）の色。案件で上書きできるよう変数にしている。
   * 濃さは各クラス側でアルファを指定するため、ここでは色だけを持つ。 */
  --shadow-color: #000000;
  --scrim-color: var(--deep);
}

:root {
  --font-sans: "Manrope", "Noto Sans JP", sans-serif;
  --font-serif: "Georgia", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    "SFMono-Regular", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  /* 英字の小見出し・数字（Manropeの細い太さ） */
  --font-display: "Manrope", "Noto Sans JP", sans-serif;

  /* 全体のベースとなる文字間隔（大元）。
   * letter-spacing の計算値は「絶対長」として解決され、em はその値を宣言した
   * 要素の font-size で解決されたうえで、絶対長のまま子要素へ継承される
   * （CSS Text Module Level 3 / MDN）。
   * そのため body だけに 0.08em を指定すると、font-size の異なる見出し等では
   * 見た目の字間が変わってしまう。
   * この変数を各要素で `letter-spacing: var(--tracking)` として使うことで、
   * var() が使用箇所で展開され、各要素が自身の font-size で em を解決するため、
   * どの要素でも同じ相対字間になる。
   * ベース値を変更する場合はこの 1 行を書き換える（字間なしにするなら 0）。 */
  --tracking: 0.08em;

  /* 0px から 414px:
   * 375pxの画面幅で約16pxに到達するvwを設定 (16 / 375 = 0.0426667...)
   */
  --font-size-base: 4.26667vw;
  /* 414px から 768px:
   * 414pxの画面幅で約16pxに到達するvwを設定 (16 / 414 = 0.038647...)
   */
  @media screen and (min-width: 414px) {
    --font-size-base: 3.8647vw;
  }
  /* 768px から 1024px:
   * 1024pxの画面幅で約20pxに到達するvwを設定 (20 / 1024 = 0.019531...)
   */
  @media screen and (min-width: 768px) {
    --font-size-base: 1.9531vw;
  }
  /* 1024px から 1200px:
   * 1200pxの画面幅で約18pxに到達するvwを設定 (18 / 1200 = 0.015)
   */
  @media screen and (min-width: 1024px) {
    --font-size-base: 1.5vw;
  }
  /* 1200px 以上:
   * 1200px以上の画面幅で約12pxに到達するvwを設定 (12 / 1200 = 0.01)
   */
  @media screen and (min-width: 1200px) {
    --font-size-base: 1vw;
  }
}

/* ベースの適用。
 * var() は使用箇所で展開されるため、各要素が自身の font-size で em を解決する。
 * これにより「body への一括指定」と「各タグへの個別指定」の字間差が解消される。
 * ::before / ::after は含めない（アイコンフォント等に字間が付くのを避けるため）。 */
* {
  letter-spacing: var(--tracking);
}

/* 速度とイージングは変数で上書きできる。tracking と同じ方式。 */
:root {
  --duration: 200ms;
  --easing: ease;
}

/* ボタン・カード・画像のリンク（中に p・div・img を持つ a）は、ホバーで下線を付けない。
 * main.css の a:hover の下線（Bootstrap 4 の Reboot と同じ値）は、文中のリンクだけに残す。
 * main.css より先に読み込むため、:has() で詳細度を上げて打ち消す。
 * ホバーの反応は、リンクの種類ごとにユーティリティかページの CSS で付ける。 */
a:has(> div, > p, > img):hover {
  text-decoration: none;
}