/*
 * デザイントークン（色・書体・余白・タータン・動き）
 *
 * 他のサイトに転用するときは、このファイルの値だけを差し替える。
 * components.css はここの変数しか参照しない。
 */

:root {
  /* ===== 色: 青の階調（7 段階）=====
   * 基準は現行テーマの --primary（#0b6ef6）= blue-600。
   * 濃い側はタータンの地・ロゴの紺に、淡い側は現行の #e8f0fe に合わせている。 */
  --blue-900: #0a1f44; /* 濃紺: 見出し・タータンの地 */
  --blue-800: #123a7a; /* ボタンのホバー・強調 */
  --blue-700: #0b4fb8; /* ボタン・リンク */
  --blue-600: #0b6ef6; /* 現行の基準色。アイコン・線・アクセント */
  --blue-400: #6aa5f9; /* アイコンの補助線・濃い地の上のアクセント */
  --blue-200: #c5dbfc; /* 枠線・濃紺地の上の文字 */
  --blue-100: #e8f0fe; /* 淡い面（現行と同じ） */

  /* 白と、青みを帯びたグレー */
  --white: #fff;
  --gray-900: #1c2b42; /* 本文 */
  --gray-600: #46566e; /* 補足の文字 */
  --gray-400: #76859b; /* 入力欄の枠 */
  --gray-200: #d3ddea; /* 区切り線 */
  --gray-50: #f5f8fc;  /* 淡い背景 */

  /* エラー表示だけに使う色 */
  --error: #b42318;
  --error-bg: #fef3f2;

  /* 役割ごとの色（部品はこちらを参照する） */
  --color-text: var(--gray-900);
  --color-text-soft: var(--gray-600);
  --color-heading: var(--blue-900);
  --color-link: var(--blue-700);
  --color-accent: var(--blue-600);
  --color-line: var(--gray-200);
  --color-surface: var(--white);
  --color-surface-soft: var(--gray-50);
  --color-surface-tint: var(--blue-100);
  --color-inverse: #1d56a8; /* ヘッダーの帯・フッター・実績の地。濃紺より一段明るい青 */

  /* ===== 書体 ===== */
  /* 本文は端末のゴシック体（Web フォントは日本語だと重く、読み込み後の組み直しに時間がかかるため）。
   * Windows の游ゴシックは標準の太さだと細くかすれるので、中太（Medium）を先に指定する */
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 見出し・ヒーローの文（明朝） */
  --font-heading: var(--font-display);
  --heading-weight: 600;
  --heading-tracking: .06em;
  --line-body: 1.9;
  --line-heading: 1.5;

  /* 文字の大きさ（rem。html の基準は 17px、広い画面で 18px） */
  --text-xs: .8rem;    /* 注記の下限（約 14px） */
  --text-sm: .9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem);
  --text-3xl: clamp(1.65rem, 1.1rem + 2.6vw, 2.4rem);

  /* ===== 余白・形 ===== */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 6rem);
  --wrap: 62rem;
  --gutter: 1.25rem;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-rest: 0 1px 2px rgba(10, 31, 68, .06);
  --shadow-lift: 0 10px 28px rgba(10, 31, 68, .12);
  --tap: 3rem; /* 押せるものの最小の高さ（約 51〜54px） */

  /* ===== 動き ===== */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .7s;

  /* ===== タータン =====
   * 当社の柄（紺地に青の帯、生成りの細い 2 本線、金の 2 本線）を CSS の線で再現する。
   * 金と生成りは柄の中だけで使う（青系統のみという方針の、柄に限った例外）。
   * --tartan-u が柄の 1 目盛り。96 目盛りで 1 回繰り返す。 */
  --tartan-u: .5px;
  --tartan-ground: var(--blue-900);
  --tartan-band: rgba(46, 116, 200, .62);
  --tartan-line: rgba(226, 216, 200, .85);
  --tartan-accent: #b07a2a;
}