/* variables.css - 学習コンテンツ用カラーパレット定義
 * 読書の森 (tools/rf) のスタイルと整合性を保つ
 */

:root {
    /* ========================================
       ブランドカラー（落ち着いたグレー系）
       ======================================== */
    --color-primary: #4A5568;
    --color-secondary: #718096;

    /* グラデーション */
    --gradient-brand: linear-gradient(135deg, #2c5282 0%, #4a5568 50%, #553c9a 100%);
    --gradient-accent: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);

    /* ========================================
       テキストカラー
       ======================================== */
    --color-text-primary: #2d3748;
    --color-text-secondary: #4a5568;
    --color-text-muted: #718096;
    --color-text-white: #ffffff;
    --color-link: #3182ce;
    --color-link-hover: #2c5282;

    /* ========================================
       背景カラー
       ======================================== */
    --color-bg-base: #ffffff;
    --color-bg-surface: #f7fafc;
    --color-bg-subtle: #edf2f7;
    --color-bg-page: #f0f2f5;
    --color-bg-hover: #e8f0f8;

    /* ========================================
       ボーダー・区切り線
       ======================================== */
    --color-border: #e2e8f0;
    --color-border-dark: #cbd5e0;

    /* ========================================
       シャドウ
       ======================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* ========================================
       セマンティックカラー
       ======================================== */
    --color-success: #c8e6cf;
    --color-success-dark: #6bc799;
    --color-info: #cce0f0;
    --color-info-dark: #6ba8e5;
    --color-warning: #f0e4cc;
    --color-warning-dark: #e8a864;

    /* ========================================
       ヘッダ・フッタ
       ======================================== */
    --color-header-bg: #555050;
    --color-footer-bg: #555050;
    --color-header-text: #ffffff;
    --color-footer-text: #ffffff;

    /* ========================================
       数式・コードブロック
       ======================================== */
    --color-math-bg: #f8f9fa;
    --color-code-bg: #1e1e1e;
    --color-code-text: #d4d4d4;

    /* ========================================
       記事カード
       ======================================== */
    --color-card-bg: #ffffff;
    --color-card-border: #e2e8f0;
    --color-card-hover: #f7fafc;
}

/* ========================================
   ダークモード
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #e0e0e0;
        --color-text-secondary: #b0b0b0;
        --color-text-muted: #888888;
        --color-link: #63b3ed;
        --color-link-hover: #90cdf4;

        --color-bg-base: #1e1e1e;
        --color-bg-surface: #2a2a2a;
        --color-bg-subtle: #333333;
        --color-bg-page: #121212;
        --color-bg-hover: #2d2d2d;

        --color-border: #444444;
        --color-border-dark: #555555;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

        --color-header-bg: #2d3748;
        --color-footer-bg: #2d3748;
        --color-header-text: #ffffff;
        --color-footer-text: #ffffff;

        --color-math-bg: #2a2a2a;
        --color-code-bg: #1e1e1e;

        --color-card-bg: #2a2a2a;
        --color-card-border: #444444;
        --color-card-hover: #333333;
    }
}

[data-theme="dark"] {
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #888888;
    --color-link: #63b3ed;
    --color-link-hover: #90cdf4;

    --color-bg-base: #1e1e1e;
    --color-bg-surface: #2a2a2a;
    --color-bg-subtle: #333333;
    --color-bg-page: #121212;
    --color-bg-hover: #2d2d2d;

    --color-border: #444444;
    --color-border-dark: #555555;

    --color-header-bg: #2d3748;
    --color-footer-bg: #2d3748;
    --color-header-text: #ffffff;
    --color-footer-text: #ffffff;

    --color-math-bg: #2a2a2a;
    --color-card-bg: #2a2a2a;
    --color-card-border: #444444;
    --color-card-hover: #333333;
}

[data-theme="light"] {
    --color-text-primary: #2d3748;
    --color-text-secondary: #4a5568;
    --color-text-muted: #718096;
    --color-link: #3182ce;
    --color-link-hover: #2c5282;

    --color-bg-base: #ffffff;
    --color-bg-surface: #f7fafc;
    --color-bg-subtle: #edf2f7;
    --color-bg-page: #f0f2f5;
    --color-bg-hover: #e8f0f8;

    --color-border: #e2e8f0;
    --color-border-dark: #cbd5e0;

    --color-header-bg: #555050;
    --color-footer-bg: #555050;
    --color-header-text: #ffffff;
    --color-footer-text: #ffffff;

    --color-math-bg: #f8f9fa;
    --color-card-bg: #ffffff;
    --color-card-border: #e2e8f0;
    --color-card-hover: #f7fafc;
}