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

:root {
  /* レイアウト */
  --layout-header-height: 48px;

  /* カラー - ブランドカラー */
  --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: #9d2709;
  --color-brand-red-500: #ef5b36;
  --color-brand-red-base: #ec3a0e;
  --color-brand-red-100: #fbd8cf;
  --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-yellowgreen: #9ea80a;
  --color-category-yellowgreen-l: #f7fadc;
  --color-category-lightgreen: #618e00;
  --color-category-lightgreen-l: #eefbdf;
  --color-category-green: #197a4b;
  --color-category-green-l: #e6f5ec;
  --color-category-turquoise: #008299;
  --color-category-turquoise-l: #e9f7f9;
  --color-category-lightblue: #0066be;
  --color-category-lightblue-l: #f0f9ff;
  --color-category-blue: #002cc2;
  --color-category-blue-l: #ebf7ff;
  --color-category-violet: #5c10be;
  --color-category-violet-l: #f1eafa;
  --color-category-purple: #a300a3;
  --color-category-purple-l: #f3e5f4;
  --color-category-magenta: #b00a79;
  --color-category-magenta-l: #fbeaf5;
  --color-category-pink: #c60c59;
  --color-category-pink-l: #feebf3;
  --color-category-brown: #803b00;
  --color-category-brown-l: #f9efe7;
  --color-category-gray: #56534e;
  --color-category-gray-l: #f0f0ef;

  /* カラー - ニュートラル */
  --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;

  /* カラー - ログ分析チャート（Figma Rectangle 64-68 準拠） */
  --color-analytics-chart-requests: #4bc0c0;
  --color-analytics-chart-requests-fill: #dbf2f2;
  --color-analytics-chart-cost-input: #ffb266;
  --color-analytics-chart-cost-output: #6fcdcd;
  --color-analytics-chart-tokens-input: #ff829d;
  --color-analytics-chart-tokens-output: #5eb5ef;
  --color-analytics-chart-grid: var(--color-neutral-gray-200);
  --color-analytics-chart-text: var(--color-neutral-gray-500);

  /* タイポグラフィ - フォントファミリー */
  --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;
  --radius-full: 999px;

  /* アイコンサイズ */
  --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;

  /*
   * Figma（SDS）変数 — get_variable_defs の値に対応するエイリアス
   * コンポーネントでは既存の --space-* 等を優先し、必要に応じて以下を参照可能
   */
  --sds-size-space-0: var(--space-0);
  --sds-size-space-050: var(--space-50);
  --sds-size-space-100: var(--space-100);
  --sds-size-space-200: var(--space-200);
  --sds-size-space-300: var(--space-300);
  --sds-size-space-400: var(--space-400);
  --sds-size-space-600: var(--space-600);
  --sds-size-space-800: var(--space-800);
  --sds-size-space-1200: var(--space-1200);
  --sds-size-radius-100: var(--radius-100);
  --sds-size-radius-400: var(--radius-400);
  --sds-typography-body-size-medium: var(--typography-body-size-medium);
}