/**
 * CSS Variables - ZeroDX Theme
 * テーマ全体で使用する変数を定義
 */

:root {
    /* カラーパレット - SmartHR designインスピレーション */
    --primary-color: #3981ee;
    --secondary-color: #0b56c0;
    --accent-color: #ffca28;
    --text-color: #303b53;
    --light-bg: #ffffff;
    --alt-bg: #f7f9fc;
    --pale-blue: #ebf3ff;
    --border-color: #e1e6ee;
    --success-color: #00c382;
    --warning-color: #f5a623;
    --danger-color: #e01e5a;

    /* フォント */
    --font-family: 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.9rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.4rem;
    --font-size-xxl: 1.6rem;
    --font-size-xxxl: 2rem;
    --line-height-base: 1.6;

    /* スペーシング */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --spacing-xxxl: 50px;
    --spacing-section: 80px;

    /* コンテナ */
    --container-max-width: 1200px;
    --container-padding: 20px;

    /* ブレークポイント */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    /* ボーダー */
    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --border-radius-lg: 10px;
    --border-radius-xl: 15px;
    --border-radius-round: 50px;

    /* シャドウ */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 25px rgba(0, 0, 0, 0.15);

    /* トランジション */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e0e0e0;
        --light-gray: #2d2d2d;
        --medium-gray: #404040;
        --dark-gray: #b0b0b0;
    }
}