:root {
  /* =========================================
     1. Primitives (色素材)
     ※ここを書き換えると、参照しているAlias全ての色が変わります
     ========================================= */
  --black: #000000;
  --white: #ffffff;

  /* Blue */
  --blue-50: #e5f6ff;
  --blue-100: #ceedff;
  --blue-200: #97d3ff;
  --blue-300: #61b3ff;
  --blue-400: #218bff;
  --blue-500: #0069e5;
  --blue-600: #0550ae;
  --blue-700: #033d8b;
  --blue-800: #0a3069;
  --blue-900: #002155;

  /* Gray */
  --gray-50: #f6f8fa;
  --gray-100: #eaeef2;
  --gray-200: #d0d7de;
  --gray-300: #afb8c1;
  --gray-400: #8c959f;
  --gray-500: #6e7781;
  --gray-600: #57606a;
  --gray-700: #424a53;
  --gray-800: #32383f;
  --gray-900: #24292f;

  /* Green */
  --green-50: #edfdf0;
  --green-100: #c5f7d0;
  --green-200: #6fdd8b;
  --green-300: #4ac26b;
  --green-400: #2da44e;
  --green-500: #1a7f37;
  --green-600: #116329;
  --green-700: #044f1e;
  --green-800: #003d16;
  --green-900: #002d11;

  /* Orange */
  --orange-50: #fff6eb;
  --orange-100: #ffe6cc;
  --orange-200: #ffc48c;
  --orange-300: #ffa04d;
  --orange-400: #ff7d26;
  --orange-500: #f75700;
  --orange-600: #d94500;
  --orange-700: #b23000;
  --orange-800: #8c1c00;
  --orange-900: #661100;

  /* Red */
  --red-50: #fff6f5;
  --red-100: #ffe5e4;
  --red-200: #ffbbb9;
  --red-300: #ff8182;
  --red-400: #fa4549;
  --red-500: #e50010;
  --red-600: #cc0a29;
  --red-700: #b20021;
  --red-800: #990024;
  --red-900: #66001b;


  /* =========================================
     2. Alias (役割・意味)
     ※Web実装時は、基本こちらの変数を使用します
     ========================================= */

  /* Divider (区切り線) */
  --divider-high: var(--gray-300);
  --divider-low: var(--gray-100);
  --divider-middle: var(--gray-200);

  /* Info Status */
  --info-background: var(--blue-50);
  --info-divider: var(--blue-300);
  --info-hover: var(--blue-600);
  --info-text: var(--blue-500);

  /* Neutral (ベースカラー) */
  --neutral-0: var(--white);
  --neutral-100: var(--gray-100);
  --neutral-200: var(--gray-200);
  --neutral-300: var(--gray-300);
  --neutral-400: var(--gray-400);
  --neutral-500: var(--gray-500);
  --neutral-600: var(--gray-600);
  --neutral-700: var(--gray-700);
  --neutral-800: var(--gray-800);
  --neutral-900: var(--gray-900);
  --neutral-background: var(--gray-50);

  /* Primary (メインカラー) */
  --primary-background: var(--orange-50);
  --primary-main: var(--orange-500); /* メインボタン等 */
  --primary-100: var(--orange-100);
  --primary-200: var(--orange-200);
  --primary-300: var(--orange-300);
  --primary-400: var(--orange-400);
  --primary-600: var(--orange-600);
  --primary-700: var(--orange-700);
  --primary-800: var(--orange-800);
  --primary-900: var(--orange-900);

  /* Success Status */
  --success-background: var(--green-50);
  --success-divider: var(--green-300);
  --success-text: var(--green-500);

  /* Text & Icons (文字色) */
  --text-icon-high: var(--gray-900);   /* 最も強調する文字 */
  --text-icon-middle: var(--gray-700); /* 通常の本文 */
  --text-icon-low: var(--gray-500);    /* 補足テキスト */
  --text-icon-placeholder: var(--gray-400);
  --text-icon-disabled: var(--gray-200);
  --text-icon-white: var(--white);

  /* Font Weight */
  --fw-light: 300;
  --fw-semibold: 600;

  /* Warning Status */
  --warning-background: var(--red-50);
  --warning-divider: var(--red-300);
  --warning-text: var(--red-500);

  /* =========================================
     3. Typography
     ========================================= */
  --fs-xxs: 1rem;
  --fs-xs: 1.2rem;
  --fs-s: 1.4rem;
  --fs-m: 1.6rem;
  --fs-l: 1.8rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.4rem;

  /* =========================================
     4. Shadow
     ========================================= */
  --shadow-01: 0px 1px 6px 0px rgba(36, 41, 47, 0.05);
  --shadow-02: 0px 3px 12px 0px rgba(36, 41, 47, 0.1);
  --shadow-03: 0px 8px 24px 0px rgba(36, 41, 47, 0.14);
  --shadow-04: 0px 16px 32px 0px rgba(36, 41, 47, 0.16);
  --shadow-05: 0px 20px 32px 0px rgba(36, 41, 47, 0.18);
}