/* ==========================================================================
   variables.css
   サイト全体で使用する色・余白・フォントなどの変数定義
   黒背景 + 青・紫・シアンのアクセントカラーで
   シンプル / 高級感 / 近未来感を表現する
   ========================================================================== */

:root {
    /* ブラウザ標準UI（セレクトの矢印・日付ピッカー・スクロールバー等）を
       ダークテーマに合わせて描画させ、白背景に白文字のような事故を防ぐ */
    color-scheme: dark;

    /* --- 背景・サーフェス --- */
    --color-bg: #05060a;
    --color-bg-soft: #0a0c14;
    --color-surface: #12141d;
    --color-surface-hover: #181b26;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* --- テキスト --- */
    --color-text: #eef0f6;
    --color-text-muted: #9aa0b4;
    --color-text-faint: #666c80;

    /* --- アクセントカラー --- */
    --color-blue: #4c7dff;
    --color-purple: #9b5cff;
    --color-cyan: #2fe6e0;

    --gradient-accent: linear-gradient(120deg, var(--color-blue), var(--color-purple) 55%, var(--color-cyan));
    --gradient-accent-soft: linear-gradient(120deg, rgba(76, 125, 255, 0.15), rgba(155, 92, 255, 0.15) 55%, rgba(47, 230, 224, 0.15));

    /* --- タイポグラフィ --- */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;

    /* --- スペーシング --- */
    --space-1: 0.4rem;
    --space-2: 0.8rem;
    --space-3: 1.2rem;
    --space-4: 1.6rem;
    --space-5: 2.4rem;
    --space-6: 3.2rem;
    --space-7: 4.8rem;
    --space-8: 6.4rem;

    /* --- レイアウト --- */
    --container-width: 1120px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;

    /* --- シャドウ・効果 --- */
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 40px rgba(76, 125, 255, 0.25);

    /* --- モーション --- */
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.5s;
    --duration-slow: 0.9s;

    /* --- z-index --- */
    --z-nav: 100;
    --z-modal: 200;
}