/* static/css/00_variables.css */
/*──────────────────────────────────────────────────────────────
  Design Tokens：色、余白、文字サイズ、角丸など
──────────────────────────────────────────────────────────────*/

:root {
    /* ── テキストカラー ── */
    --color-text-black:       #000000; /* 基本の黒 */
    --color-text-white:       #FFFFFF; /* 白 */
    --color-text-gray:        #949494; /* 灰色（テキスト用） */
    --color-text-pink:        #C02FCB; /* ブランドのマゼンタ */
    --color-text-error:       #EC0000; /* エラー用の赤 */
  
    /* ── アイコンカラー ── */
    --color-icon-black:       var(--color-text-black);
    --color-icon-white:       var(--color-text-white);
    --color-icon-gray:        var(--color-text-gray);
    --color-icon-pink:        var(--color-text-pink);
  
    /* ── チャットバブルカラー ── */
    --color-bubble-my:        var(--color-text-pink);
    --color-bubble-user:      #BFBFBF; /* 他ユーザーの灰色バブル */
  
    /* ── ボタンカラー ── */
    --color-btn-default:      var(--color-text-pink);
    --color-btn-pressed:      #9A26A2; /* 押下時の濃いめマゼンタ */
    --color-btn-disabled:     #F2D5F5; /* 無効時の薄めマゼンタ */
  
    /* ── ボーダーカラー ── */
    --color-border-black:     var(--color-text-black);
    --color-border-white:     var(--color-text-white);
    --color-border-gray:      #767676; /* 濃い灰色 */
    --color-border-gray-weak: #EAEAEA; /* 薄い灰色 */
    --color-border-pink:      var(--color-text-pink);
    --color-border-error:     var(--color-text-error);
  
    /* ── 背景色 ── */
    --color-bg-white:         var(--color-text-white);
  
    /* ── スペーシング（余白） ── */
    --space-xxs: 4px;   /* ごく小さな余白 */
    --space-xs:  8px;   /* 小さめの余白 */
    --space-sm:  16px;  /* 標準的な余白 */
    --space-md:  24px;  /* 少し大きめ */
    --space-lg:  32px;  /* 大きめ */
  
    /* ── フォントサイズ ── */
    --font-size-sm:       14px; /* 小さめテキスト */
    --font-size-base:     16px; /* 通常の本文 */
    --font-size-lg:       18px; /* 少し大きめ */
    --font-size-xl:       20px; /* タイトルなど */
  
    /* ── 行間 ── */
    --line-height-base:   1.6; /* 標準的な行と行の間 */
  
    /* ── 角丸（ボーダー半径） ── */
    --radius-xxs: 4px;   /* 角丸ごく小 */
    --radius-sm:  8px;   /* 少し小さめ */
    --radius-base:12px;  /* 標準 */
    --radius-round:24px; /* 丸みを強め */
  
    /* ── シャドウ（影） ── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.1);
  
    /* ── Z インデックス ── */
    --z-header: 1000;  /* ヘッダー固定用 */
    --z-modal:  1001;  /* モーダル用 */

    /* ── Figmaデザイン用の変数 ── */
    /* ログイン画面専用 */
    --login-screen-width: 393px;
    --login-screen-height: 852px;
    --login-bg-gradient: linear-gradient(180deg, #000000 0%, #C02FCB 100%);
    
    /* ロゴ */
    --logo-width: 165px;
    --logo-height: 202px;
    
    /* ステータスバー */
    --status-bar-height: 47px;
    --status-bar-padding: 11px 16px;
    
    /* 入力フィールド */
    --input-border-radius: 16px;
    --input-padding: 16px;
    --input-min-height: 56px;
    
    /* ボタン */
    --btn-border-radius: 24px;
    --btn-padding: 8px 48px;
    --btn-min-height: 48px;
    
    /* ホームインジケーター */
    --home-indicator-width: 140px;
    --home-indicator-height: 5px;
  }