/* ========================================================
   CHAOS CALL — CSS変数定義
   §1 配色 / §10 SWELL実装方針 に対応
   ======================================================== */

:root {
    /* --- ベースカラー --- */
    --cc-bg: #020708;
    --cc-bg-2: #061316;
    --cc-cyan: #00E5E8;
    --cc-teal: #087F86;
    --cc-white: #F3F7F7;
    --cc-text-muted: #7E9A9D;
    --cc-magenta: #FF176F;
    --cc-purple: #9D5CFF;
    --cc-warning: #FFB000;
    --cc-critical: #FF304F;

    /* --- フォント --- */
    --cc-font-jp: 'Noto Sans JP', sans-serif;
    --cc-font-headline: 'Orbitron', 'Rajdhani', sans-serif;
    --cc-font-ui: 'Rajdhani', 'Noto Sans JP', sans-serif;

    /* --- レイアウト --- */
    --cc-max-width: 1600px;
    --cc-border-radius: 4px;
    --cc-border-width: 1px;

    /* --- グロー効果 --- */
    --cc-glow-cyan: 0 0 12px rgba(0, 229, 232, 0.6);
    --cc-glow-magenta: 0 0 12px rgba(255, 23, 111, 0.6);
    --cc-glow-purple: 0 0 12px rgba(157, 92, 255, 0.6);

    /* --- トランジション --- */
    --cc-transition-fast: 0.2s ease;
    --cc-transition-base: 0.4s ease;
}

/* prefers-reduced-motion対応：アニメーション速度を極小化 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --cc-transition-fast: 0.01ms;
        --cc-transition-base: 0.01ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}