/* ========================================
   デジタル庁デザインシステム統合設定
   ======================================== */

/**
 * このファイルはデジタル庁デザインシステム（DADS）と
 * 既存の郡山市保育料計算シミュレーターのスタイルを統合します。
 *
 * 統合方針:
 * 1. DADSのデザイントークン（CSS変数）を読み込み
 * 2. 既存のCSS変数とDADS変数のマッピングを定義
 * 3. 既存のシンプルなHTMLとCSSを維持
 */

/* ========================================
   デジタル庁DS - デザイントークン読み込み
   ======================================== */

/**
 * デジタル庁デザインシステムのデザイントークン（CSS変数）のみを使用します。
 * コンポーネントの構造は既存のシンプルなHTMLを維持し、
 * 色・余白・フォントなどの変数だけをデジタル庁DSから活用します。
 */

@import url('./vendor/dads-tokens.css');

/* ========================================
   Noto Sans JP - ローカルフォント定義
   Google Fonts への外部依存を排除
   ======================================== */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-latin-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329,
    U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329,
    U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-japanese-400-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0,
    U+2113, U+2c60-2c7f, U+a720-a7ff, U+2200-22ff, U+2600-26ff, U+2700-27bf, U+3000-303f,
    U+3040-309f, U+30a0-30ff, U+3100-312f, U+3200-32ff, U+3400-4dbf, U+4e00-9fff, U+a000-a4cf,
    U+a960-a97f, U+ac00-d7af, U+f900-faff, U+fe10-fe1f, U+fe30-fe4f, U+ff00-ffef;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-japanese-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0,
    U+2113, U+2c60-2c7f, U+a720-a7ff, U+2200-22ff, U+2600-26ff, U+2700-27bf, U+3000-303f,
    U+3040-309f, U+30a0-30ff, U+3100-312f, U+3200-32ff, U+3400-4dbf, U+4e00-9fff, U+a000-a4cf,
    U+a960-a97f, U+ac00-d7af, U+f900-faff, U+fe10-fe1f, U+fe30-fe4f, U+ff00-ffef;
}

/* ========================================
   CSS変数マッピング: 既存 → DADS
   ======================================== */

/**
 * 既存のCSS変数をDADSのデザイントークンにマッピングします。
 * これにより、既存コードを変更せずにDADSのカラーシステムを利用できます。
 */

:root {
  /* --------------------------------------------------
     カラーマッピング
     -------------------------------------------------- */

  /* プライマリカラー: 既存の青系をDADSの青系にマッピング */
  --color-primary: var(
    --color-primitive-blue-1000
  ); /* 既存: #00118f（DADSトークンに統合・値は同一） */

  --color-primary-dark: var(--color-primitive-blue-1100); /* #049 → #000071 */
  --color-primary-hover: var(--color-primitive-blue-900); /* #0052a3 → #0017c1 */

  /* セマンティックカラー: DADSの定義を使用 */
  --color-success: var(--color-semantic-success-1); /* #28a745 → #259d63 */
  --color-error: var(--color-semantic-error-1); /* #dc3545 → #ec0000 */
  --color-danger: var(--color-semantic-error-1); /* エイリアス */
  --color-warning: var(--color-semantic-warning-yellow-1); /* #ffc107 → #b78f00 */
  --color-info: var(--color-primitive-light-blue-700); /* #17a2b8 → #0877d7 */

  /* テキストカラー: DADSのグレースケールを使用 */
  --color-text: var(--color-neutral-solid-gray-800); /* #333 → #333333 */
  --color-text-light: var(--color-neutral-solid-gray-600); /* #666 → #666666 */
  --color-text-muted: var(--color-neutral-solid-gray-400); /* #999 → #999999 */

  /* 背景カラー */
  --color-bg: var(--color-neutral-white); /* #fff → #ffffff */
  --color-bg-light: var(--color-neutral-solid-gray-50); /* #f5f5f5 → #f2f2f2 */
  --color-bg-dark: var(--color-neutral-solid-gray-800); /* #343a40 → #333333 */

  /* ボーダーカラー */
  --color-border: var(--color-neutral-solid-gray-200); /* #ddd → #cccccc */
  --color-border-light: var(--color-neutral-solid-gray-100); /* #dee2e6 → #e6e6e6 */
  --color-border-focus: var(--color-primitive-blue-1000); /* #06c → #00118f */

  /* --------------------------------------------------
     タイポグラフィマッピング
     -------------------------------------------------- */

  /* フォントファミリー: DADSのNoto Sans JPを使用 */
  --font-family: var(--font-family-sans);

  /* --------------------------------------------------
     エレベーション（シャドウ）マッピング
     -------------------------------------------------- */

  /* 既存のシャドウをDADSのエレベーションにマッピング */
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
}

/* ========================================
   フォント設定
   ======================================== */

/**
 * デジタル庁DSのフォント（Noto Sans JP）をプロジェクト全体に適用します。
 * Google Fontsはindex.htmlで読み込まれます。
 */

html {
  /* デジタル庁DSのフォントファミリーを全体に適用 */
  font-family: var(--font-family-sans);
}

/* ========================================
   デザイントークンの活用について
   ======================================== */

/**
 * 既存のstyle.cssで使用されているCSS変数が、
 * デジタル庁DSのデザイントークンにマッピングされています。
 *
 * 例:
 * - --color-primary: デジタル庁DSの青色
 * - --font-family: Noto Sans JP
 * - --shadow-sm: デジタル庁DSのエレベーション
 *
 * これにより、既存のHTMLとCSSを変更せずに、
 * デジタル庁DSの統一されたデザインシステムの恩恵を受けられます。
 */