/* フォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200');
@import url('https://fonts.googleapis.com/css2?family={{FONT_PRO_URL}}:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family={{FONT_MONO_URL}}:wght@400;700&display=swap');

/* Primitive Tokens */
:root {
  /* 色 */
  /* {{COLOR_TOKENS}} */

  /* 角丸変数 */
  --radius-none: 0; /* 0px */
  --radius-xs: 0.125rem; /* 2px */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* タイポグラフィ変数 */
  /* フォントファミリー */
  --font-family-pro: '{{FONT_PRO}}', sans-serif;
  --font-family-mono: '{{FONT_MONO}}', monospace;
  --font-family-icon: 'Material Symbols Rounded';

  /* フォントサイズ */
  --font-size-12: 0.75rem; /* 12px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-32: 2rem; /* 32px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-42: 2.625rem; /* 42px */
  --font-size-48: 3rem; /* 48px */
  --font-size-54: 3.375rem; /* 54px */

  /* 行の高さ */
  --line-height-20: 1.25rem; /* 20px */
  --line-height-24: 1.5rem; /* 24px */
  --line-height-28: 1.75rem; /* 28px */
  --line-height-32: 2rem; /* 32px */
  --line-height-36: 2.25rem; /* 36px */
  --line-height-44: 2.75rem; /* 44px */
  --line-height-48: 3rem; /* 48px */
  --line-height-56: 3.5rem; /* 56px */
  --line-height-64: 4rem; /* 64px */
  --line-height-72: 4.5rem; /* 72px */
  --line-height-84: 5.25rem; /* 84px */
  --line-height-leading-none: 1; /* アイコン用 */

  /* 文字間隔 */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em; /* 2.5% */
  --letter-spacing-wider: 0.05em; /* 5% */
  --letter-spacing-widest: 0.1em; /* 10% */

  /* フォントウェイト */
  --font-weight-char-normal: 400;
  --font-weight-char-bold: 700;
  --font-weight-icon-fill-0: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  --font-weight-icon-fill-1: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;

  /* シャドウ */
  /* Primitive */
  --shadow-none: 0px 0px 0px 0px #000;
  --shadow-2xs: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* セマンティクスのトークン定義 */
@theme inline {
  /* セマンティクスカラー定義 */
  --color-neutral-50: var(--color-gray-50);
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);

  /* プライマリカラーは設定可能 */
  --color-primary-50: var(--color-{{PRIMARY}}-50);
  --color-primary-100: var(--color-{{PRIMARY}}-100);
  --color-primary-200: var(--color-{{PRIMARY}}-200);
  --color-primary-300: var(--color-{{PRIMARY}}-300);
  --color-primary-400: var(--color-{{PRIMARY}}-400);
  --color-primary-500: var(--color-{{PRIMARY}}-500);
  --color-primary-600: var(--color-{{PRIMARY}}-600);
  --color-primary-700: var(--color-{{PRIMARY}}-700);
  --color-primary-800: var(--color-{{PRIMARY}}-800);
  --color-primary-900: var(--color-{{PRIMARY}}-900);

  --color-secondary-50: var(--color-gray-50);
  --color-secondary-100: var(--color-gray-100);
  --color-secondary-200: var(--color-gray-200);
  --color-secondary-300: var(--color-gray-300);
  --color-secondary-400: var(--color-gray-400);
  --color-secondary-500: var(--color-gray-500);
  --color-secondary-600: var(--color-gray-600);
  --color-secondary-700: var(--color-gray-700);
  --color-secondary-800: var(--color-gray-800);
  --color-secondary-900: var(--color-gray-900);

  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);

  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);

  --color-warning-50: var(--color-yellow-50);
  --color-warning-100: var(--color-yellow-100);
  --color-warning-200: var(--color-yellow-200);
  --color-warning-300: var(--color-yellow-300);
  --color-warning-400: var(--color-yellow-400);
  --color-warning-500: var(--color-yellow-500);
  --color-warning-600: var(--color-yellow-600);
  --color-warning-700: var(--color-yellow-700);
  --color-warning-800: var(--color-yellow-800);
  --color-warning-900: var(--color-yellow-900);

  --color-negative-50: var(--color-red-50);
  --color-negative-100: var(--color-red-100);
  --color-negative-200: var(--color-red-200);
  --color-negative-300: var(--color-red-300);
  --color-negative-400: var(--color-red-400);
  --color-negative-500: var(--color-red-500);
  --color-negative-600: var(--color-red-600);
  --color-negative-700: var(--color-red-700);
  --color-negative-800: var(--color-red-800);
  --color-negative-900: var(--color-red-900);

  /* コンポーネントカラー定義 */
  --color-divider-low: var(--color-neutral-100);
  --color-divider-middle: var(--color-neutral-200);
  --color-divider-high: var(--color-neutral-300);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-placeholder: var(--color-neutral-500);
  --color-text-low: var(--color-neutral-500);
  --color-text-middle: var(--color-neutral-700);
  --color-text-high: var(--color-neutral-900);
  --color-skeleton-fill: var(--color-neutral-200);

  /* ベースカラー（base） - gray と同等 */
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);

  /* 角丸 - デフォルト値は設定可能 */
  --radius-divide: var(--radius-none);
  --radius-minimum: var(--radius-xs);
  --radius-notice: var(--radius-sm);
  --radius-action: var(--radius-{{RADIUS}});
  --radius-halfModal: var(--radius-lg);
  --radius-modal: var(--radius-xl);
  --radius-round: var(--radius-full);

  /* シャドウ */
  --shadow-base: var(--shadow-none);
  --shadow-flat: var(--shadow-2xs);
  --shadow-raise: var(--shadow-xs);
  --shadow-stick: var(--shadow-sm);
  --shadow-float: var(--shadow-md);
  --shadow-popout: var(--shadow-lg);
}

