/*!
 * aqua.dark.css V1.5.1
 * ダークモード専用スタイルシート
 * aqua.dark.js から分離 — エディタ補完・メンテナンス性向上
 *
 * Copyright (c) 2026 oSsmXun Design, All rights reserved.
 * Please read the project page: https://ossmxun.net/aqua-design
 *
 * 読み込み順: aqua.design.css → aqua.style.css → aqua.color.css → aqua.dark.css → aqua.mobile.css
 */

/* ==========================================================================
   DARK MODE — CSS変数上書き
   ========================================================================== */

:root.aqua-dark {
    /* ネイティブUIパーツ（スクロールバー・フォームコントロール）もダーク化 */
    color-scheme: dark;

    /* ベース背景: 深いネイビー〜ブラック系グラデーション */
    --aqua-grad-1: #0d1117;
    --aqua-grad-2: #161b22;
    --aqua-grad-3: #1f2937;

    /* プライマリカラーをやや明るめに（視認性確保） */
    --aqua-primary: #7aa2f7;
    --aqua-primary-light: #a5c1ff;
    --aqua-primary-dark: #4e70df;

    /* テキスト */
    --aqua-text-secondary: #e2e8f0;
    --aqua-text-muted: rgba(226, 232, 240, 0.55);
    --aqua-text-inverse: #e2e8f0;
    --aqua-text-primary: #c9d1d9;

    /* Glass エフェクト — 暗め・低透明度 */
    --aqua-glass-bg: rgba(22, 27, 34, 0.65);
    --aqua-glass-bg-light: rgba(31, 41, 55, 0.70);
    --aqua-glass-bg-dark: rgba(10, 14, 20, 0.75);
    --aqua-glass-border: rgba(255, 255, 255, 0.12);
    --aqua-glass-border-light: rgba(255, 255, 255, 0.18);
    --aqua-glass-border-dark: rgba(255, 255, 255, 0.08);
    --aqua-glass-shadow-primary: rgba(0, 0, 0, 0.55);
    --aqua-glass-shadow-secondary: rgba(255, 255, 255, 0.06);
    --aqua-glass-after-bg: rgba(255, 255, 255, 0.04);

    /* 影 — 全体的に強め */
    --aqua-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --aqua-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --aqua-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --aqua-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --aqua-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5);
    --aqua-shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   DARK MODE — body 背景
   ========================================================================== */

.aqua-dark.aqua-reset,
.aqua-dark .aqua-reset {
    background: linear-gradient(135deg, #0d1117, #161b22, #1f2937);
}

/* ==========================================================================
   DARK MODE — Glass テキスト影を強く
   ========================================================================== */

.aqua-dark .aqua-glass,
.aqua-dark .aqua-glass * {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.8),
        0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   DARK MODE — フォーム要素
   ========================================================================== */

.aqua-dark .aqua-input,
.aqua-dark .aqua-textarea,
.aqua-dark .aqua-select {
    color: var(--aqua-text-secondary);
}

.aqua-dark .aqua-input::placeholder,
.aqua-dark .aqua-textarea::placeholder {
    color: var(--aqua-text-muted);
}

/* ==========================================================================
   DARK MODE — ナビゲーション
   ========================================================================== */

.aqua-dark .aqua-nav {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   DARK MODE — スライドボタン OFF 状態トラック
   ========================================================================== */

.aqua-dark .aqua-slide-track {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   DARK MODE — ダークトグルボタン アイコン切り替え
   data-aqua-dark-toggle 属性を持つ要素のアイコン表示制御
   ========================================================================== */

/* ライトモード時: 月アイコン表示、太陽アイコン非表示 */
[data-aqua-dark-toggle] .aqua-dark-icon-moon { display: inline; }
[data-aqua-dark-toggle] .aqua-dark-icon-sun  { display: none; }

/* ダークモード時: 太陽アイコン表示、月アイコン非表示 */
.aqua-dark [data-aqua-dark-toggle] .aqua-dark-icon-moon { display: none; }
.aqua-dark [data-aqua-dark-toggle] .aqua-dark-icon-sun  { display: inline; }