/* ==========================================================================
   YuiOS Theme (brighter tuning) — light/dark/system, accents, reduced motion
   ※ @media をセレクターリストに混在させない／空ルールを作らない
   ========================================================================== */

   :root {
    /* Typography / Radius */
    --font-sans: system-ui, -apple-system, Segoe UI, "Meiryo", Roboto, "Noto Sans JP", Arial, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  
    /* Accent (default: cyan) */
    --accent-50:#ecfeff; --accent-100:#cffafe; --accent-200:#a5f3fc;
    --accent-300:#67e8f9; --accent-400:#22d3ee; --accent-500:#06b6d4;
    --accent-600:#0891b2; --accent-700:#0e7490; --accent-800:#155e75; --accent-900:#164e63;
  
    /* Wallpaper（より薄いブルー系グラデーション） */
    --wallpaper:
      radial-gradient(1200px 800px at 20% 12%, rgba(90,200,255,.12), transparent 70%),
      radial-gradient(1000px 700px at 80% 88%, rgba(120,255,210,.08), transparent 70%),
      linear-gradient(135deg, #f8fbff, #fafcff 45%, #f6faff);
  
    /* Modern Elevation */
    --shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    --shadow-2: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    --shadow-3: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
    --shadow-4: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
    --shadow-floating: 0 25px 50px -12px rgba(0,0,0,.25);
  
    /* Motion durations */
    --dur-fast: 150ms;
    --dur-med: 250ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* フォールバック用のテーマ変数（ライトテーマベース） */
    --bg: #fafcff;
    --bg-elev: #ffffff;
    --fg: #0a1222;
    --muted: #5f6b8a;
    --border: #d2d9ef;
    --glass: rgba(255,255,255,0.95);
    --card: #ffffff;
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
     Light / Dark / System  （明度アップ版）
     ────────────────────────────────────────────────────────────────────────── */
  
  :root[data-theme="light"] {
    /* 以前より 8–10% 明るく */
    --bg: #fafcff;            /* 背景 */
    --bg-elev: #ffffff;       /* ひと段上の背景 */
    --fg: #0a1222;            /* 文字色（濃紺寄りで4.5:1確保） */
    --muted: #5f6b8a;         /* 補助文字 */
    --border: #d2d9ef;        /* 区切り線をやや薄く */
    --glass: rgba(255,255,255,0.95);  /* 透明度を下げて不透明に */
    --card: #ffffff;
  }
  
  :root[data-theme="dark"] {
    /* 「暗すぎ」を回避して 10–12% 明るく */
    --bg: #161c2f;            /* 旧 #0b1020 → 明度アップ */
    --bg-elev: #1b2441;       /* 旧 #12182b */
    --fg: #f3f6ff;            /* 文字はやや明るく */
    --muted: #b6c1e8;
    --border: #2b3560;        /* 区切りを少し見やすく */
    --glass: rgba(27,36,65,0.92);  /* 透明度を下げて不透明に */
    --card: #1e2a4b;
  }
  
  /* OSのカラースキームに追従（system指定時） */
  :root[data-theme="system"] {
    color-scheme: light dark;
    /* デフォルトはライトテーマの値を使用 */
    --bg: #fafcff;
    --bg-elev: #ffffff;
    --fg: #0a1222;
    --muted: #5f6b8a;
    --border: #d2d9ef;
    --glass: rgba(255,255,255,0.95);
    --card: #ffffff;
  }
  
  /* ダークモード時の上書き */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
      --bg: #161c2f;
      --bg-elev: #1b2441;
      --fg: #f3f6ff;
      --muted: #b6c1e8;
      --border: #2b3560;
      --glass: rgba(27,36,65,0.92);
      --card: #1e2a4b;
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
     Accent palettes（デフォルトは cyan。必要色のみ上書き）
     ────────────────────────────────────────────────────────────────────────── */
  :root[data-accent="violet"] { --accent-400:#a78bfa; --accent-500:#8b5cf6; --accent-600:#7c3aed; }
  :root[data-accent="rose"]   { --accent-400:#fb7185; --accent-500:#f43f5e; --accent-600:#e11d48; }
  :root[data-accent="lime"]   { --accent-400:#a3e635; --accent-500:#84cc16; --accent-600:#65a30d; }
  :root[data-accent="orange"] { --accent-400:#fb923c; --accent-500:#f97316; --accent-600:#ea580c; }
  /* cyan は :root の定義を使用 */
  
  /* ──────────────────────────────────────────────────────────────────────────
     Reduced motion（設定とOS設定をそれぞれ個別に適用）
     ────────────────────────────────────────────────────────────────────────── */
  
  /* 設定（設定画面で「動きを減らす」をオンにした場合） */
  :root[data-reduce-motion="true"] * {
    animation: none !important;
    transition: none !important;
  }
  :root[data-reduce-motion="true"] {
    scroll-behavior: auto !important;
  }
  
  /* OS/ブラウザの環境設定に従う場合 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
    :root {
      scroll-behavior: auto !important;
    }
  }