/* Figmaのテキストスタイル定義 */
/* NOTE: v4の記法ではないがv3環境で使われても反映できるようにこちらの記法で記述 */
@layer utilities {
  .character-1-regular-pro {
    /* Character テキストスタイル */
    font-family: var(--font-family-pro);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-20);
  }
  .character-1-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-20);
  }
  .character-1-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-20);
  }
  .character-1-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-20);
  }
  .character-2-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-2-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-2-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-2-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-3-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-3-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-3-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-3-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-24);
  }
  .character-4-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-28);
  }
  .character-4-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-32);
  }
  .character-4-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-28);
  }
  .character-4-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-28);
  }
  .character-5-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-28);
  }
  .character-5-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-32);
  }
  .character-5-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-32);
  }
  .character-5-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-32);
  }
  .character-6-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-36);
  }
  .character-6-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-36);
  }
  .character-6-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-36);
  }
  .character-6-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-36);
  }
  .character-7-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-44);
  }
  .character-7-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-44);
  }
  .character-7-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-44);
  }
  .character-7-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-44);
  }
  .character-8-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-48);
  }
  .character-8-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-48);
  }
  .character-8-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-48);
  }
  .character-8-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-48);
  }
  .character-9-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-56);
  }
  .character-9-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-56);
  }
  .character-9-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-56);
  }
  .character-9-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-56);
  }
  .character-10-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-42);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-64);
  }
  .character-10-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-42);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-64);
  }
  .character-10-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-42);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-64);
  }
  .character-10-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-42);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-64);
  }
  .character-11-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-72);
  }
  .character-11-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-72);
  }
  .character-11-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-72);
  }
  .character-11-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-72);
  }
  .character-12-regular-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-54);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-84);
  }
  .character-12-regular-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-54);
    font-weight: var(--font-weight-char-normal);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-84);
  }
  .character-12-bold-pro {
    font-family: var(--font-family-pro);
    font-size: var(--font-size-54);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-84);
  }
  .character-12-bold-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-54);
    font-weight: var(--font-weight-char-bold);
    letter-spacing: var(--letter-spacing-wider);
    line-height: var(--line-height-84);
  }
  .icon-1-fill-0 {
    /* アイコンスタイル */
    font-family: var(--font-family-icon);
    font-size: var(--font-size-12);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-1-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-12);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-2-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-14);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-2-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-14);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-3-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-16);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-3-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-16);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-4-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-18);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-4-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-18);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-5-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-20);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-5-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-20);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-6-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-24);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-6-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-24);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-7-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-28);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-7-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-28);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-8-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-32);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-8-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-32);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-9-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-36);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-9-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-36);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-10-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-42);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-10-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-42);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-11-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-48);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-11-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-48);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-12-fill-0 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-54);
    font-variation-settings: var(--font-weight-icon-fill-0);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
  .icon-12-fill-1 {
    font-family: var(--font-family-icon);
    font-size: var(--font-size-54);
    font-variation-settings: var(--font-weight-icon-fill-1);
    font-display: optional;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-leading-none);
  }
}