/* =======================================
   CSS デザイントークン テンプレート
   （値は自分で記入）
   ======================================= */

/* ---------------------------------------
   0) 基本構造の説明
   - primitives: 数値やカラーなど生の値
   - semantic: 意味を持たせたトークン（背景・文字・ブランド色など）
   - component: コンポーネント単位のトークン
   --------------------------------------- */

/* ---------------------------------------
   1) PRIMITIVE 基本スケール（意味を持たない）
   --------------------------------------- */
:root {
  /* ▼ カラーの基本スケール（グレー系） */
  --color-gray-0: #ffffff;
  --color-gray-50: ;
  --color-gray-100: ;
  --color-gray-200: ;
  --color-gray-300: ;
  --color-gray-400: ;
  --color-gray-500: ;
  --color-gray-600: ;
  --color-gray-700: ;
  --color-gray-800: #232323;
  --color-gray-900: ;
  --color-gray-950: ;

  /* ▼ ブランドカラーのスケール */
  --color-brand-50: ;
  --color-brand-100: #bfdfe9;
  --color-brand-200: #93d6ea;
  --color-brand-300: #73cae6;
  --color-brand-400: ;
  --color-brand-500: ;
  --color-brand-600: ;
  --color-brand-700: #005bae;
  --color-brand-800: #001E4B;
  --color-brand-900: #103251;

  /* ▼ 透明度スケール */
  --opacity-0: ;
  /* 完全透明 */
  --opacity-10: ;
  /* 10% */
  --opacity-20: ;
  --opacity-40: ;
  --opacity-60: ;
  --opacity-80: ;
  --opacity-100: ;
  /* 不透明 */

  /* ▼ 余白（スペーシング）スケール */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 40px;
  --space-8: 60px;
  --space-10: 120px;
  --space-12: 220px;
  --space-16: 330px;
  --space-20: ;
  --space-24: ;
  --space-32: ;
  --space-40: ;

  /* ▼ サイズスケール（アイコンなど） */
  --size-1: ;
  --size-2: ;
  --size-3: ;
  --size-4: ;
  --size-5: ;
  --size-6: ;
  --size-8: ;
  --size-10: ;
  --size-12: ;

  /* ▼ 角丸（ラディウス） */
  --radius-0: 3px;
  --radius-1: 5px;
  --radius-2: 10px;
  --radius-3: 15px;
  --radius-4: 20px;
  --radius-round: 100%;
  /* 丸型ボタンなど */

  /* ▼ フォント設定 */
  --font-sans: "M PLUS 1", sans-serif;

  /* サンセリフ体 */
  --font-serif: ;
  /* セリフ体 */
  --font-mono: ;
  /* 等幅フォント */

  /* ▼ フォントサイズ */
  --font-size-xs: 10px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 36px;
  --font-size-3xl: ;

  /* ▼ 行間・文字の太さ */
  --line-compact: ;
  --line-default: ;
  --line-loose: ;

  --weight-regular: ;
  --weight-medium: ;
  --weight-semibold: ;
  --weight-bold: ;

  /* ▼ シャドウ（影）スケール */
  --shadow-1: 3px 6px 7px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-3: 0 4px 5px rgba(0, 0, 0, 0.2);
  --shadow-4: 0px 4px 20px rgba(0, 0, 0, 0.2);

  /* ▼ アニメーション速度・イージング */
  --duration-fast: 0.3s;
  /* 速い */
  --duration-normal: 0.5s;
  /* 標準 */
  --duration-slow: 1s;
  /* 遅い */

  --easing-standard: ;
  /* 通常のイージング */
  --easing-emphasized: ;
  /* 強調アニメーション用 */

  /* ▼ Z-index（重なり順） */
  --z-base: ;
  --z-sticky: ;
  --z-dropdown: ;
  --z-modal: ;
  --z-popover: ;
  --z-toast: ;

  /* ▼ コンテナ幅 */
  --container-sm: 500px;
  --container-md: 750px;
  --container-lg: 1000px;
  --container-xl: 1200px;

  /* ▼ ブレークポイント */
  --bp-sm: 576px;
  /* スマホ小 */
  --bp-md: 768px;
  /* タブレット縦 */
  --bp-lg: 1024px;
  /* タブレット横 / 小PC */
  --bp-xl: 1400px;
  /* デスクトップ大 */
}

