/*
 * 1. Variables & Theme Configuration
 * テーマカラー、サイズ、ダークモード設定などの変数を定義します。
 */
:root {
    /* --- Colors --- */
    /* Primary / Accent */
    --je-accent-color: #149eff88;       /* User Constraint: Accent Color */
    --je-accent-color-solid: #149eff;
    --je-accent-color-hover: #0077cc;

    /* Backgrounds */
    --je-bg-primary: #f8fafc;
    --je-bg-secondary: #ffffff;
    --je-bg-tertiary: #f1f5f9;

    /* Text */
    --je-text-primary: #334155;
    --je-text-secondary: #64748b;
    --je-text-inverted: #ffffff;

    /* Borders */
    --je-border-color: #cbd5e1;

    /* Semantic Colors */
    --je-success-color: #22c55e;
    --je-success-bg: #dcfce7;
    --je-success-text: #15803d;

    --je-danger-color: #ef4444;
    --je-danger-bg: #fee2e2;
    --je-danger-text: #b91c1c;

    --je-info-color: #3b82f6;

    /* --- Spacing & Sizes --- */
    --je-spacing-xs: 4px;
    --je-spacing-sm: 8px;
    --je-spacing-md: 16px;
    --je-spacing-lg: 24px;
    --je-spacing-xl: 32px;

    --je-radius-sm: 4px;
    --je-radius-md: 6px;
    --je-radius-lg: 8px;
    --je-radius-full: 9999px;

    /* --- Shadows --- */
    --je-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --je-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --je-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Dark Mode Overrides */
.dark {
    --je-bg-primary: #0f172a;
    --je-bg-secondary: #1e293b;
    --je-bg-tertiary: #334155;

    --je-text-primary: #f1f5f9;
    --je-text-secondary: #94a3b8;

    --je-border-color: #334155;

    --je-success-bg: #052e16;
    --je-success-text: #4ade80;

    --je-danger-bg: #450a0a;
    --je-danger-text: #f87171;
}