/* ============================================
   デザイントークン - CSS変数定義
   ============================================ */

:root {
  /* カラー - ブランドカラー */
  --color-brand-orange-1000: #321f08;
  --color-brand-orange-700: #a7671b;
  --color-brand-orange-600: #d08121;
  --color-brand-orange-550: #e67409;
  --color-brand-orange-500: #fbac4c;
  --color-brand-orange-200: #fddeb7;
  --color-brand-orange-100: #feebd4;
  --color-brand-red-700: #c92a1f;
  --color-brand-red-500: #ef5b36;
  --color-brand-red-base: #ec3a0e;
  --color-brand-yellow-500: #f3de3e;
  --color-favorite: #f34479;

  /* カラー - カテゴリカラー */
  --color-category-red: #c20000;
  --color-category-red-l: #fdeeee;
  --color-category-orange: #c74700;
  --color-category-orange-l: #ffeee2;
  --color-category-yellow: #a58000;
  --color-category-yellow-l: #fbf5e0;
  --color-category-green: #197a4b;
  --color-category-green-l: #e6f5ec;
  --color-category-lightgreen: #618e00;
  --color-category-lightgreen-l: #eefbdf;
  --color-category-turquoise: #008299;
  --color-category-turquoise-l: #e9f7f9;
  --color-category-blue: #002cc2;
  --color-category-blue-l: #ebf7ff;
  --color-category-lightblue: #0066be;
  --color-category-lightblue-l: #f0f9ff;
  --color-category-purple: #a300a3;
  --color-category-purple-l: #f3e5f4;
  --color-category-violet: #5c10be;
  --color-category-violet-l: #f1eafa;

  /* カラー - ニュートラル */
  --color-neutral-white: #ffffff;
  --color-neutral-gray-100: #f3f2f1;
  --color-neutral-gray-200: #dddbda;
  --color-neutral-gray-300: #b6b3b0;
  --color-neutral-gray-400: #84807a;
  --color-neutral-gray-500: #504d4a;
  --color-neutral-gray-600: #1c1a18;

  /* タイポグラフィ - フォントファミリー */
  --font-family-sans: "Noto Sans JP", sans-serif;

  /* タイポグラフィ - フォントサイズ */
  --typography-heading-size-small: 20px;
  --typography-heading-size-medium: 24px;
  --typography-heading-size-large: 32px;
  --typography-body-size-small: 14px;
  --typography-body-size-medium: 16px;
  --typography-body-size-large: 18px;

  /* タイポグラフィ - フォントウェイト */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* タイポグラフィ - 行間 */
  --line-height-heading: 1.5;
  --line-height-body: 1.7;

  /* タイポグラフィ - レタースペーシング */
  --letter-spacing-heading-small: 0.2px;
  --letter-spacing-heading-base: 0.24px;
  --letter-spacing-body-small: 0.28px;
  --letter-spacing-body-medium: 0.32px;

  /* スペーシング */
  --space-0: 0;
  --space-50: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-1800: 72px;
  --space-2400: 96px;

  /* ボーダー半径 */
  --radius-100: 4px;
  --radius-400: 16px;
  --radius-button: 100px;

  /* アイコンサイズ */
  --icon-size-small: 24px;
  --icon-size-medium: 32px;
  --icon-size-large: 40px;

  /* ブレークポイント */
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 480px;

  /* 点線パターン */
  --dashed-border-dash-length: 8px;
  --dashed-border-gap-length: 4px;
  --dashed-border-stroke-width: 1px;
}