/* ---------------------------------------
  2) SEMANTIC 意味を持たせたトークン
   --------------------------------------- */
:root[data-theme="light"] {
  /* テキスト色 */
  --text-strong: var(--color-gray-900);
  --text-default: var(--color-gray-800);
  --text-muted: var(--color-gray-600);
  --text-inverse: var(--color-gray-0);

  /* 背景色 */
  --surface-1: var(--color-gray-0);
  --surface-2: var(--color-gray-50);
  --surface-3: var(--color-gray-100);
  --elevation-1: var(--shadow-1);
  --elevation-2: var(--shadow-2);

  /* ブランド色 */
  --brand: var(--color-brand-600);
  --brand-contrast: var(--color-gray-0);
  --brand-muted: var(--color-brand-100);
  --brand-hover: var(--color-brand-700);
  --brand-active: var(--color-brand-800);

  /* 枠線 */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --focus-ring: var(--color-brand-400);

  /* ステータス色 */
  --success: ;
  --warning: ;
  --danger: ;
  --info: ;
}

:root[data-theme="dark"] {
  /* ダークテーマ用テキスト色 */
  --text-strong: var(--color-gray-0);
  --text-default: var(--color-gray-50);
  --text-muted: var(--color-gray-300);
  --text-inverse: var(--color-gray-900);

  /* 背景色 */
  --surface-1: var(--color-gray-900);
  --surface-2: var(--color-gray-800);
  --surface-3: var(--color-gray-700);
  --elevation-1: var(--shadow-2);
  --elevation-2: var(--shadow-3);

  /* ブランド色 */
  --brand: var(--color-brand-400);
  --brand-contrast: var(--color-gray-900);
  --brand-muted: var(--color-brand-900);
  --brand-hover: var(--color-brand-300);
  --brand-active: var(--color-brand-200);

  /* 枠線 */
  --border-default: var(--color-gray-700);
  --border-strong: var(--color-gray-600);
  --focus-ring: var(--color-brand-300);

  /* ステータス色 */
  --success: ;
  --warning: ;
  --danger: ;
  --info: ;
}

/* ▼ システムのテーマ設定に追従 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

/* ---------------------------------------
   3) タイポグラフィ設定
   --------------------------------------- */
:root {
  --heading-font: var(--font-sans);
  --body-font: var(--font-sans);
  --code-font: var(--font-mono);

  --heading-1-size: var(--font-size-3xl);
  --heading-2-size: var(--font-size-2xl);
  --heading-3-size: var(--font-size-xl);
  --body-size: var(--font-size-md);
  --small-size: var(--font-size-sm);
}

/* ---------------------------------------
   4) コンポーネント別トークン例
   --------------------------------------- */
:root {
  /* ボタン */
  --btn-font: var(--body-font);
  --btn-radius: var(--radius-2);
  --btn-pad-y: var(--space-2);
  --btn-pad-x: var(--space-4);

  --btn-bg: var(--brand);
  --btn-fg: var(--brand-contrast);
  --btn-bg-hover: var(--brand-hover);
  --btn-bg-active: var(--brand-active);
  --btn-border: transparent;
  --btn-shadow: var(--elevation-1);
  --btn-focus-ring: 0 0 0 3px var(--focus-ring);

  /* カード */
  --card-bg: var(--surface-1);
  --card-fg: var(--text-default);
  --card-border: var(--border-default);
  --card-radius: var(--radius-3);
  --card-shadow: var(--elevation-1);
  --card-pad: var(--space-6);
}