/* assets/css/common.css */
@charset "UTF-8";

:root {
    --primary-color: #1a56db;     /* メインの知的なブルー */
    --primary-hover: #1e40af;
    --bg-color: #f3f4f6;          /* 目に優しい薄いグレーの背景 */
    --surface-color: #ffffff;     /* カード等の背景色（白） */
    --text-main: #1f2937;         /* 濃いグレー（真っ黒は避ける） */
    --text-muted: #6b7280;        /* 補助テキスト */
    --danger-color: #ef4444;      /* エラー・期限切れ */
    --success-color: #10b981;     /* 完了・成功 */
    --border-color: #e5e7eb;
    
    --font-base: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-base);
    -webkit-font-smoothing: antialiased;
}

/* 汎用ボタン */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; font-size: 1rem; font-weight: bold;
    border-radius: 6px; border: none; cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary:disabled { background-color: #9ca3af; cursor: not-allowed; }

/* 汎用インプット */
.input-text {
    width: 100%; padding: 12px;
    border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 1rem; color: var(--text-main);
    background-color: var(--bg-color);
}
.input-text:focus { outline: none; border-color: var(--primary-color); background-color: white; box-shadow: 0 0 0 3px rgba(26,86,219,0.1); }