/* ======== CSS変数定義（共通デザインシステム） ======== */

:root {
    /* ======== カラーパレット ======== */
    --main-color: #111111; /* メインの黒 */
    --accent-color: #E60012; /* アクセントの赤 */
    --accent-hover: #C5000F; /* アクセントホバー */
    --light-bg: #fafafa; /* 背景の薄いグレー（少し明るく） */
    --white: #ffffff;
    --dark-text: #1a1a1a; /* より濃いテキスト */
    --light-text: #666666; /* より洗練されたグレー */
    --border-color: #e5e5e5; /* より柔らかいボーダー */
    
    /* ブランドカラー（チームページなどで使用） */
    --brand-purple: #4a148c; /* 濃い紫色 */
    
    /* ======== シャドウシステム ======== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-colored: 0 4px 15px rgba(230, 0, 18, 0.2);
    
    /* ======== トランジション ======== */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    
    /* ======== ボーダー半径 ======== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* ======== フォント設定 ======== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.7;
}