/* Modelina — generated from tokens.json */ :root, [data-theme="light"] { --colors-base-white: #ffffff; /* 純白。ライトテーマの `colors-background-bg-primary`、塗り面上の `colors-text-text-white` / `colors-foreground-fg-white` の元になる原色。 */ --colors-base-black: #000000; /* 純黒。どのセマンティックトークンからも参照されていない原色。 */ --colors-base-transparent: #ffffff00; /* 透明（白のアルファ 0）。ダークテーマで影とトグルの枠線を消すために参照される。 */ --colors-gray-light-mode-25: #fdfdfd; /* ライトテーマのニュートラル（グレー）の原色階調 25。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-50: #faf9fa; /* ライトテーマのニュートラル（グレー）の原色階調 50。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-100: #f5f5f5; /* ライトテーマのニュートラル（グレー）の原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-200: #e9eaeb; /* ライトテーマのニュートラル（グレー）の原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-300: #d5d7da; /* ライトテーマのニュートラル（グレー）の原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-400: #a4a7ae; /* ライトテーマのニュートラル（グレー）の原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-500: #717680; /* ライトテーマのニュートラル（グレー）の原色階調 500。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-600: #535862; /* ライトテーマのニュートラル（グレー）の原色階調 600。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-700: #414651; /* ライトテーマのニュートラル（グレー）の原色階調 700。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-800: #1f2328; /* ライトテーマのニュートラル（グレー）の原色階調 800。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-900: #131618; /* ライトテーマのニュートラル（グレー）の原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-light-mode-950: #0f1113; /* ライトテーマのニュートラル（グレー）の原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-blue-25: #fcfcfd; /* グレーブルーの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-gray-blue-50: #f8f9fc; /* グレーブルーの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-100: #eaecf5; /* グレーブルーの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-200: #d5d9eb; /* グレーブルーの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-300: #b3b8db; /* グレーブルーの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-400: #717bbc; /* グレーブルーの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-500: #4e5ba6; /* グレーブルーの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-600: #3e4784; /* グレーブルーの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-700: #363f72; /* グレーブルーの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-800: #293056; /* グレーブルーの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-900: #101323; /* グレーブルーの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-blue-950: #0d0f1c; /* グレーブルーの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-brand-25: #fbfaff; /* ブランドのバイオレットの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-brand-50: #ded5ff; /* ブランドのバイオレットの原色階調 50。ライトテーマの `colors-background-bg-brand-primary`（淡いブランド面）。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-100: #c3afff; /* ブランドのバイオレットの原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-200: #a98aff; /* ブランドのバイオレットの原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-300: #9165ff; /* ブランドのバイオレットの原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-400: #7b3fff; /* ブランドのバイオレットの原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-500: #661aff; /* ブランドのバイオレットの原色階調 500。ダークテーマの主ブランド色（`colors-background-bg-brand-solid`）。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-600: #4f02f0; /* ブランドのバイオレットの原色階調 600。ライトテーマの主ブランド色（`colors-background-bg-brand-solid`、`colors-border-border-brand`、フォーカスリング）。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-700: #4204c9; /* ブランドのバイオレットの原色階調 700。ライトテーマのブランド塗りのホバー、ブランドセクションの淡い面。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-800: #3505a2; /* ブランドのバイオレットの原色階調 800。ライトテーマの `colors-background-bg-brand-section`。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-900: #28057b; /* ブランドのバイオレットの原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-brand-950: #1c0456; /* ブランドのバイオレットの原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-25: #fffbfa; /* エラー（赤）の原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-error-50: #fef3f2; /* エラー（赤）の原色階調 50。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-100: #fee4e2; /* エラー（赤）の原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-200: #fecdca; /* エラー（赤）の原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-300: #fda29b; /* エラー（赤）の原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-400: #f97066; /* エラー（赤）の原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-500: #f04438; /* エラー（赤）の原色階調 500。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-600: #d92d20; /* エラー（赤）の原色階調 600。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-700: #b42318; /* エラー（赤）の原色階調 700。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-800: #912018; /* エラー（赤）の原色階調 800。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-900: #7a271a; /* エラー（赤）の原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-error-950: #55160c; /* エラー（赤）の原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-25: #fffcf5; /* 警告（オレンジ）の原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-warning-50: #fffaeb; /* 警告（オレンジ）の原色階調 50。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-100: #fef0c7; /* 警告（オレンジ）の原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-200: #fedf89; /* 警告（オレンジ）の原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-300: #fec84b; /* 警告（オレンジ）の原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-400: #fdb022; /* 警告（オレンジ）の原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-500: #f79009; /* 警告（オレンジ）の原色階調 500。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-600: #dc6803; /* 警告（オレンジ）の原色階調 600。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-700: #b54708; /* 警告（オレンジ）の原色階調 700。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-800: #93370d; /* 警告（オレンジ）の原色階調 800。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-900: #7a2e0e; /* 警告（オレンジ）の原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-warning-950: #4e1d09; /* 警告（オレンジ）の原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-25: #f6fef9; /* 成功（緑）の原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-success-50: #ecfdf3; /* 成功（緑）の原色階調 50。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-100: #dcfae6; /* 成功（緑）の原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-200: #abefc6; /* 成功（緑）の原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-300: #75e0a7; /* 成功（緑）の原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-400: #47cd89; /* 成功（緑）の原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-500: #17b26a; /* 成功（緑）の原色階調 500。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-600: #079455; /* 成功（緑）の原色階調 600。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-700: #067647; /* 成功（緑）の原色階調 700。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-800: #085d3a; /* 成功（緑）の原色階調 800。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-900: #074d31; /* 成功（緑）の原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-success-950: #053321; /* 成功（緑）の原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-green-25: #f6fef9; /* グリーンの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-green-50: #edfcf2; /* グリーンの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-100: #d3f8df; /* グリーンの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-200: #aaf0c4; /* グリーンの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-300: #73e2a3; /* グリーンの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-400: #3ccb7f; /* グリーンの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-500: #16b364; /* グリーンの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-600: #099250; /* グリーンの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-700: #087443; /* グリーンの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-800: #095c37; /* グリーンの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-900: #084c2e; /* グリーンの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-green-950: #052e1c; /* グリーンの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-25: #f5fbff; /* ライトブルーの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-blue-light-50: #f0f9ff; /* ライトブルーの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-100: #e0f2fe; /* ライトブルーの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-200: #b9e6fe; /* ライトブルーの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-300: #7cd4fd; /* ライトブルーの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-400: #36bffa; /* ライトブルーの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-500: #0ba5ec; /* ライトブルーの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-600: #0086c9; /* ライトブルーの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-700: #026aa2; /* ライトブルーの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-800: #065986; /* ライトブルーの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-900: #0b4a6f; /* ライトブルーの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-light-950: #062c41; /* ライトブルーの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-25: #f5faff; /* ブルーの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-blue-50: #eff8ff; /* ブルーの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-100: #d1e9ff; /* ブルーの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-200: #b2ddff; /* ブルーの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-300: #84caff; /* ブルーの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-400: #53b1fd; /* ブルーの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-500: #2e90fa; /* ブルーの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-600: #1570ef; /* ブルーの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-700: #175cd3; /* ブルーの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-800: #1849a9; /* ブルーの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-900: #194185; /* ブルーの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-950: #102a56; /* ブルーの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-25: #f5f8ff; /* ダークブルーの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-blue-dark-50: #eff4ff; /* ダークブルーの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-100: #d1e0ff; /* ダークブルーの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-200: #b2ccff; /* ダークブルーの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-300: #84adff; /* ダークブルーの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-400: #528bff; /* ダークブルーの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-500: #2970ff; /* ダークブルーの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-600: #155eef; /* ダークブルーの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-700: #004eeb; /* ダークブルーの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-800: #0040c1; /* ダークブルーの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-900: #00359e; /* ダークブルーの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-blue-dark-950: #002266; /* ダークブルーの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-25: #f5f8ff; /* インディゴの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-indigo-50: #eef4ff; /* インディゴの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-100: #e0eaff; /* インディゴの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-200: #c7d7fe; /* インディゴの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-300: #a4bcfd; /* インディゴの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-400: #8098f9; /* インディゴの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-500: #6172f3; /* インディゴの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-600: #444ce7; /* インディゴの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-700: #3538cd; /* インディゴの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-800: #2d31a6; /* インディゴの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-900: #2d3282; /* インディゴの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-indigo-950: #1f235b; /* インディゴの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-25: #fafaff; /* パープルの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-purple-50: #f4f3ff; /* パープルの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-100: #ebe9fe; /* パープルの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-200: #d9d6fe; /* パープルの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-300: #bdb4fe; /* パープルの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-400: #9b8afb; /* パープルの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-500: #7a5af8; /* パープルの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-600: #6938ef; /* パープルの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-700: #5925dc; /* パープルの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-800: #4a1fb8; /* パープルの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-900: #3e1c96; /* パープルの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-purple-950: #27115f; /* パープルの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-25: #fefaff; /* フューシャの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-fuchsia-50: #fdf4ff; /* フューシャの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-100: #fbe8ff; /* フューシャの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-200: #f6d0fe; /* フューシャの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-300: #eeaafd; /* フューシャの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-400: #e478fa; /* フューシャの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-500: #d444f1; /* フューシャの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-600: #ba24d5; /* フューシャの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-700: #9f1ab1; /* フューシャの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-800: #821890; /* フューシャの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-900: #6f1877; /* フューシャの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-fuchsia-950: #47104c; /* フューシャの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-25: #fef6fb; /* ピンクの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-pink-50: #fdf2fa; /* ピンクの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-100: #fce7f6; /* ピンクの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-200: #fcceee; /* ピンクの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-300: #faa7e0; /* ピンクの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-400: #f670c7; /* ピンクの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-500: #ee46bc; /* ピンクの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-600: #dd2590; /* ピンクの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-700: #c11574; /* ピンクの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-800: #9e165f; /* ピンクの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-900: #851651; /* ピンクの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-pink-950: #4e0d30; /* ピンクの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-25: #fff9f5; /* ダークオレンジの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-orange-dark-50: #fff4ed; /* ダークオレンジの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-100: #ffe6d5; /* ダークオレンジの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-200: #ffd6ae; /* ダークオレンジの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-300: #ff9c66; /* ダークオレンジの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-400: #ff692e; /* ダークオレンジの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-500: #ff4405; /* ダークオレンジの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-600: #e62e05; /* ダークオレンジの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-700: #bc1b06; /* ダークオレンジの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-800: #97180c; /* ダークオレンジの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-900: #771a0d; /* ダークオレンジの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-dark-950: #57130a; /* ダークオレンジの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-25: #fefaf5; /* オレンジの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-orange-50: #fef6ee; /* オレンジの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-100: #fdead7; /* オレンジの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-200: #f9dbaf; /* オレンジの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-300: #f7b27a; /* オレンジの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-400: #f38744; /* オレンジの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-500: #ef6820; /* オレンジの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-600: #e04f16; /* オレンジの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-700: #b93815; /* オレンジの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-800: #932f19; /* オレンジの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-900: #772917; /* オレンジの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-orange-950: #511c10; /* オレンジの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-25: #fefdf0; /* イエローの原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-yellow-50: #fefbe8; /* イエローの原色階調 50。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-100: #fef7c3; /* イエローの原色階調 100。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-200: #feee95; /* イエローの原色階調 200。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-300: #fde272; /* イエローの原色階調 300。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-400: #fac515; /* イエローの原色階調 400。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-500: #eaaa08; /* イエローの原色階調 500。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-600: #ca8504; /* イエローの原色階調 600。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-700: #a15c07; /* イエローの原色階調 700。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-800: #854a0e; /* イエローの原色階調 800。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-900: #713b12; /* イエローの原色階調 900。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-yellow-950: #542c0d; /* イエローの原色階調 950。直接は使わず、`component-colors-utility-*`（バッジ・タグ・チャートの分類色）経由で使う。 */ --colors-gray-dark-mode-25: #fdfdfd; /* ダークテーマのニュートラル（グレー）の原色階調 25。どのセマンティックトークンからも参照されていない段。階調をそろえるために残している。 */ --colors-gray-dark-mode-50: #faf9fa; /* ダークテーマのニュートラル（グレー）の原色階調 50。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-100: #f5f5f5; /* ダークテーマのニュートラル（グレー）の原色階調 100。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-200: #e9eaeb; /* ダークテーマのニュートラル（グレー）の原色階調 200。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-300: #d5d7da; /* ダークテーマのニュートラル（グレー）の原色階調 300。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-400: #a4a7ae; /* ダークテーマのニュートラル（グレー）の原色階調 400。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-500: #717680; /* ダークテーマのニュートラル（グレー）の原色階調 500。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-600: #535862; /* ダークテーマのニュートラル（グレー）の原色階調 600。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-700: #414651; /* ダークテーマのニュートラル（グレー）の原色階調 700。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-800: #1f2328; /* ダークテーマのニュートラル（グレー）の原色階調 800。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-900: #131618; /* ダークテーマのニュートラル（グレー）の原色階調 900。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --colors-gray-dark-mode-950: #0f1113; /* ダークテーマのニュートラル（グレー）の原色階調 950。直接は使わず、`colors-text-*` / `colors-background-*` / `colors-foreground-*` / `colors-border-*` 経由で使う。 */ --gray-light-mode-25: #fdfdfd; /* ライトテーマのグレー階調 25。`colors-gray-light-mode-25` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-25` を経由するセマンティックトークンを使う。 */ --gray-light-mode-50: #faf9fa; /* ライトテーマのグレー階調 50。`colors-gray-light-mode-50` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-50` を経由するセマンティックトークンを使う。 */ --gray-light-mode-100: #f5f5f5; /* ライトテーマのグレー階調 100。`colors-gray-light-mode-100` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-100` を経由するセマンティックトークンを使う。 */ --gray-light-mode-200: #e9eaeb; /* ライトテーマのグレー階調 200。`colors-gray-light-mode-200` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-200` を経由するセマンティックトークンを使う。 */ --gray-light-mode-300: #d5d7da; /* ライトテーマのグレー階調 300。`colors-gray-light-mode-300` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-300` を経由するセマンティックトークンを使う。 */ --gray-light-mode-400: #a4a7ae; /* ライトテーマのグレー階調 400。`colors-gray-light-mode-400` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-400` を経由するセマンティックトークンを使う。 */ --gray-light-mode-500: #717680; /* ライトテーマのグレー階調 500。`colors-gray-light-mode-500` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-500` を経由するセマンティックトークンを使う。 */ --gray-light-mode-600: #535862; /* ライトテーマのグレー階調 600。`colors-gray-light-mode-600` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-600` を経由するセマンティックトークンを使う。 */ --gray-light-mode-700: #414651; /* ライトテーマのグレー階調 700。`colors-gray-light-mode-700` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-700` を経由するセマンティックトークンを使う。 */ --gray-light-mode-800: #1f2328; /* ライトテーマのグレー階調 800。`colors-gray-light-mode-800` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-800` を経由するセマンティックトークンを使う。 */ --gray-light-mode-900: #131618; /* ライトテーマのグレー階調 900。`colors-gray-light-mode-900` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-900` を経由するセマンティックトークンを使う。 */ --gray-light-mode-950: #0f1113; /* ライトテーマのグレー階調 950。`colors-gray-light-mode-950` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-light-mode-950` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-25: #fdfdfd; /* ダークテーマのグレー階調 25。`colors-gray-dark-mode-25` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-25` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-50: #faf9fa; /* ダークテーマのグレー階調 50。`colors-gray-dark-mode-50` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-50` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-100: #f5f5f5; /* ダークテーマのグレー階調 100。`colors-gray-dark-mode-100` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-100` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-200: #e9eaeb; /* ダークテーマのグレー階調 200。`colors-gray-dark-mode-200` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-200` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-300: #d5d7da; /* ダークテーマのグレー階調 300。`colors-gray-dark-mode-300` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-300` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-400: #a4a7ae; /* ダークテーマのグレー階調 400。`colors-gray-dark-mode-400` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-400` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-500: #717680; /* ダークテーマのグレー階調 500。`colors-gray-dark-mode-500` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-500` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-600: #535862; /* ダークテーマのグレー階調 600。`colors-gray-dark-mode-600` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-600` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-700: #414651; /* ダークテーマのグレー階調 700。`colors-gray-dark-mode-700` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-700` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-800: #1f2328; /* ダークテーマのグレー階調 800。`colors-gray-dark-mode-800` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-800` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-900: #131618; /* ダークテーマのグレー階調 900。`colors-gray-dark-mode-900` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-900` を経由するセマンティックトークンを使う。 */ --gray-dark-mode-950: #0f1113; /* ダークテーマのグレー階調 950。`colors-gray-dark-mode-950` と同じ値を持つ、Figma の別コレクション由来のトークン。新規には `colors-gray-dark-mode-950` を経由するセマンティックトークンを使う。 */ --gray-25: #fcfcfd; /* 青みのあるグレー階調 25。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-50: #fafafc; /* 青みのあるグレー階調 50。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-100: #f3f3f7; /* 青みのあるグレー階調 100。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-200: #e6e7ee; /* 青みのあるグレー階調 200。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-300: #d2d4e0; /* 青みのあるグレー階調 300。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-400: #afb3c7; /* 青みのあるグレー階調 400。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-500: #505b6b; /* 青みのあるグレー階調 500。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-600: #373f48; /* 青みのあるグレー階調 600。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-700: #292f35; /* 青みのあるグレー階調 700。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-800: #202529; /* 青みのあるグレー階調 800。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-900: #1b1f22; /* 青みのあるグレー階調 900。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --gray-950: #191d20; /* 青みのあるグレー階調 950。Figma の別コレクション由来で、`colors-gray-light-mode-*` とは値が異なる。どのセマンティックトークンからも参照されていない。 */ --primary-25: #fbfaff; /* プライマリ（バイオレット）階調 25。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-50: #d8cdff; /* プライマリ（バイオレット）階調 50。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-100: #b8a0ff; /* プライマリ（バイオレット）階調 100。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-200: #9b74ff; /* プライマリ（バイオレット）階調 200。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-300: #7f47ff; /* プライマリ（バイオレット）階調 300。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-400: #661aff; /* プライマリ（バイオレット）階調 400。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-500: #4f02f0; /* プライマリ（バイオレット）階調 500。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-600: #4204c9; /* プライマリ（バイオレット）階調 600。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-700: #3505a2; /* プライマリ（バイオレット）階調 700。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-800: #28057b; /* プライマリ（バイオレット）階調 800。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-900: #1c0456; /* プライマリ（バイオレット）階調 900。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --primary-950: #100331; /* プライマリ（バイオレット）階調 950。Figma の別コレクション由来で、`colors-brand-*` とは 1 段ずれた階調（`primary-500` = `colors-brand-600`）。どのセマンティックトークンからも参照されていない。 */ --colors-text-text-primary-900: var(--colors-gray-light-mode-900); /* 見出しと本文の最も強いテキスト。`colors-background-bg-primary` と `colors-background-bg-secondary` の上で使う。 */ --colors-text-text-secondary-700: var(--colors-gray-light-mode-700); /* ラベルや小見出しなど第2階層のテキスト。`colors-background-bg-primary` と `colors-background-bg-secondary` の上で使う。 */ --colors-text-text-secondary-hover: var(--colors-gray-light-mode-800); /* `colors-text-text-secondary-700` のホバー時。`colors-background-bg-primary` の上。 */ --colors-text-text-tertiary-600: var(--colors-gray-light-mode-600); /* 補足説明・サポートテキスト。`colors-background-bg-primary` と `colors-background-bg-secondary` の上で使う。 */ --colors-text-text-tertiary-hover: var(--colors-gray-light-mode-700); /* `colors-text-text-tertiary-600` のホバー時。`colors-background-bg-primary` の上。 */ --colors-text-text-quaternary-500: var(--colors-gray-light-mode-500); /* キャプションやメタ情報など最も弱いテキスト。`colors-background-bg-primary` の上で使う。 */ --colors-text-text-disabled: var(--colors-gray-light-mode-500); /* 無効状態のテキスト。`colors-background-bg-primary` と `colors-background-bg-disabled` の上。無効表示なのでコントラスト基準の対象外。 */ --colors-text-text-placeholder: var(--colors-gray-light-mode-500); /* 入力欄のプレースホルダー。`colors-background-bg-primary` の上で使う。 注意: ダークで `colors-background-bg-primary` に対し 4.1:1（4.5:1 未満。ソースの値のまま）。 */ --colors-text-text-placeholder-subtle: var(--colors-gray-light-mode-300); /* さらに薄いプレースホルダー（桁区切りの入力欄など）。`colors-background-bg-primary` の上。 注意: ライトで `colors-background-bg-primary` に対し 1.4:1、ダークで `colors-background-bg-primary` に対し 2.0:1（4.5:1 未満。ソースの値のまま）。 */ --colors-text-text-white: var(--colors-base-white); /* テーマによらず白のテキスト。`colors-background-bg-brand-solid` と `colors-background-bg-error-solid` の上で使う。 注意: ライトで `colors-background-bg-warning-solid` に対し 3.5:1、ダークで `colors-background-bg-warning-solid` に対し 3.5:1、ライトで `colors-background-bg-success-solid` に対し 3.9:1、ダークで `colors-background-bg-success-solid` に対し 3.9:1、ダークで `colors-background-bg-error-solid-hover` に対し 3.8:1（4.5:1 未満）なので、これらの面では 24px 以上か太字 19px 以上の文字とアイコンに限る。 */ --colors-text-text-brand-primary-900: var(--colors-brand-900); /* ブランド色の見出しテキスト。`colors-background-bg-primary` の上で使う。ダークテーマではグレー 50 になる。 */ --colors-text-text-brand-secondary-700: var(--colors-brand-700); /* ブランド色の強調テキストやリンク。`colors-background-bg-primary` の上で使う。ダークテーマではグレー 300 になる。 */ --colors-text-text-brand-tertiary-600: var(--colors-brand-600); /* ブランド色の軽いアクセント（数値・小見出し）。`colors-background-bg-primary` の上で使う。ダークテーマではグレー 400 になる。 */ --colors-text-text-brand-tertiary-alt: var(--colors-brand-600); /* `colors-text-text-brand-tertiary-600` の代替。ダークテーマでグレー 50 まで明るくしたい箇所に使う。`colors-background-bg-primary` の上。 */ --colors-text-text-error-primary-600: var(--colors-error-600); /* エラーメッセージのテキスト。`colors-background-bg-primary` の上で使う。 */ --colors-text-text-error-primary-hover: var(--colors-error-700); /* エラーテキスト（リンク・ボタン）のホバー時。`colors-background-bg-primary` の上。 */ --colors-text-text-warning-primary-600: var(--colors-warning-600); /* 警告メッセージのテキスト。`colors-background-bg-primary` の上で使う。 注意: ライトで `colors-background-bg-primary` に対し 3.5:1（4.5:1 未満。ソースの値のまま）。 */ --colors-text-text-success-primary-600: var(--colors-success-600); /* 成功メッセージのテキスト。`colors-background-bg-primary` の上で使う。 注意: ライトで `colors-background-bg-primary` に対し 3.9:1（4.5:1 未満。ソースの値のまま）。 */ --colors-text-text-primary-on-brand: var(--colors-base-white); /* `colors-background-bg-brand-section` の上の主テキスト。 */ --colors-text-text-secondary-on-brand: var(--colors-brand-200); /* `colors-background-bg-brand-section` の上の第2階層テキスト。 */ --colors-text-text-tertiary-on-brand: var(--colors-brand-200); /* `colors-background-bg-brand-section` の上の補足テキスト。 */ --colors-text-text-quaternary-on-brand: var(--colors-brand-300); /* `colors-background-bg-brand-section` の上の最も弱いテキスト。 注意: ライトで `colors-background-bg-brand-section` に対し 3.3:1（4.5:1 未満。ソースの値のまま）。 */ --colors-background-bg-primary: var(--colors-base-white); /* ページと主要サーフェスの背景。ライトは白、ダークはグレー 950。 */ --colors-background-bg-primary-alt: var(--colors-base-white); /* `colors-background-bg-primary` の代替。ライトは同じ白、ダークテーマでは一段明るい `colors-background-bg-secondary` に切り替わる。 */ --colors-background-bg-primary-hover: var(--colors-gray-light-mode-50); /* `colors-background-bg-primary` 上の行・ボタンのホバー背景。 */ --colors-background-bg-primary-solid: var(--colors-gray-light-mode-950); /* ツールチップなど濃色の塗り面。ライトはグレー 950、ダークは `colors-background-bg-secondary`。 */ --colors-background-bg-secondary: var(--colors-gray-light-mode-50); /* セクションやカード内で一段落とした背景。 */ --colors-background-bg-secondary-alt: var(--colors-gray-light-mode-50); /* `colors-background-bg-secondary` の代替。ダークテーマでは `colors-background-bg-primary` に切り替わる。 */ --colors-background-bg-secondary-hover: var(--colors-gray-light-mode-100); /* `colors-background-bg-secondary` 上のホバー背景。 */ --colors-background-bg-secondary-subtle: var(--colors-gray-light-mode-25); /* `colors-background-bg-secondary` よりさらに淡い背景。 */ --colors-background-bg-secondary-solid: var(--colors-gray-light-mode-600); /* グレーの塗り面（中立のバッジ・ステータスドットなど）。 */ --colors-background-bg-tertiary: var(--colors-gray-light-mode-100); /* トグルの溝など、さらに一段濃い背景。 */ --colors-background-bg-quaternary: var(--colors-gray-light-mode-200); /* スライダーの軌道や進捗バーの地など、最も濃いニュートラル背景。 */ --colors-background-bg-active: var(--colors-gray-light-mode-50); /* 選択中のメニュー項目や行の背景。 */ --colors-background-bg-disabled: var(--colors-gray-light-mode-100); /* 無効状態のコントロールの背景。 */ --colors-background-bg-disabled-subtle: var(--colors-gray-light-mode-50); /* 無効状態の入力欄など、淡い無効背景。 */ --colors-background-bg-overlay: var(--colors-gray-light-mode-950); /* モーダル背面のオーバーレイ。不透明度を下げて重ねる。 */ --colors-background-bg-brand-primary: var(--colors-brand-50); /* ブランド色の淡い面（アイコンの台座・ハイライト）。ダークテーマではブランド 500 の塗りになる。 */ --colors-background-bg-brand-primary-alt: var(--colors-brand-50); /* `colors-background-bg-brand-primary` の代替。ダークテーマでは `colors-background-bg-secondary` になる。 */ --colors-background-bg-brand-secondary: var(--colors-brand-100); /* ブランド色のやや濃い淡色面。ダークテーマではブランド 600。 */ --colors-background-bg-brand-solid: var(--colors-brand-600); /* プライマリボタンなどブランド色の塗り。上のテキストは `colors-text-text-white`。 */ --colors-background-bg-brand-solid-hover: var(--colors-brand-700); /* `colors-background-bg-brand-solid` のホバー時。 */ --colors-background-bg-brand-section: var(--colors-brand-800); /* ブランド色のセクション背景（CTA 帯・フッター）。上のテキストは `colors-text-text-*-on-brand`。ダークテーマでは `colors-background-bg-secondary` になる。 */ --colors-background-bg-brand-section-subtle: var(--colors-brand-700); /* `colors-background-bg-brand-section` の中の一段明るい面。ダークテーマでは `colors-background-bg-primary`。 */ --colors-background-bg-error-primary: var(--colors-error-50); /* エラーの淡い背景（アラート・入力欄の地）。 */ --colors-background-bg-error-secondary: var(--colors-error-100); /* エラーのやや濃い背景（アイコンの台座）。ダークテーマではエラー 600 の塗りになる。 */ --colors-background-bg-error-solid: var(--colors-error-600); /* 破壊的操作のボタンなどエラー色の塗り。上のテキストは `colors-text-text-white`。 */ --colors-background-bg-error-solid-hover: var(--colors-error-700); /* `colors-background-bg-error-solid` のホバー時。 */ --colors-background-bg-warning-primary: var(--colors-warning-50); /* 警告の淡い背景。 */ --colors-background-bg-warning-secondary: var(--colors-warning-100); /* 警告のやや濃い背景（アイコンの台座）。ダークテーマでは警告 600 の塗りになる。 */ --colors-background-bg-warning-solid: var(--colors-warning-600); /* 警告色の塗り（ステータスドット・進捗）。 */ --colors-background-bg-success-primary: var(--colors-success-50); /* 成功の淡い背景。 */ --colors-background-bg-success-secondary: var(--colors-success-100); /* 成功のやや濃い背景（アイコンの台座）。ダークテーマでは成功 600 の塗りになる。 */ --colors-background-bg-success-solid: var(--colors-success-600); /* 成功色の塗り（ステータスドット・進捗）。 */ --colors-foreground-fg-primary-900: var(--colors-gray-light-mode-900); /* 最も強いアイコン・非テキスト要素。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-secondary-700: var(--colors-gray-light-mode-700); /* 第2階層のアイコン。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-secondary-hover: var(--colors-gray-light-mode-800); /* `colors-foreground-fg-secondary-700` のホバー時。 */ --colors-foreground-fg-tertiary-600: var(--colors-gray-light-mode-600); /* 第3階層のアイコン。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-tertiary-hover: var(--colors-gray-light-mode-700); /* `colors-foreground-fg-tertiary-600` のホバー時。 */ --colors-foreground-fg-quaternary-400: var(--colors-gray-light-mode-400); /* 入力欄内のアイコンや装飾的なアイコンなど、最も弱い前景。`colors-background-bg-primary` の上。 注意: ライトで `colors-background-bg-primary` に対し 2.4:1、ダークで `colors-background-bg-primary` に対し 2.6:1（3:1 未満。ソースの値のまま）。 */ --colors-foreground-fg-quaternary-hover: var(--colors-gray-light-mode-500); /* `colors-foreground-fg-quaternary-400` のホバー時。 */ --colors-foreground-fg-white: var(--colors-base-white); /* テーマによらず白のアイコン。`colors-background-bg-brand-solid` など塗り面の上。 */ --colors-foreground-fg-disabled: var(--colors-gray-light-mode-400); /* 無効状態のアイコン。無効表示なのでコントラスト基準の対象外。 */ --colors-foreground-fg-disabled-subtle: var(--colors-gray-light-mode-300); /* 無効状態の、より淡い前景（チェックボックスのチェックなど）。 */ --colors-foreground-fg-brand-primary-600: var(--colors-brand-600); /* ブランド色のアイコン・進捗バー・チェックなど。`colors-background-bg-primary` の上。 注意: ダークで `colors-background-bg-primary` に対し 2.8:1（3:1 未満。ソースの値のまま）。 */ --colors-foreground-fg-brand-primary-alt: var(--colors-foreground-fg-brand-primary-600); /* `colors-foreground-fg-brand-primary-600` の代替。ダークテーマではグレー 300 になる。 */ --colors-foreground-fg-brand-secondary-500: var(--colors-brand-500); /* ブランド色の補助的なアイコン・アクセント。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-brand-secondary-alt: var(--colors-foreground-fg-brand-secondary-500); /* `colors-foreground-fg-brand-secondary-500` の代替。ダークテーマではグレー 600 になる。 */ --colors-foreground-fg-brand-secondary-hover: var(--colors-brand-400); /* `colors-foreground-fg-brand-secondary-500` のホバー時。ダークテーマではグレー 500。 */ --colors-foreground-fg-error-primary: var(--colors-error-600); /* エラーのアイコン。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-error-secondary: var(--colors-error-500); /* エラーの補助的なアイコン・ドット。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-warning-primary: var(--colors-warning-600); /* 警告のアイコン。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-warning-secondary: var(--colors-warning-500); /* 警告の補助的なアイコン・ドット。`colors-background-bg-primary` の上。 注意: ライトで `colors-background-bg-primary` に対し 2.3:1（3:1 未満。ソースの値のまま）。 */ --colors-foreground-fg-success-primary: var(--colors-success-600); /* 成功のアイコン。`colors-background-bg-primary` の上。 */ --colors-foreground-fg-success-secondary: var(--colors-success-500); /* 成功の補助的なアイコン・ドット。`colors-background-bg-primary` の上。 注意: ライトで `colors-background-bg-primary` に対し 2.8:1（3:1 未満。ソースの値のまま）。 */ --colors-border-border-primary: var(--colors-gray-light-mode-300); /* 入力欄・チェックボックス・ボタンなどコントロールの枠線。`colors-background-bg-primary` の上。 注意: ライトで `colors-background-bg-primary` に対し 1.4:1、ダークで `colors-background-bg-primary` に対し 2.0:1（3:1 未満。ソースの値のまま）。 */ --colors-border-border-secondary: var(--colors-gray-light-mode-200); /* カード・テーブル・区切り線の標準ボーダー（装飾的な区切り）。 */ --colors-border-border-secondary-alt: #00000014; /* 影と重ねる薄いボーダー。ライトは黒 8% のアルファ、ダークはグレー 800。 */ --colors-border-border-tertiary: var(--colors-gray-light-mode-100); /* グラフの軸や目盛りなど最も薄い区切り線。 */ --colors-border-border-disabled: var(--colors-gray-light-mode-300); /* 無効状態のコントロールの枠線。 */ --colors-border-border-disabled-subtle: var(--colors-gray-light-mode-200); /* 無効状態の、より淡い枠線。 */ --colors-border-border-brand: var(--colors-brand-600); /* 選択中・フォーカス中の入力欄などブランド色の枠線。`colors-background-bg-primary` の上。 注意: ダークで `colors-background-bg-primary` に対し 2.8:1（3:1 未満。ソースの値のまま）。 */ --colors-border-border-brand-alt: var(--colors-brand-500); /* ブランド色の枠線の代替（`colors-background-bg-brand-section` 内など）。ダークテーマではグレー 700 になる。 */ --colors-border-border-error: var(--colors-error-500); /* エラー状態の入力欄の枠線。`colors-background-bg-primary` の上。 */ --colors-border-border-error-subtle: var(--colors-error-300); /* エラー状態の、より淡い枠線。 */ --colors-effects-focus-rings-focus-ring: var(--colors-brand-600); /* キーボードフォーカスのリング色。`colors-background-bg-primary` の上。 注意: ダークで `colors-background-bg-primary` に対し 2.8:1（3:1 未満。ソースの値のまま）。 */ --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500); /* エラー状態のコントロールのフォーカスリング色。`colors-background-bg-primary` の上。 */ --colors-effects-shadows-shadow-xs: #0a0d120d; /* ドロップシャドウ xsの色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-sm-02: #0a0d121a; /* ドロップシャドウ sm の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-lg-01: #0a0d1214; /* ドロップシャドウ lg の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-lg-02: #0a0d1208; /* ドロップシャドウ lg の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-sm-01: #0a0d121a; /* ドロップシャドウ sm の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-3xl-01: #0a0d1224; /* ドロップシャドウ 3xl の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-2xl-01: #0a0d122e; /* ドロップシャドウ 2xl の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-md-01: #0a0d121a; /* ドロップシャドウ md の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-md-02: #0a0d120f; /* ドロップシャドウ md の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-xl-01: #0a0d1214; /* ドロップシャドウ xl の 1 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-xl-02: #0a0d1208; /* ドロップシャドウ xl の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-portfolio-mockups-shadow-main-centre-md: #0a0d1224; /* モックアップ画像用シャドウ（main-centre-md）の色。ダークテーマでは透明。 */ --colors-effects-portfolio-mockups-shadow-main-centre-lg: #0a0d122e; /* モックアップ画像用シャドウ（main-centre-lg）の色。ダークテーマでは透明。 */ --colors-effects-portfolio-mockups-shadow-overlay-lg: #0a0d121f; /* モックアップ画像用シャドウ（overlay-lg）の色。ダークテーマでは透明。 */ --colors-effects-portfolio-mockups-shadow-grid-md: #0a0d1214; /* モックアップ画像用シャドウ（grid-md）の色。ダークテーマでは透明。 */ --colors-effects-shadows-shadow-skeumorphic-inner: #0a0d120d; /* ボタンなどの内側シャドウ（立体表現）の色。 */ --colors-effects-shadows-shadow-skeumorphic-inner-border: #0a0d122e; /* ボタンなどの内側シャドウ（立体表現）の縁の色。 */ --colors-effects-shadows-shadow-lg-03: #0a0d120a; /* ドロップシャドウ lg の 3 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-xl-03: #0a0d120a; /* ドロップシャドウ xl の 3 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-2xl-02: #0a0d120a; /* ドロップシャドウ 2xl の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --colors-effects-shadows-shadow-3xl-02: #0a0d120a; /* ドロップシャドウ 3xl の 2 層目の色（#0a0d12 のアルファ）。ダークテーマでは透明になり、影は出ない。 */ --component-colors-utility-blue-utility-blue-50: var(--colors-blue-50); /* ユーティリティ色（ブルー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-100: var(--colors-blue-100); /* ユーティリティ色（ブルー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-200: var(--colors-blue-200); /* ユーティリティ色（ブルー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-300: var(--colors-blue-300); /* ユーティリティ色（ブルー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-400: var(--colors-blue-400); /* ユーティリティ色（ブルー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500); /* ユーティリティ色（ブルー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-600: var(--colors-blue-600); /* ユーティリティ色（ブルー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-utility-blue-700: var(--colors-blue-700); /* ユーティリティ色（ブルー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-50: var(--colors-brand-50); /* ユーティリティ色（ブランド）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-100: var(--colors-brand-100); /* ユーティリティ色（ブランド）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-200: var(--colors-brand-200); /* ユーティリティ色（ブランド）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-300: var(--colors-brand-300); /* ユーティリティ色（ブランド）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-400: var(--colors-brand-400); /* ユーティリティ色（ブランド）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500); /* ユーティリティ色（ブランド）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-600: var(--colors-brand-600); /* ユーティリティ色（ブランド）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-700: var(--colors-brand-700); /* ユーティリティ色（ブランド）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-800: var(--colors-brand-800); /* ユーティリティ色（ブランド）800。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-900: var(--colors-brand-900); /* ユーティリティ色（ブランド）900。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-brand-utility-brand-50-alt: var(--colors-brand-50); /* ユーティリティ色（ブランド）50 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-100-alt: var(--colors-brand-100); /* ユーティリティ色（ブランド）100 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-200-alt: var(--colors-brand-200); /* ユーティリティ色（ブランド）200 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-300-alt: var(--colors-brand-300); /* ユーティリティ色（ブランド）300 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-400-alt: var(--colors-brand-400); /* ユーティリティ色（ブランド）400 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-500-alt: var(--colors-brand-500); /* ユーティリティ色（ブランド）500 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-600-alt: var(--colors-brand-600); /* ユーティリティ色（ブランド）600 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-700-alt: var(--colors-brand-700); /* ユーティリティ色（ブランド）700 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-800-alt: var(--colors-brand-800); /* ユーティリティ色（ブランド）800 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-brand-utility-brand-900-alt: var(--colors-brand-900); /* ユーティリティ色（ブランド）900 の代替。ライトはブランド階調、ダークテーマではグレーのユーティリティ色に置き換わる。 */ --component-colors-utility-gray-utility-gray-50: var(--colors-gray-light-mode-50); /* ユーティリティ色（グレー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-100: var(--colors-gray-light-mode-100); /* ユーティリティ色（グレー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-200: var(--colors-gray-light-mode-200); /* ユーティリティ色（グレー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-300: var(--colors-gray-light-mode-300); /* ユーティリティ色（グレー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-400: var(--colors-gray-light-mode-400); /* ユーティリティ色（グレー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-500: var(--colors-gray-light-mode-500); /* ユーティリティ色（グレー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-600: var(--colors-gray-light-mode-600); /* ユーティリティ色（グレー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-700: var(--colors-gray-light-mode-700); /* ユーティリティ色（グレー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-800: var(--colors-gray-light-mode-800); /* ユーティリティ色（グレー）800。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-utility-gray-900: var(--colors-gray-light-mode-900); /* ユーティリティ色（グレー）900。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-50: var(--colors-error-50); /* ユーティリティ色（エラー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-100: var(--colors-error-100); /* ユーティリティ色（エラー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-200: var(--colors-error-200); /* ユーティリティ色（エラー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-300: var(--colors-error-300); /* ユーティリティ色（エラー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-400: var(--colors-error-400); /* ユーティリティ色（エラー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-500: var(--colors-error-500); /* ユーティリティ色（エラー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-600: var(--colors-error-600); /* ユーティリティ色（エラー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-error-utility-error-700: var(--colors-error-700); /* ユーティリティ色（エラー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-50: var(--colors-warning-50); /* ユーティリティ色（警告）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-100: var(--colors-warning-100); /* ユーティリティ色（警告）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-200: var(--colors-warning-200); /* ユーティリティ色（警告）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-300: var(--colors-warning-300); /* ユーティリティ色（警告）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-400: var(--colors-warning-400); /* ユーティリティ色（警告）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500); /* ユーティリティ色（警告）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-600: var(--colors-warning-600); /* ユーティリティ色（警告）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-warning-utility-warning-700: var(--colors-warning-700); /* ユーティリティ色（警告）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-50: var(--colors-success-50); /* ユーティリティ色（成功）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-100: var(--colors-success-100); /* ユーティリティ色（成功）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-200: var(--colors-success-200); /* ユーティリティ色（成功）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-300: var(--colors-success-300); /* ユーティリティ色（成功）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-400: var(--colors-success-400); /* ユーティリティ色（成功）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-500: var(--colors-success-500); /* ユーティリティ色（成功）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-600: var(--colors-success-600); /* ユーティリティ色（成功）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-success-utility-success-700: var(--colors-success-700); /* ユーティリティ色（成功）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-50: var(--colors-orange-50); /* ユーティリティ色（オレンジ）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-100: var(--colors-orange-100); /* ユーティリティ色（オレンジ）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-200: var(--colors-orange-200); /* ユーティリティ色（オレンジ）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-300: var(--colors-orange-300); /* ユーティリティ色（オレンジ）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-400: var(--colors-orange-400); /* ユーティリティ色（オレンジ）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-500: var(--colors-orange-500); /* ユーティリティ色（オレンジ）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-600: var(--colors-orange-600); /* ユーティリティ色（オレンジ）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-utility-orange-700: var(--colors-orange-700); /* ユーティリティ色（オレンジ）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-50: var(--colors-blue-dark-50); /* ユーティリティ色（ダークブルー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-100: var(--colors-blue-dark-100); /* ユーティリティ色（ダークブルー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-200: var(--colors-blue-dark-200); /* ユーティリティ色（ダークブルー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-300: var(--colors-blue-dark-300); /* ユーティリティ色（ダークブルー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-400: var(--colors-blue-dark-400); /* ユーティリティ色（ダークブルー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-500: var(--colors-blue-dark-500); /* ユーティリティ色（ダークブルー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-600: var(--colors-blue-dark-600); /* ユーティリティ色（ダークブルー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-dark-utility-blue-dark-700: var(--colors-blue-dark-700); /* ユーティリティ色（ダークブルー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-50); /* ユーティリティ色（インディゴ）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-100); /* ユーティリティ色（インディゴ）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-200); /* ユーティリティ色（インディゴ）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-300: var(--colors-indigo-300); /* ユーティリティ色（インディゴ）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-400: var(--colors-indigo-400); /* ユーティリティ色（インディゴ）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-500: var(--colors-indigo-500); /* ユーティリティ色（インディゴ）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-600: var(--colors-indigo-600); /* ユーティリティ色（インディゴ）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-indigo-utility-indigo-700: var(--colors-indigo-700); /* ユーティリティ色（インディゴ）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-50: var(--colors-fuchsia-50); /* ユーティリティ色（フューシャ）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-100: var(--colors-fuchsia-100); /* ユーティリティ色（フューシャ）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-200: var(--colors-fuchsia-200); /* ユーティリティ色（フューシャ）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-300: var(--colors-fuchsia-300); /* ユーティリティ色（フューシャ）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-400: var(--colors-fuchsia-400); /* ユーティリティ色（フューシャ）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-500: var(--colors-fuchsia-500); /* ユーティリティ色（フューシャ）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-600: var(--colors-fuchsia-600); /* ユーティリティ色（フューシャ）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-fuchsia-utility-fuchsia-700: var(--colors-fuchsia-700); /* ユーティリティ色（フューシャ）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-50: var(--colors-pink-50); /* ユーティリティ色（ピンク）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-100: var(--colors-pink-100); /* ユーティリティ色（ピンク）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-200: var(--colors-pink-200); /* ユーティリティ色（ピンク）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-300: var(--colors-pink-300); /* ユーティリティ色（ピンク）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-400: var(--colors-pink-400); /* ユーティリティ色（ピンク）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-500: var(--colors-pink-500); /* ユーティリティ色（ピンク）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-600: var(--colors-pink-600); /* ユーティリティ色（ピンク）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-pink-utility-pink-700: var(--colors-pink-700); /* ユーティリティ色（ピンク）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-50: var(--colors-purple-50); /* ユーティリティ色（パープル）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-100: var(--colors-purple-100); /* ユーティリティ色（パープル）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-200: var(--colors-purple-200); /* ユーティリティ色（パープル）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-300: var(--colors-purple-300); /* ユーティリティ色（パープル）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-400: var(--colors-purple-400); /* ユーティリティ色（パープル）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-500: var(--colors-purple-500); /* ユーティリティ色（パープル）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-600: var(--colors-purple-600); /* ユーティリティ色（パープル）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-purple-utility-purple-700: var(--colors-purple-700); /* ユーティリティ色（パープル）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-50: var(--colors-orange-dark-50); /* ユーティリティ色（ダークオレンジ）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-100); /* ユーティリティ色（ダークオレンジ）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-200: var(--colors-orange-dark-200); /* ユーティリティ色（ダークオレンジ）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-300: var(--colors-orange-dark-300); /* ユーティリティ色（ダークオレンジ）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-400: var(--colors-orange-dark-400); /* ユーティリティ色（ダークオレンジ）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-500: var(--colors-orange-dark-500); /* ユーティリティ色（ダークオレンジ）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-600: var(--colors-orange-dark-600); /* ユーティリティ色（ダークオレンジ）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-orange-dark-utility-orange-dark-700: var(--colors-orange-dark-700); /* ユーティリティ色（ダークオレンジ）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-50); /* ユーティリティ色（ライトブルー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-100); /* ユーティリティ色（ライトブルー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-200); /* ユーティリティ色（ライトブルー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-300); /* ユーティリティ色（ライトブルー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-400: var(--colors-blue-light-400); /* ユーティリティ色（ライトブルー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-500: var(--colors-blue-light-500); /* ユーティリティ色（ライトブルー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-600); /* ユーティリティ色（ライトブルー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-blue-light-utility-blue-light-700: var(--colors-blue-light-700); /* ユーティリティ色（ライトブルー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-50); /* ユーティリティ色（グレーブルー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-100); /* ユーティリティ色（グレーブルー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-200); /* ユーティリティ色（グレーブルー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-300: var(--colors-gray-blue-300); /* ユーティリティ色（グレーブルー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-400: var(--colors-gray-blue-400); /* ユーティリティ色（グレーブルー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-500: var(--colors-gray-blue-500); /* ユーティリティ色（グレーブルー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-600: var(--colors-gray-blue-600); /* ユーティリティ色（グレーブルー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-gray-blue-utility-gray-blue-700: var(--colors-gray-blue-700); /* ユーティリティ色（グレーブルー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-50: var(--colors-green-50); /* ユーティリティ色（グリーン）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-100: var(--colors-green-100); /* ユーティリティ色（グリーン）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-200: var(--colors-green-200); /* ユーティリティ色（グリーン）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-300: var(--colors-green-300); /* ユーティリティ色（グリーン）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-400: var(--colors-green-400); /* ユーティリティ色（グリーン）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-500: var(--colors-green-500); /* ユーティリティ色（グリーン）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-600: var(--colors-green-600); /* ユーティリティ色（グリーン）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-green-utility-green-700: var(--colors-green-700); /* ユーティリティ色（グリーン）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-50: var(--colors-yellow-50); /* ユーティリティ色（イエロー）50。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-100: var(--colors-yellow-100); /* ユーティリティ色（イエロー）100。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-200: var(--colors-yellow-200); /* ユーティリティ色（イエロー）200。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-300: var(--colors-yellow-300); /* ユーティリティ色（イエロー）300。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-400: var(--colors-yellow-400); /* ユーティリティ色（イエロー）400。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-500: var(--colors-yellow-500); /* ユーティリティ色（イエロー）500。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-600: var(--colors-yellow-600); /* ユーティリティ色（イエロー）600。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-utility-yellow-utility-yellow-700: var(--colors-yellow-700); /* ユーティリティ色（イエロー）700。バッジ・タグ・チャートなどの分類色に使う。ダークテーマでは階調が反転する。 */ --component-colors-alpha-alpha-white-10: #ffffff1a; /* 白のアルファ 10%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-20: #ffffff33; /* 白のアルファ 20%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-30: #ffffff4d; /* 白のアルファ 30%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-40: #ffffff66; /* 白のアルファ 40%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-50: #ffffff80; /* 白のアルファ 50%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-60: #ffffff99; /* 白のアルファ 60%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-70: #ffffffb2; /* 白のアルファ 70%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-80: #ffffffcc; /* 白のアルファ 80%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-90: #ffffffe5; /* 白のアルファ 90%。濃色面の上の重ね色に使う。ダークテーマでは #0c0e12 のアルファに反転する。 */ --component-colors-alpha-alpha-white-100: #ffffff; /* 不透明の白。ダークテーマでは `colors-gray-dark-mode-950` に反転する。 */ --component-colors-alpha-alpha-black-10: #0000001a; /* 黒のアルファ 10%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-20: #00000033; /* 黒のアルファ 20%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-30: #0000004d; /* 黒のアルファ 30%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-40: #00000066; /* 黒のアルファ 40%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-50: #00000080; /* 黒のアルファ 50%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-60: #00000099; /* 黒のアルファ 60%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-70: #000000b2; /* 黒のアルファ 70%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-80: #000000cc; /* 黒のアルファ 80%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-90: #000000e5; /* 黒のアルファ 90%。淡色面の上の重ね色に使う。ダークテーマでは白のアルファに反転する。 */ --component-colors-alpha-alpha-black-100: #000000; /* 不透明の黒。ダークテーマでは白に反転する。 */ --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-light-mode-300); /* ツールチップの補足テキスト。`colors-background-bg-primary-solid` の上で使う。 */ --component-colors-components-text-editor-text-editor-icon-fg: var(--colors-gray-light-mode-400); /* テキストエディタのツールバーアイコン。 */ --component-colors-components-sliders-slider-handle-border: var(--colors-brand-600); /* スライダーのハンドルの枠線。ダークテーマでは `colors-background-bg-primary`。 */ --component-colors-components-sliders-slider-handle-bg: var(--colors-base-white); /* スライダーのハンドルの地。ダークテーマではブランド色の前景に切り替わる。 */ --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-light-mode-900); /* デバイスモックアップの画面枠。 */ --component-colors-components-icons-icons-icon-fg-brand: var(--colors-brand-600); /* ブランド色のアイコン。ダークテーマではグレー 400 になる。 */ --component-colors-components-icons-icons-icon-fg-brand-on-brand: var(--colors-brand-200); /* `colors-background-bg-brand-section` の上のアイコン。 */ --component-colors-components-footers-footer-button-fg: var(--colors-brand-200); /* フッター内のリンクボタンの文字色。`colors-background-bg-brand-section` の上。 */ --component-colors-components-footers-footer-button-fg-hover: var(--colors-base-white); /* フッター内のリンクボタンのホバー時。 */ --component-colors-components-toggles-toggle-button-fg-disabled: var(--colors-gray-light-mode-50); /* 無効状態のトグルのつまみ。 */ --component-colors-components-avatars-avatar-styles-bg-neutral: #e0e0e0; /* アバターのプレースホルダー背景。両テーマで同じ #e0e0e0。 */ --component-colors-components-toggles-toggle-border: var(--colors-gray-light-mode-300); /* トグルの枠線。ダークテーマでは透明。 */ --component-colors-components-toggles-toggle-slim-border-pressed: var(--colors-background-bg-brand-solid); /* スリムなトグルのオン時の枠線。ダークテーマでは透明。 */ --component-colors-components-buttons-button-primary-icon: var(--colors-brand-300); /* プライマリボタン内のアイコン。`colors-background-bg-brand-solid` の上。 */ --component-colors-components-buttons-button-primary-icon-hover: var(--colors-brand-200); /* プライマリボタン内のアイコンのホバー時。 */ --shadow-xs: 0px 1px 2px 0px #0a0d120d; /* 最も小さい影。入力欄やボタンなど、地からわずかに浮く要素。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d; /* 立体感のあるボタン用。`shadow-xs` に内側の 2 層（下辺の陰と 1px の縁）を重ねたもの。ダークテーマでは外側の影だけが透明になり、内側の 2 層は残る。 */ --shadow-sm: 0px 1px 3px 0px #0a0d121a, 0px 1px 2px -1px #0a0d121a; /* 小さい影。カードなど。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-md: 0px 4px 6px -1px #0a0d121a, 0px 2px 4px -2px #0a0d120f; /* 中くらいの影。ドロップダウンやポップオーバーなど。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-lg: 0px 12px 16px -4px #0a0d1214, 0px 4px 6px -2px #0a0d1208, 0px 2px 2px -1px #0a0d120a; /* 大きい影。浮いたパネルやメニューなど。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-xl: 0px 20px 24px -4px #0a0d1214, 0px 8px 8px -4px #0a0d1208, 0px 3px 3px -1.5px #0a0d120a; /* さらに大きい影。モーダルなど。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-2xl: 0px 24px 48px -12px #0a0d122e, 0px 4px 4px -2px #0a0d120a; /* 特大の影。最前面の面。ダークテーマでは影の色が透明になり、影は出ない。 */ --shadow-3xl: 0px 32px 64px -12px #0a0d1224, 0px 5px 5px -2.5px #0a0d120a; /* 最大の影。最前面の大きな面。ダークテーマでは影の色が透明になり、影は出ない。 */ --portfolio-mockups-shadow-main-centre-md: 0px 75px 150px 0px #0a0d1224; /* モックアップ画像用の影（main-centre-md）。ダークテーマでは影の色が透明になり、影は出ない。 */ --portfolio-mockups-shadow-main-centre-lg: 0px 100px 200px 0px #0a0d122e; /* モックアップ画像用の影（main-centre-lg）。ダークテーマでは影の色が透明になり、影は出ない。 */ --portfolio-mockups-shadow-overlay-right-lg: -40px 40px 72px 0px #0a0d121f; /* モックアップ画像用の影（overlay-right-lg）。ダークテーマでは影の色が透明になり、影は出ない。 */ --portfolio-mockups-shadow-overlay-left-lg: 100px 100px 150px 0px #0a0d121f; /* モックアップ画像用の影（overlay-left-lg）。ダークテーマでは影の色が透明になり、影は出ない。 */ --portfolio-mockups-shadow-grid-md: 32px 32px 64px 0px #0a0d1214; /* モックアップ画像用の影（grid-md）。ダークテーマでは影の色が透明になり、影は出ない。 */ --focus-ring: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #4f02f0; /* キーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring`（ライト #4f02f0、ダーク #661aff）。 */ --focus-ring-shadow-xs: 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #4f02f0; /* キーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring`（ライト #4f02f0、ダーク #661aff）。`shadow-xs` の影を持つ要素に使う。ダークテーマでは影の層が透明になる。 */ --focus-ring-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #4f02f0; /* キーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring`（ライト #4f02f0、ダーク #661aff）。`shadow-xs-skeuomorphic` の影を持つ要素に使う。ダークテーマでは外側の影だけが透明になる。 */ --focus-ring-shadow-sm: 0px 1px 3px 0px #0a0d121a, 0px 1px 2px 0px #0a0d121a, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #4f02f0; /* キーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring`（ライト #4f02f0、ダーク #661aff）。`shadow-sm` の影を持つ要素に使う。ダークテーマでは影の層が透明になる。1px/2px の層の広がりは Figma のとおり 0 で、`shadow-sm` の -1px とは異なる。 */ --focus-ring-error: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f04438; /* エラー状態のコントロールのキーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring-error`（両テーマとも #f04438）。この層の色は Figma では変数に結び付いておらず、#f04438 の固定値。 */ --focus-ring-error-shadow-xs: 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f04438; /* エラー状態のコントロールのキーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring-error`（両テーマとも #f04438）。`shadow-xs` の影を持つ要素に使う。ダークテーマでは影の層が透明になる。 */ --focus-ring-error-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f04438; /* エラー状態のコントロールのキーボードフォーカスのリング。2px の白い間隔の外側に 2px のリングで、リングの色は `colors-effects-focus-rings-focus-ring-error`（両テーマとも #f04438）。`shadow-xs-skeuomorphic` の影を持つ要素に使う。ダークテーマでは外側の影だけが透明になる。 */ } [data-theme="dark"] { --colors-text-text-primary-900: var(--colors-gray-dark-mode-50); --colors-text-text-secondary-700: var(--colors-gray-dark-mode-300); --colors-text-text-secondary-hover: var(--colors-gray-dark-mode-200); --colors-text-text-tertiary-600: var(--colors-gray-dark-mode-400); --colors-text-text-tertiary-hover: var(--colors-gray-dark-mode-300); --colors-text-text-quaternary-500: var(--colors-gray-dark-mode-400); --colors-text-text-disabled: var(--colors-gray-dark-mode-500); --colors-text-text-placeholder: var(--colors-gray-dark-mode-500); --colors-text-text-placeholder-subtle: var(--colors-gray-dark-mode-700); --colors-text-text-white: var(--colors-base-white); --colors-text-text-brand-primary-900: var(--colors-gray-dark-mode-50); --colors-text-text-brand-secondary-700: var(--colors-gray-dark-mode-300); --colors-text-text-brand-tertiary-600: var(--colors-gray-dark-mode-400); --colors-text-text-brand-tertiary-alt: var(--colors-gray-dark-mode-50); --colors-text-text-error-primary-600: var(--colors-error-400); --colors-text-text-error-primary-hover: var(--colors-error-300); --colors-text-text-warning-primary-600: var(--colors-warning-400); --colors-text-text-success-primary-600: var(--colors-success-400); --colors-text-text-primary-on-brand: var(--colors-gray-dark-mode-50); --colors-text-text-secondary-on-brand: var(--colors-gray-dark-mode-300); --colors-text-text-tertiary-on-brand: var(--colors-gray-dark-mode-400); --colors-text-text-quaternary-on-brand: var(--colors-gray-dark-mode-400); --colors-background-bg-primary: var(--colors-gray-dark-mode-950); --colors-background-bg-primary-alt: var(--colors-background-bg-secondary); --colors-background-bg-primary-hover: var(--colors-gray-dark-mode-800); --colors-background-bg-primary-solid: var(--colors-background-bg-secondary); --colors-background-bg-secondary: var(--colors-gray-dark-mode-900); --colors-background-bg-secondary-alt: var(--colors-background-bg-primary); --colors-background-bg-secondary-hover: var(--colors-gray-dark-mode-800); --colors-background-bg-secondary-subtle: var(--colors-gray-dark-mode-900); --colors-background-bg-secondary-solid: var(--colors-gray-dark-mode-600); --colors-background-bg-tertiary: var(--colors-gray-dark-mode-800); --colors-background-bg-quaternary: var(--colors-gray-dark-mode-700); --colors-background-bg-active: var(--colors-gray-dark-mode-800); --colors-background-bg-disabled: var(--colors-gray-dark-mode-800); --colors-background-bg-disabled-subtle: var(--colors-gray-dark-mode-900); --colors-background-bg-overlay: var(--colors-gray-dark-mode-800); --colors-background-bg-brand-primary: var(--colors-brand-500); --colors-background-bg-brand-primary-alt: var(--colors-background-bg-secondary); --colors-background-bg-brand-secondary: var(--colors-brand-600); --colors-background-bg-brand-solid: var(--colors-brand-500); --colors-background-bg-brand-solid-hover: var(--colors-brand-400); --colors-background-bg-brand-section: var(--colors-background-bg-secondary); --colors-background-bg-brand-section-subtle: var(--colors-background-bg-primary); --colors-background-bg-error-primary: var(--colors-error-950); --colors-background-bg-error-secondary: var(--colors-error-600); --colors-background-bg-error-solid: var(--colors-error-600); --colors-background-bg-error-solid-hover: var(--colors-error-500); --colors-background-bg-warning-primary: var(--colors-warning-950); --colors-background-bg-warning-secondary: var(--colors-warning-600); --colors-background-bg-warning-solid: var(--colors-warning-600); --colors-background-bg-success-primary: var(--colors-success-950); --colors-background-bg-success-secondary: var(--colors-success-600); --colors-background-bg-success-solid: var(--colors-success-600); --colors-foreground-fg-primary-900: var(--colors-base-white); --colors-foreground-fg-secondary-700: var(--colors-gray-dark-mode-300); --colors-foreground-fg-secondary-hover: var(--colors-gray-dark-mode-200); --colors-foreground-fg-tertiary-600: var(--colors-gray-dark-mode-400); --colors-foreground-fg-tertiary-hover: var(--colors-gray-dark-mode-300); --colors-foreground-fg-quaternary-400: var(--colors-gray-dark-mode-600); --colors-foreground-fg-quaternary-hover: var(--colors-gray-dark-mode-500); --colors-foreground-fg-white: var(--colors-base-white); --colors-foreground-fg-disabled: var(--colors-gray-dark-mode-500); --colors-foreground-fg-disabled-subtle: var(--colors-gray-dark-mode-600); --colors-foreground-fg-brand-primary-600: var(--colors-brand-500); --colors-foreground-fg-brand-primary-alt: var(--colors-gray-dark-mode-300); --colors-foreground-fg-brand-secondary-500: var(--colors-brand-400); --colors-foreground-fg-brand-secondary-alt: var(--colors-gray-dark-mode-600); --colors-foreground-fg-brand-secondary-hover: var(--colors-gray-dark-mode-500); --colors-foreground-fg-error-primary: var(--colors-error-500); --colors-foreground-fg-error-secondary: var(--colors-error-400); --colors-foreground-fg-warning-primary: var(--colors-warning-500); --colors-foreground-fg-warning-secondary: var(--colors-warning-400); --colors-foreground-fg-success-primary: var(--colors-success-500); --colors-foreground-fg-success-secondary: var(--colors-success-400); --colors-border-border-primary: var(--colors-gray-dark-mode-700); --colors-border-border-secondary: var(--colors-gray-dark-mode-800); --colors-border-border-secondary-alt: var(--colors-gray-dark-mode-800); --colors-border-border-tertiary: var(--colors-gray-dark-mode-800); --colors-border-border-disabled: var(--colors-gray-dark-mode-700); --colors-border-border-disabled-subtle: var(--colors-gray-dark-mode-800); --colors-border-border-brand: var(--colors-brand-500); --colors-border-border-brand-alt: var(--colors-gray-dark-mode-700); --colors-border-border-error: var(--colors-error-400); --colors-border-border-error-subtle: var(--colors-error-500); --colors-effects-focus-rings-focus-ring: var(--colors-brand-500); --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500); --colors-effects-shadows-shadow-xs: var(--colors-base-transparent); --colors-effects-shadows-shadow-sm-02: var(--colors-base-transparent); --colors-effects-shadows-shadow-lg-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-lg-02: var(--colors-base-transparent); --colors-effects-shadows-shadow-sm-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-3xl-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-2xl-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-md-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-md-02: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl-01: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl-02: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-main-centre-md: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-main-centre-lg: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-overlay-lg: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-grid-md: var(--colors-base-transparent); --colors-effects-shadows-shadow-skeumorphic-inner: #0c0e120d; --colors-effects-shadows-shadow-skeumorphic-inner-border: #0c0e122e; --colors-effects-shadows-shadow-lg-03: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl-03: var(--colors-base-transparent); --colors-effects-shadows-shadow-2xl-02: var(--colors-base-transparent); --colors-effects-shadows-shadow-3xl-02: var(--colors-base-transparent); --component-colors-utility-blue-utility-blue-50: var(--colors-blue-950); --component-colors-utility-blue-utility-blue-100: var(--colors-blue-900); --component-colors-utility-blue-utility-blue-200: var(--colors-blue-800); --component-colors-utility-blue-utility-blue-300: var(--colors-blue-700); --component-colors-utility-blue-utility-blue-400: var(--colors-blue-600); --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500); --component-colors-utility-blue-utility-blue-600: var(--colors-blue-400); --component-colors-utility-blue-utility-blue-700: var(--colors-blue-300); --component-colors-utility-brand-utility-brand-50: var(--colors-brand-950); --component-colors-utility-brand-utility-brand-100: var(--colors-brand-900); --component-colors-utility-brand-utility-brand-200: var(--colors-brand-800); --component-colors-utility-brand-utility-brand-300: var(--colors-brand-700); --component-colors-utility-brand-utility-brand-400: var(--colors-brand-600); --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500); --component-colors-utility-brand-utility-brand-600: var(--colors-brand-400); --component-colors-utility-brand-utility-brand-700: var(--colors-brand-300); --component-colors-utility-brand-utility-brand-800: var(--colors-brand-200); --component-colors-utility-brand-utility-brand-900: var(--colors-brand-100); --component-colors-utility-brand-utility-brand-50-alt: var(--component-colors-utility-gray-utility-gray-50); --component-colors-utility-brand-utility-brand-100-alt: var(--component-colors-utility-gray-utility-gray-100); --component-colors-utility-brand-utility-brand-200-alt: var(--component-colors-utility-gray-utility-gray-200); --component-colors-utility-brand-utility-brand-300-alt: var(--component-colors-utility-gray-utility-gray-300); --component-colors-utility-brand-utility-brand-400-alt: var(--component-colors-utility-gray-utility-gray-400); --component-colors-utility-brand-utility-brand-500-alt: var(--component-colors-utility-gray-utility-gray-500); --component-colors-utility-brand-utility-brand-600-alt: var(--component-colors-utility-gray-utility-gray-600); --component-colors-utility-brand-utility-brand-700-alt: var(--component-colors-utility-gray-utility-gray-700); --component-colors-utility-brand-utility-brand-800-alt: var(--component-colors-utility-gray-utility-gray-800); --component-colors-utility-brand-utility-brand-900-alt: var(--component-colors-utility-gray-utility-gray-900); --component-colors-utility-gray-utility-gray-50: var(--colors-gray-dark-mode-900); --component-colors-utility-gray-utility-gray-100: var(--colors-gray-dark-mode-800); --component-colors-utility-gray-utility-gray-200: var(--colors-gray-dark-mode-700); --component-colors-utility-gray-utility-gray-300: var(--colors-gray-dark-mode-700); --component-colors-utility-gray-utility-gray-400: var(--colors-gray-dark-mode-600); --component-colors-utility-gray-utility-gray-500: var(--colors-gray-dark-mode-500); --component-colors-utility-gray-utility-gray-600: var(--colors-gray-dark-mode-400); --component-colors-utility-gray-utility-gray-700: var(--colors-gray-dark-mode-300); --component-colors-utility-gray-utility-gray-800: var(--colors-gray-dark-mode-200); --component-colors-utility-gray-utility-gray-900: var(--colors-gray-dark-mode-100); --component-colors-utility-error-utility-error-50: var(--colors-error-950); --component-colors-utility-error-utility-error-100: var(--colors-error-900); --component-colors-utility-error-utility-error-200: var(--colors-error-800); --component-colors-utility-error-utility-error-300: var(--colors-error-700); --component-colors-utility-error-utility-error-400: var(--colors-error-600); --component-colors-utility-error-utility-error-500: var(--colors-error-500); --component-colors-utility-error-utility-error-600: var(--colors-error-400); --component-colors-utility-error-utility-error-700: var(--colors-error-300); --component-colors-utility-warning-utility-warning-50: var(--colors-warning-950); --component-colors-utility-warning-utility-warning-100: var(--colors-warning-900); --component-colors-utility-warning-utility-warning-200: var(--colors-warning-800); --component-colors-utility-warning-utility-warning-300: var(--colors-warning-700); --component-colors-utility-warning-utility-warning-400: var(--colors-warning-600); --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500); --component-colors-utility-warning-utility-warning-600: var(--colors-warning-400); --component-colors-utility-warning-utility-warning-700: var(--colors-warning-300); --component-colors-utility-success-utility-success-50: var(--colors-success-950); --component-colors-utility-success-utility-success-100: var(--colors-success-900); --component-colors-utility-success-utility-success-200: var(--colors-success-800); --component-colors-utility-success-utility-success-300: var(--colors-success-700); --component-colors-utility-success-utility-success-400: var(--colors-success-600); --component-colors-utility-success-utility-success-500: var(--colors-success-500); --component-colors-utility-success-utility-success-600: var(--colors-success-400); --component-colors-utility-success-utility-success-700: var(--colors-success-300); --component-colors-utility-orange-utility-orange-50: var(--colors-orange-950); --component-colors-utility-orange-utility-orange-100: var(--colors-orange-900); --component-colors-utility-orange-utility-orange-200: var(--colors-orange-800); --component-colors-utility-orange-utility-orange-300: var(--colors-orange-700); --component-colors-utility-orange-utility-orange-400: var(--colors-orange-600); --component-colors-utility-orange-utility-orange-500: var(--colors-orange-500); --component-colors-utility-orange-utility-orange-600: var(--colors-orange-400); --component-colors-utility-orange-utility-orange-700: var(--colors-orange-300); --component-colors-utility-blue-dark-utility-blue-dark-50: var(--colors-blue-dark-950); --component-colors-utility-blue-dark-utility-blue-dark-100: var(--colors-blue-dark-900); --component-colors-utility-blue-dark-utility-blue-dark-200: var(--colors-blue-dark-800); --component-colors-utility-blue-dark-utility-blue-dark-300: var(--colors-blue-dark-700); --component-colors-utility-blue-dark-utility-blue-dark-400: var(--colors-blue-dark-600); --component-colors-utility-blue-dark-utility-blue-dark-500: var(--colors-blue-dark-500); --component-colors-utility-blue-dark-utility-blue-dark-600: var(--colors-blue-dark-400); --component-colors-utility-blue-dark-utility-blue-dark-700: var(--colors-blue-dark-300); --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-950); --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-900); --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-800); --component-colors-utility-indigo-utility-indigo-300: var(--colors-indigo-700); --component-colors-utility-indigo-utility-indigo-400: var(--colors-indigo-600); --component-colors-utility-indigo-utility-indigo-500: var(--colors-indigo-500); --component-colors-utility-indigo-utility-indigo-600: var(--colors-indigo-400); --component-colors-utility-indigo-utility-indigo-700: var(--colors-indigo-300); --component-colors-utility-fuchsia-utility-fuchsia-50: var(--colors-fuchsia-950); --component-colors-utility-fuchsia-utility-fuchsia-100: var(--colors-fuchsia-900); --component-colors-utility-fuchsia-utility-fuchsia-200: var(--colors-fuchsia-800); --component-colors-utility-fuchsia-utility-fuchsia-300: var(--colors-fuchsia-700); --component-colors-utility-fuchsia-utility-fuchsia-400: var(--colors-fuchsia-600); --component-colors-utility-fuchsia-utility-fuchsia-500: var(--colors-fuchsia-500); --component-colors-utility-fuchsia-utility-fuchsia-600: var(--colors-fuchsia-400); --component-colors-utility-fuchsia-utility-fuchsia-700: var(--colors-fuchsia-300); --component-colors-utility-pink-utility-pink-50: var(--colors-pink-950); --component-colors-utility-pink-utility-pink-100: var(--colors-pink-900); --component-colors-utility-pink-utility-pink-200: var(--colors-pink-800); --component-colors-utility-pink-utility-pink-300: var(--colors-pink-700); --component-colors-utility-pink-utility-pink-400: var(--colors-pink-600); --component-colors-utility-pink-utility-pink-500: var(--colors-pink-500); --component-colors-utility-pink-utility-pink-600: var(--colors-pink-400); --component-colors-utility-pink-utility-pink-700: var(--colors-pink-300); --component-colors-utility-purple-utility-purple-50: var(--colors-purple-950); --component-colors-utility-purple-utility-purple-100: var(--colors-purple-900); --component-colors-utility-purple-utility-purple-200: var(--colors-purple-800); --component-colors-utility-purple-utility-purple-300: var(--colors-purple-700); --component-colors-utility-purple-utility-purple-400: var(--colors-purple-600); --component-colors-utility-purple-utility-purple-500: var(--colors-purple-500); --component-colors-utility-purple-utility-purple-600: var(--colors-purple-400); --component-colors-utility-purple-utility-purple-700: var(--colors-purple-300); --component-colors-utility-orange-dark-utility-orange-dark-50: var(--colors-orange-dark-950); --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-900); --component-colors-utility-orange-dark-utility-orange-dark-200: var(--colors-orange-dark-800); --component-colors-utility-orange-dark-utility-orange-dark-300: var(--colors-orange-dark-700); --component-colors-utility-orange-dark-utility-orange-dark-400: var(--colors-orange-dark-600); --component-colors-utility-orange-dark-utility-orange-dark-500: var(--colors-orange-dark-500); --component-colors-utility-orange-dark-utility-orange-dark-600: var(--colors-orange-dark-400); --component-colors-utility-orange-dark-utility-orange-dark-700: var(--colors-orange-dark-300); --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-950); --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-900); --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-800); --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-700); --component-colors-utility-blue-light-utility-blue-light-400: var(--colors-blue-light-600); --component-colors-utility-blue-light-utility-blue-light-500: var(--colors-blue-light-500); --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-400); --component-colors-utility-blue-light-utility-blue-light-700: var(--colors-blue-light-300); --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-950); --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-900); --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-800); --component-colors-utility-gray-blue-utility-gray-blue-300: var(--colors-gray-blue-700); --component-colors-utility-gray-blue-utility-gray-blue-400: var(--colors-gray-blue-600); --component-colors-utility-gray-blue-utility-gray-blue-500: var(--colors-gray-blue-500); --component-colors-utility-gray-blue-utility-gray-blue-600: var(--colors-gray-blue-400); --component-colors-utility-gray-blue-utility-gray-blue-700: var(--colors-gray-blue-300); --component-colors-utility-green-utility-green-50: var(--colors-green-950); --component-colors-utility-green-utility-green-100: var(--colors-green-900); --component-colors-utility-green-utility-green-200: var(--colors-green-800); --component-colors-utility-green-utility-green-300: var(--colors-green-700); --component-colors-utility-green-utility-green-400: var(--colors-green-600); --component-colors-utility-green-utility-green-500: var(--colors-green-500); --component-colors-utility-green-utility-green-600: var(--colors-green-400); --component-colors-utility-green-utility-green-700: var(--colors-green-300); --component-colors-utility-yellow-utility-yellow-50: var(--colors-yellow-950); --component-colors-utility-yellow-utility-yellow-100: var(--colors-yellow-900); --component-colors-utility-yellow-utility-yellow-200: var(--colors-yellow-800); --component-colors-utility-yellow-utility-yellow-300: var(--colors-yellow-700); --component-colors-utility-yellow-utility-yellow-400: var(--colors-yellow-600); --component-colors-utility-yellow-utility-yellow-500: var(--colors-yellow-500); --component-colors-utility-yellow-utility-yellow-600: var(--colors-yellow-400); --component-colors-utility-yellow-utility-yellow-700: var(--colors-yellow-300); --component-colors-alpha-alpha-white-10: #0c0e121a; --component-colors-alpha-alpha-white-20: #0c0e1233; --component-colors-alpha-alpha-white-30: #0c0e124d; --component-colors-alpha-alpha-white-40: #0c0e1266; --component-colors-alpha-alpha-white-50: #0c0e1280; --component-colors-alpha-alpha-white-60: #0c0e1299; --component-colors-alpha-alpha-white-70: #0c0e12b2; --component-colors-alpha-alpha-white-80: #0c0e12cc; --component-colors-alpha-alpha-white-90: #0c0e12e5; --component-colors-alpha-alpha-white-100: var(--colors-gray-dark-mode-950); --component-colors-alpha-alpha-black-10: #ffffff1a; --component-colors-alpha-alpha-black-20: #ffffff33; --component-colors-alpha-alpha-black-30: #ffffff4d; --component-colors-alpha-alpha-black-40: #ffffff66; --component-colors-alpha-alpha-black-50: #ffffff80; --component-colors-alpha-alpha-black-60: #ffffff99; --component-colors-alpha-alpha-black-70: #ffffffb2; --component-colors-alpha-alpha-black-80: #ffffffcc; --component-colors-alpha-alpha-black-90: #ffffffe5; --component-colors-alpha-alpha-black-100: #ffffff; --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-dark-mode-300); --component-colors-components-text-editor-text-editor-icon-fg: var(--colors-gray-dark-mode-400); --component-colors-components-sliders-slider-handle-border: var(--colors-background-bg-primary); --component-colors-components-sliders-slider-handle-bg: var(--colors-foreground-fg-brand-primary-600); --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-dark-mode-700); --component-colors-components-icons-icons-icon-fg-brand: var(--colors-gray-dark-mode-400); --component-colors-components-icons-icons-icon-fg-brand-on-brand: var(--colors-gray-dark-mode-400); --component-colors-components-footers-footer-button-fg: var(--colors-gray-dark-mode-300); --component-colors-components-footers-footer-button-fg-hover: var(--colors-gray-dark-mode-100); --component-colors-components-toggles-toggle-button-fg-disabled: var(--colors-gray-dark-mode-600); --component-colors-components-toggles-toggle-border: var(--colors-base-transparent); --component-colors-components-toggles-toggle-slim-border-pressed: var(--colors-base-transparent); --component-colors-components-buttons-button-primary-icon: var(--colors-brand-300); --component-colors-components-buttons-button-primary-icon-hover: var(--colors-brand-200); --shadow-xs: 0px 1px 2px 0px #ffffff00; --shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0c0e122e, inset 0px -2px 0px 0px #0c0e120d, 0px 1px 2px 0px #ffffff00; --shadow-sm: 0px 1px 3px 0px #ffffff00, 0px 1px 2px -1px #ffffff00; --shadow-md: 0px 4px 6px -1px #ffffff00, 0px 2px 4px -2px #ffffff00; --shadow-lg: 0px 12px 16px -4px #ffffff00, 0px 4px 6px -2px #ffffff00, 0px 2px 2px -1px #ffffff00; --shadow-xl: 0px 20px 24px -4px #ffffff00, 0px 8px 8px -4px #ffffff00, 0px 3px 3px -1.5px #ffffff00; --shadow-2xl: 0px 24px 48px -12px #ffffff00, 0px 4px 4px -2px #ffffff00; --shadow-3xl: 0px 32px 64px -12px #ffffff00, 0px 5px 5px -2.5px #ffffff00; --portfolio-mockups-shadow-main-centre-md: 0px 75px 150px 0px #ffffff00; --portfolio-mockups-shadow-main-centre-lg: 0px 100px 200px 0px #ffffff00; --portfolio-mockups-shadow-overlay-right-lg: -40px 40px 72px 0px #ffffff00; --portfolio-mockups-shadow-overlay-left-lg: 100px 100px 150px 0px #ffffff00; --portfolio-mockups-shadow-grid-md: 32px 32px 64px 0px #ffffff00; --focus-ring: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #661aff; --focus-ring-shadow-xs: 0px 1px 2px 0px #ffffff00, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #661aff; --focus-ring-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0c0e122e, inset 0px -2px 0px 0px #0c0e120d, 0px 1px 2px 0px #ffffff00, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #661aff; --focus-ring-shadow-sm: 0px 1px 3px 0px #ffffff00, 0px 1px 2px 0px #ffffff00, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #661aff; --focus-ring-error-shadow-xs: 0px 1px 2px 0px #ffffff00, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f04438; --focus-ring-error-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0c0e122e, inset 0px -2px 0px 0px #0c0e120d, 0px 1px 2px 0px #ffffff00, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #f04438; } :root { --spacing-0-0px: 0px; /* 基準スケールの段 0（0px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-0-5-2px: 2px; /* 基準スケールの段 0.5（2px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-1-4px: 4px; /* 基準スケールの段 1（4px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-1-5-6px: 6px; /* 基準スケールの段 1.5（6px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-2-8px: 8px; /* 基準スケールの段 2（8px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-3-12px: 12px; /* 基準スケールの段 3（12px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-4-16px: 16px; /* 基準スケールの段 4（16px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-5-20px: 20px; /* 基準スケールの段 5（20px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-6-24px: 24px; /* 基準スケールの段 6（24px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-8-32px: 32px; /* 基準スケールの段 8（32px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-10-40px: 40px; /* 基準スケールの段 10（40px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-12-48px: 48px; /* 基準スケールの段 12（48px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-16-64px: 64px; /* 基準スケールの段 16（64px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-20-80px: 80px; /* 基準スケールの段 20（80px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-24-96px: 96px; /* 基準スケールの段 24（96px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-32-128px: 128px; /* 基準スケールの段 32（128px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-40-160px: 160px; /* 基準スケールの段 40（160px）。4px を 1 とする原寸スケール。レイアウトでは下の `spacing-xs` 〜 `spacing-11xl` を優先する。 */ --spacing-48-192px: 192px; /* 基準スケールの段 48（192px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-56-224px: 224px; /* 基準スケールの段 56（224px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-64-256px: 256px; /* 基準スケールの段 64（256px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-80-320px: 320px; /* 基準スケールの段 80（320px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-96-384px: 384px; /* 基準スケールの段 96（384px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-120-480px: 480px; /* 基準スケールの段 120（480px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-140-560px: 560px; /* 基準スケールの段 140（560px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-160-640px: 640px; /* 基準スケールの段 160（640px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-180-720px: 720px; /* 基準スケールの段 180（720px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-192-768px: 768px; /* 基準スケールの段 192（768px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-256-1-024px: 1024px; /* 基準スケールの段 256.1（1024px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-320-1-280px: 1280px; /* 基準スケールの段 320.1（1280px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-360-1-440px: 1440px; /* 基準スケールの段 360.1（1440px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-400-1-600px: 1600px; /* 基準スケールの段 400.1（1600px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-480-1-920px: 1920px; /* 基準スケールの段 480.1（1920px）。`width-*` とコンテナ幅の元になる大きな寸法。 */ --spacing-none: 0px; /* 余白なし（`spacing-0-0px`）。 */ --spacing-xxs: 2px; /* セマンティックな余白 xxs = `spacing-0-5-2px`（2px）。パディングとギャップはこの段から選ぶ。 */ --spacing-xs: 4px; /* セマンティックな余白 xs = `spacing-1-4px`（4px）。パディングとギャップはこの段から選ぶ。 */ --spacing-sm: 6px; /* セマンティックな余白 sm = `spacing-1-5-6px`（6px）。パディングとギャップはこの段から選ぶ。 */ --spacing-md: 8px; /* セマンティックな余白 md = `spacing-2-8px`（8px）。パディングとギャップはこの段から選ぶ。 */ --spacing-lg: 12px; /* セマンティックな余白 lg = `spacing-3-12px`（12px）。パディングとギャップはこの段から選ぶ。 */ --spacing-xl: 16px; /* セマンティックな余白 xl = `spacing-4-16px`（16px）。パディングとギャップはこの段から選ぶ。 */ --spacing-2xl: 20px; /* セマンティックな余白 2xl = `spacing-5-20px`（20px）。パディングとギャップはこの段から選ぶ。 */ --spacing-3xl: 24px; /* セマンティックな余白 3xl = `spacing-6-24px`（24px）。パディングとギャップはこの段から選ぶ。 */ --spacing-4xl: 32px; /* セマンティックな余白 4xl = `spacing-8-32px`（32px）。パディングとギャップはこの段から選ぶ。 */ --spacing-5xl: 40px; /* セマンティックな余白 5xl = `spacing-10-40px`（40px）。パディングとギャップはこの段から選ぶ。 */ --spacing-6xl: 48px; /* セマンティックな余白 6xl = `spacing-12-48px`（48px）。パディングとギャップはこの段から選ぶ。 */ --spacing-7xl: 64px; /* セマンティックな余白 7xl = `spacing-16-64px`（64px）。パディングとギャップはこの段から選ぶ。 */ --spacing-8xl: 80px; /* セマンティックな余白 8xl = `spacing-20-80px`（80px）。パディングとギャップはこの段から選ぶ。 */ --spacing-9xl: 96px; /* セマンティックな余白 9xl = `spacing-24-96px`（96px）。パディングとギャップはこの段から選ぶ。 */ --spacing-10xl: 128px; /* セマンティックな余白 10xl = `spacing-32-128px`（128px）。パディングとギャップはこの段から選ぶ。 */ --spacing-11xl: 160px; /* セマンティックな余白 11xl = `spacing-40-160px`（160px）。パディングとギャップはこの段から選ぶ。 */ --container-padding-desktop: 32px; /* デスクトップでのページコンテナの左右パディング（`spacing-8-32px`）。 */ --container-padding-mobile: 16px; /* モバイルでのページコンテナの左右パディング（`spacing-4-16px`）。 */ --radius-none: 0px; /* 角丸なし。 */ --radius-xxs: 2px; /* 角丸スケール xxs（2px）。 */ --radius-xs: 4px; /* 角丸スケール xs（4px）。 */ --radius-sm: 6px; /* 角丸スケール sm（6px）。 */ --radius-md: 8px; /* 角丸スケール md（8px）。 */ --radius-lg: 10px; /* 角丸スケール lg（10px）。 */ --radius-xl: 12px; /* 角丸スケール xl（12px）。 */ --radius-2xl: 16px; /* 角丸スケール 2xl（16px）。 */ --radius-3xl: 20px; /* 角丸スケール 3xl（20px）。 */ --radius-4xl: 24px; /* 角丸スケール 4xl（24px）。 */ --radius-full: 9999px; /* ピル型・円形（タグ、アバター、トグルなど完全に丸める要素）。 */ --backdrop-blur-sm: blur(8px); /* 最も弱い背景ぼかし。`backdrop-filter` の値として使う（半透明の面の背後をぼかす）。 */ --backdrop-blur-md: blur(16px); /* 中くらいの背景ぼかし。`backdrop-filter` の値として使う（半透明の面の背後をぼかす）。 */ --backdrop-blur-lg: blur(24px); /* 強い背景ぼかし。`backdrop-filter` の値として使う（半透明の面の背後をぼかす）。 */ --backdrop-blur-xl: blur(40px); /* 最も強い背景ぼかし。`backdrop-filter` の値として使う（半透明の面の背後をぼかす）。 */ --width-xxs: 320px; /* 最大幅 xxs = `spacing-80-320px`（320px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-xs: 384px; /* 最大幅 xs = `spacing-96-384px`（384px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-sm: 480px; /* 最大幅 sm = `spacing-120-480px`（480px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-md: 560px; /* 最大幅 md = `spacing-140-560px`（560px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-lg: 640px; /* 最大幅 lg = `spacing-160-640px`（640px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-xl: 768px; /* 最大幅 xl = `spacing-192-768px`（768px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-2xl: 1024px; /* 最大幅 2xl = `spacing-256-1-024px`（1024px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-3xl: 1280px; /* 最大幅 3xl = `spacing-320-1-280px`（1280px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-4xl: 1440px; /* 最大幅 4xl = `spacing-360-1-440px`（1440px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-5xl: 1600px; /* 最大幅 5xl = `spacing-400-1-600px`（1600px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --width-6xl: 1920px; /* 最大幅 6xl = `spacing-480-1-920px`（1920px）。モーダル・カード・コンテンツ列の最大幅に使う。 */ --paragraph-max-width: 720px; /* 本文段落の最大幅（720px）。長文の行長はこれを超えない。 */ --container-max-width-desktop: 1280px; /* デスクトップでのページコンテナの最大幅（1280px）。 */ --font-weight-regular: 450; /* TT Norms Pro の Normal（450）。本文の標準ウェイト。 */ --font-weight-medium: 500; /* TT Norms Pro の Medium（500）。ラベルやボタンなど、やや強めたい文字。 */ --font-weight-semibold: 600; /* TT Norms Pro の DemiBold（600）。見出しや強調。 */ --font-weight-bold: 700; /* TT Norms Pro の Bold（700）。最も強い強調。 */ --font-display: "TT Norms Pro", "Tazugane Gothic StdN", system-ui, sans-serif; --font-body: "TT Norms Pro", "Tazugane Gothic StdN", system-ui, sans-serif; --text-display-2xl-regular: 450 72px/90px var(--font-display); /* 最大の見出し（ヒーロー）の Regular（TT Norms Pro Normal、`font-weight-regular`）。72px / 行送り 90px、字間 -0.02em。Figma の「Display 2xl/Regular」。 */ --text-display-2xl-medium: 500 72px/90px var(--font-display); /* 最大の見出し（ヒーロー）の Medium（TT Norms Pro Medium、`font-weight-medium`）。72px / 行送り 90px、字間 -0.02em。Figma の「Display 2xl/Medium」。 */ --text-display-2xl-semibold: 600 72px/90px var(--font-display); /* 最大の見出し（ヒーロー）の Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。72px / 行送り 90px、字間 -0.02em。Figma の「Display 2xl/Semibold」。 */ --text-display-2xl-bold: 700 72px/90px var(--font-display); /* 最大の見出し（ヒーロー）の Bold（TT Norms Pro Bold、`font-weight-bold`）。72px / 行送り 90px、字間 -0.02em。Figma の「Display 2xl/Bold」。 */ --text-display-xl-regular: 450 60px/72px var(--font-display); /* 大見出しの Regular（TT Norms Pro Normal、`font-weight-regular`）。60px / 行送り 72px、字間 -0.02em。Figma の「Display xl/Regular」。 */ --text-display-xl-medium: 500 60px/72px var(--font-display); /* 大見出しの Medium（TT Norms Pro Medium、`font-weight-medium`）。60px / 行送り 72px、字間 -0.02em。Figma の「Display xl/Medium」。 */ --text-display-xl-semibold: 600 60px/72px var(--font-display); /* 大見出しの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。60px / 行送り 72px、字間 -0.02em。Figma の「Display xl/Semibold」。 */ --text-display-xl-bold: 700 60px/72px var(--font-display); /* 大見出しの Bold（TT Norms Pro Bold、`font-weight-bold`）。60px / 行送り 72px、字間 -0.02em。Figma の「Display xl/Bold」。 */ --text-display-lg-regular: 450 48px/60px var(--font-display); /* ページタイトルの Regular（TT Norms Pro Normal、`font-weight-regular`）。48px / 行送り 60px、字間 -0.02em。Figma の「Display lg/Regular」。 */ --text-display-lg-medium: 500 48px/60px var(--font-display); /* ページタイトルの Medium（TT Norms Pro Medium、`font-weight-medium`）。48px / 行送り 60px、字間 -0.02em。Figma の「Display lg/Medium」。 */ --text-display-lg-semibold: 600 48px/60px var(--font-display); /* ページタイトルの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。48px / 行送り 60px、字間 -0.02em。Figma の「Display lg/Semibold」。 */ --text-display-lg-bold: 700 48px/60px var(--font-display); /* ページタイトルの Bold（TT Norms Pro Bold、`font-weight-bold`）。48px / 行送り 60px、字間 -0.02em。Figma の「Display lg/Bold」。 */ --text-display-md-regular: 450 36px/44px var(--font-display); /* セクション見出しの Regular（TT Norms Pro Normal、`font-weight-regular`）。36px / 行送り 44px、字間 -0.02em。Figma の「Display md/Regular」。 */ --text-display-md-medium: 500 36px/44px var(--font-display); /* セクション見出しの Medium（TT Norms Pro Medium、`font-weight-medium`）。36px / 行送り 44px、字間 -0.02em。Figma の「Display md/Medium」。 */ --text-display-md-semibold: 600 36px/44px var(--font-display); /* セクション見出しの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。36px / 行送り 44px、字間 -0.02em。Figma の「Display md/Semibold」。 */ --text-display-md-bold: 700 36px/44px var(--font-display); /* セクション見出しの Bold（TT Norms Pro Bold、`font-weight-bold`）。36px / 行送り 44px、字間 -0.02em。Figma の「Display md/Bold」。 */ --text-display-sm-regular: 450 30px/38px var(--font-display); /* 小さめのセクション見出しの Regular（TT Norms Pro Normal、`font-weight-regular`）。30px / 行送り 38px、字間 0。Figma の「Display sm/Regular」。 */ --text-display-sm-medium: 500 30px/38px var(--font-display); /* 小さめのセクション見出しの Medium（TT Norms Pro Medium、`font-weight-medium`）。30px / 行送り 38px、字間 0。Figma の「Display sm/Medium」。 */ --text-display-sm-semibold: 600 30px/38px var(--font-display); /* 小さめのセクション見出しの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。30px / 行送り 38px、字間 0。Figma の「Display sm/Semibold」。 */ --text-display-sm-bold: 700 30px/38px var(--font-display); /* 小さめのセクション見出しの Bold（TT Norms Pro Bold、`font-weight-bold`）。30px / 行送り 38px、字間 0。Figma の「Display sm/Bold」。 */ --text-display-xs-regular: 450 24px/32px var(--font-display); /* カードやモーダルの見出しの Regular（TT Norms Pro Normal、`font-weight-regular`）。24px / 行送り 32px、字間 0。Figma の「Display xs/Regular」。 */ --text-display-xs-medium: 500 24px/32px var(--font-display); /* カードやモーダルの見出しの Medium（TT Norms Pro Medium、`font-weight-medium`）。24px / 行送り 32px、字間 0。Figma の「Display xs/Medium」。 */ --text-display-xs-semibold: 600 24px/32px var(--font-display); /* カードやモーダルの見出しの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。24px / 行送り 32px、字間 0。Figma の「Display xs/Semibold」。 */ --text-display-xs-bold: 700 24px/32px var(--font-display); /* カードやモーダルの見出しの Bold（TT Norms Pro Bold、`font-weight-bold`）。24px / 行送り 32px、字間 0。Figma の「Display xs/Bold」。 */ --text-text-xl-regular: 450 20px/30px var(--font-body); /* リード文・大きめの本文の Regular（TT Norms Pro Normal、`font-weight-regular`）。20px / 行送り 30px、字間 0。Figma の「Text xl/Regular」。 */ --text-text-xl-medium: 500 20px/30px var(--font-body); /* リード文・大きめの本文の Medium（TT Norms Pro Medium、`font-weight-medium`）。20px / 行送り 30px、字間 0。Figma の「Text xl/Medium」。 */ --text-text-xl-semibold: 600 20px/30px var(--font-body); /* リード文・大きめの本文の Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。20px / 行送り 30px、字間 0。Figma の「Text xl/Semibold」。 */ --text-text-xl-bold: 700 20px/30px var(--font-body); /* リード文・大きめの本文の Bold（TT Norms Pro Bold、`font-weight-bold`）。20px / 行送り 30px、字間 0。Figma の「Text xl/Bold」。 */ --text-text-lg-regular: 450 18px/28px var(--font-body); /* やや大きめの本文の Regular（TT Norms Pro Normal、`font-weight-regular`）。18px / 行送り 28px、字間 0。Figma の「Text lg/Regular」。 */ --text-text-lg-medium: 500 18px/28px var(--font-body); /* やや大きめの本文の Medium（TT Norms Pro Medium、`font-weight-medium`）。18px / 行送り 28px、字間 0。Figma の「Text lg/Medium」。 */ --text-text-lg-semibold: 600 18px/28px var(--font-body); /* やや大きめの本文の Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。18px / 行送り 28px、字間 0。Figma の「Text lg/Semibold」。 */ --text-text-lg-bold: 700 18px/28px var(--font-body); /* やや大きめの本文の Bold（TT Norms Pro Bold、`font-weight-bold`）。18px / 行送り 28px、字間 0。Figma の「Text lg/Bold」。 */ --text-text-md-regular: 450 16px/24px var(--font-body); /* 標準の本文の Regular（TT Norms Pro Normal、`font-weight-regular`）。16px / 行送り 24px、字間 0。Figma の「Text md/Regular」。 */ --text-text-md-medium: 500 16px/24px var(--font-body); /* 標準の本文の Medium（TT Norms Pro Medium、`font-weight-medium`）。16px / 行送り 24px、字間 0。Figma の「Text md/Medium」。 */ --text-text-md-semibold: 600 16px/24px var(--font-body); /* 標準の本文の Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。16px / 行送り 24px、字間 0。Figma の「Text md/Semibold」。 */ --text-text-md-bold: 700 16px/24px var(--font-body); /* 標準の本文の Bold（TT Norms Pro Bold、`font-weight-bold`）。16px / 行送り 24px、字間 0。Figma の「Text md/Bold」。 */ --text-text-sm-regular: 450 14px/20px var(--font-body); /* 小さめの本文・UI のラベルの Regular（TT Norms Pro Normal、`font-weight-regular`）。14px / 行送り 20px、字間 0。Figma の「Text sm/Regular」。 */ --text-text-sm-medium: 500 14px/20px var(--font-body); /* 小さめの本文・UI のラベルの Medium（TT Norms Pro Medium、`font-weight-medium`）。14px / 行送り 20px、字間 0。Figma の「Text sm/Medium」。 */ --text-text-sm-semibold: 600 14px/20px var(--font-body); /* 小さめの本文・UI のラベルの Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。14px / 行送り 20px、字間 0。Figma の「Text sm/Semibold」。 */ --text-text-sm-bold: 700 14px/20px var(--font-body); /* 小さめの本文・UI のラベルの Bold（TT Norms Pro Bold、`font-weight-bold`）。14px / 行送り 20px、字間 0。Figma の「Text sm/Bold」。 */ --text-text-xs-regular: 450 12px/18px var(--font-body); /* キャプション・補足の Regular（TT Norms Pro Normal、`font-weight-regular`）。12px / 行送り 18px、字間 0。Figma の「Text xs/Regular」。 */ --text-text-xs-medium: 500 12px/18px var(--font-body); /* キャプション・補足の Medium（TT Norms Pro Medium、`font-weight-medium`）。12px / 行送り 18px、字間 0。Figma の「Text xs/Medium」。 */ --text-text-xs-semibold: 600 12px/18px var(--font-body); /* キャプション・補足の Semibold（TT Norms Pro DemiBold、`font-weight-semibold`）。12px / 行送り 18px、字間 0。Figma の「Text xs/Semibold」。 */ --text-text-xs-bold: 700 12px/18px var(--font-body); /* キャプション・補足の Bold（TT Norms Pro Bold、`font-weight-bold`）。12px / 行送り 18px、字間 0。Figma の「Text xs/Bold」。 */ } .display-2xl-regular { font-family: var(--font-display); font-size: 72px; line-height: 90px; font-weight: 450; letter-spacing: -0.02em; } .display-2xl-medium { font-family: var(--font-display); font-size: 72px; line-height: 90px; font-weight: 500; letter-spacing: -0.02em; } .display-2xl-semibold { font-family: var(--font-display); font-size: 72px; line-height: 90px; font-weight: 600; letter-spacing: -0.02em; } .display-2xl-bold { font-family: var(--font-display); font-size: 72px; line-height: 90px; font-weight: 700; letter-spacing: -0.02em; } .display-xl-regular { font-family: var(--font-display); font-size: 60px; line-height: 72px; font-weight: 450; letter-spacing: -0.02em; } .display-xl-medium { font-family: var(--font-display); font-size: 60px; line-height: 72px; font-weight: 500; letter-spacing: -0.02em; } .display-xl-semibold { font-family: var(--font-display); font-size: 60px; line-height: 72px; font-weight: 600; letter-spacing: -0.02em; } .display-xl-bold { font-family: var(--font-display); font-size: 60px; line-height: 72px; font-weight: 700; letter-spacing: -0.02em; } .display-lg-regular { font-family: var(--font-display); font-size: 48px; line-height: 60px; font-weight: 450; letter-spacing: -0.02em; } .display-lg-medium { font-family: var(--font-display); font-size: 48px; line-height: 60px; font-weight: 500; letter-spacing: -0.02em; } .display-lg-semibold { font-family: var(--font-display); font-size: 48px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; } .display-lg-bold { font-family: var(--font-display); font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; } .display-md-regular { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 450; letter-spacing: -0.02em; } .display-md-medium { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; } .display-md-semibold { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; } .display-md-bold { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; } .display-sm-regular { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 450; letter-spacing: 0; } .display-sm-medium { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: 0; } .display-sm-semibold { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: 0; } .display-sm-bold { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: 0; } .display-xs-regular { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 450; letter-spacing: 0; } .display-xs-medium { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0; } .display-xs-semibold { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: 0; } .display-xs-bold { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0; } .text-xl-regular { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 450; letter-spacing: 0; } .text-xl-medium { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: 0; } .text-xl-semibold { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: 0; } .text-xl-bold { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: 0; } .text-lg-regular { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 450; letter-spacing: 0; } .text-lg-medium { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: 0; } .text-lg-semibold { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0; } .text-lg-bold { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: 0; } .text-md-regular { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 450; letter-spacing: 0; } .text-md-medium { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; } .text-md-semibold { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; } .text-md-bold { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0; } .text-sm-regular { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0; } .text-sm-medium { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; } .text-sm-semibold { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; } .text-sm-bold { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0; } .text-xs-regular { font-family: var(--font-body); font-size: 12px; line-height: 18px; font-weight: 450; letter-spacing: 0; } .text-xs-medium { font-family: var(--font-body); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0; } .text-xs-semibold { font-family: var(--font-body); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0; } .text-xs-bold { font-family: var(--font-body); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Th.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-ThIt.woff") format("woff"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLt.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLtIt.woff") format("woff"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Lt.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-LtIt.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Rg.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-It.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Normal.woff") format("woff"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-NormalIt.woff") format("woff"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Md.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-MdIt.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBd.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBdIt.woff") format("woff"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Bd.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BdIt.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBd.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBdIt.woff") format("woff"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Blk.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BlkIt.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlk.woff") format("woff"); font-weight: 950; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlkIt.woff") format("woff"); font-weight: 950; font-style: italic; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-UltLt.woff") format("woff"); font-weight: 250; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Thin.woff") format("woff"); font-weight: 275; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Book.woff") format("woff"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Heavy.woff") format("woff"); font-weight: 750; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Black.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-XBlack.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Th.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-ThIt.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLt.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLtIt.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Lt.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-LtIt.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Rg.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-It.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Normal.otf") format("opentype"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-NormalIt.otf") format("opentype"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Md.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-MdIt.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBd.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBdIt.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Bd.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BdIt.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBd.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBdIt.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Blk.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BlkIt.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlk.otf") format("opentype"); font-weight: 950; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlkIt.otf") format("opentype"); font-weight: 950; font-style: italic; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20UltLt.otf") format("opentype"); font-weight: 250; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Thin.otf") format("opentype"); font-weight: 275; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Book.otf") format("opentype"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Heavy.otf") format("opentype"); font-weight: 750; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20Black.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/Monotype%20%20-%20Tazugane%20Gothic%20StdN%20XBlack.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Th.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-ThIt.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLt.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XLtIt.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Lt.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-LtIt.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Rg.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-It.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Normal.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-NormalIt.woff2") format("woff2"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Md.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-MdIt.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBd.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-DmBdIt.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BdIt.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBd.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBdIt.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-Blk.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-BlkIt.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlk.woff2") format("woff2"); font-weight: 950; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("fonts/TTNormsPro-XBlkIt.woff2") format("woff2"); font-weight: 950; font-style: italic; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-UltLt.woff2") format("woff2"); font-weight: 250; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Thin.woff2") format("woff2"); font-weight: 275; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Book.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Heavy.woff2") format("woff2"); font-weight: 750; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-Black.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Tazugane Gothic StdN"; src: url("fonts/TazuganeGothicStdN-XBlack.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Linotype Granjon Old Style Figures"; src: url("fonts/Linotype%20-%20Granjon%20Italic%20Old%20Style%20Figures.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }