/**
 * Atlassian Design System Tokens
 * デザイントークンの定義ファイル
 */

:root {
  /* ============================================
     カラートークン - セマンティックカラー
     ============================================ */
  
  /* プライマリカラー（アクション、リンク） */
  --color-primary: #0052CC;        /* Atlassian Blue */
  --color-primary-hover: #0065FF;
  --color-primary-active: #0747A6;

  /* セカンダリカラー（補助的なアクション） */
  --color-secondary: #42526E;     /* Neutral */
  --color-secondary-hover: #505F79;
  --color-secondary-active: #344563;

  /* 成功（緑） */
  --color-success: #00875A;       /* Green */
  --color-success-bg: #E3FCEF;
  --color-success-text: #006644;

  /* 警告（オレンジ） */
  --color-warning: #FF991F;       /* Orange */
  --color-warning-bg: #FFF4E5;
  --color-warning-text: #974F00;

  /* エラー（赤） */
  --color-error: #DE350B;          /* Red */
  --color-error-bg: #FFEBE6;
  --color-error-text: #BF2600;

  /* 情報（青） */
  --color-info: #0052CC;          /* Blue */
  --color-info-bg: #DEEBFF;
  --color-info-text: #0747A6;

  /* ============================================
     カラートークン - ニュートラルカラー
     ============================================ */
  
  /* テキスト */
  --color-text-primary: #172B4D;   /* 主要テキスト */
  --color-text-secondary: #42526E; /* 補助テキスト */
  --color-text-tertiary: #6B778C;  /* 弱いテキスト */
  --color-text-disabled: #A5ADBA;  /* 無効テキスト */

  /* 背景 */
  --color-background-primary: #FFFFFF;     /* メイン背景 */
  --color-background-secondary: #F4F5F7;   /* セカンダリ背景 */
  --color-background-tertiary: #EBECF0;    /* ターシャリ背景 */
  --color-background-overlay: rgba(23, 43, 77, 0.5); /* オーバーレイ */

  /* ボーダー */
  --color-border: #DFE1E6;         /* 通常ボーダー */
  --color-border-focus: #0052CC;  /* フォーカスボーダー */
  --color-border-error: #DE350B;  /* エラーボーダー */

  /* ============================================
     スペーシングシステム（8pxベース）
     ============================================ */
  --spacing-0: 0;
  --spacing-1: 4px;    /* 0.5 * 8px */
  --spacing-2: 8px;    /* 1 * 8px */
  --spacing-3: 12px;   /* 1.5 * 8px */
  --spacing-4: 16px;   /* 2 * 8px */
  --spacing-5: 20px;   /* 2.5 * 8px */
  --spacing-6: 24px;   /* 3 * 8px */
  --spacing-8: 32px;   /* 4 * 8px */
  --spacing-10: 40px;  /* 5 * 8px */
  --spacing-12: 48px;  /* 6 * 8px */
  --spacing-16: 64px;  /* 8 * 8px */
  --spacing-20: 80px;  /* 10 * 8px */

  /* ============================================
     タイポグラフィ
     ============================================ */
  
  /* フォントファミリー */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* フォントサイズと行間 */
  --font-size-h1: 35px;      /* 行間: 40px */
  --font-size-h2: 29px;      /* 行間: 32px */
  --font-size-h3: 24px;      /* 行間: 28px */
  --font-size-h4: 20px;      /* 行間: 24px */
  --font-size-h5: 16px;      /* 行間: 20px */
  --font-size-h6: 14px;      /* 行間: 20px */

  /* 本文 */
  --font-size-body-large: 16px;   /* 行間: 24px */
  --font-size-body: 14px;         /* 行間: 20px */
  --font-size-body-small: 12px;   /* 行間: 16px */

  /* フォントウェイト */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
     エレベーション（シャドウ）
     ============================================ */
  --elevation-0: none;
  --elevation-1: 0 1px 1px rgba(23, 43, 77, 0.1);
  --elevation-2: 0 1px 2px rgba(23, 43, 77, 0.1);
  --elevation-3: 0 2px 4px rgba(23, 43, 77, 0.1);
  --elevation-4: 0 4px 8px rgba(23, 43, 77, 0.1);
  --elevation-5: 0 8px 16px rgba(23, 43, 77, 0.1);

  /* ============================================
     ボーダーラディウス
     ============================================ */
  --border-radius-small: 3px;
  --border-radius-medium: 4px;
  --border-radius-large: 8px;
  --border-radius-xlarge: 12px;
}