/* =========================================================================
   デザイントークン
   すべての色・角丸・影・タイポグラフィをここで定義する。
   テーマは data-theme="cyber" / "pop" の2種類。
   コンポーネント側はトークンだけを参照し、生の色は書かない。
   ========================================================================= */

:root {
  /* タイポグラフィ */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Roboto Mono", "Menlo",
    "Hiragino Kaku Gothic ProN", monospace;

  /* 文字サイズ（設定で 0.92 / 1 / 1.12 に切り替え） */
  --text-scale: 1;
  --fs-xs: calc(0.75rem * var(--text-scale));
  --fs-sm: calc(0.85rem * var(--text-scale));
  --fs-md: calc(0.95rem * var(--text-scale));
  --fs-lg: calc(1.1rem * var(--text-scale));
  --fs-xl: calc(1.35rem * var(--text-scale));
  --fs-2xl: calc(1.75rem * var(--text-scale));
  --fs-3xl: calc(2.25rem * var(--text-scale));

  /* 余白（8pxグリッド） */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* レイアウト */
  --rail-w: 232px;
  --topbar-h: 64px;
  --content-max: 1120px;

  /* モーション */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* z-index */
  --z-rail: 40;
  --z-topbar: 50;
  --z-modal: 100;
  --z-toast: 120;
}

/* -------------------------------------------------------------------------
   テーマ 1: サイバー（ダーク・高コントラスト・シャープ）
   ------------------------------------------------------------------------- */
[data-theme="cyber"] {
  color-scheme: dark;

  --bg: #080b14;
  --bg-grid: rgba(99, 102, 241, 0.07);
  --surface: #101728;
  --surface-2: #17203a;
  --surface-3: #1e2a4a;
  --surface-hover: #1b2542;
  --border: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.34);

  --text: #eef2ff;
  --text-muted: #a5b0cc;
  --text-subtle: #7f8cae;
  --text-invert: #060910;

  --accent: #22d3ee;
  --accent-2: #6366f1;
  --accent-3: #a855f7;
  --accent-soft: rgba(34, 211, 238, 0.14);
  --accent-border: rgba(34, 211, 238, 0.42);
  --accent-text: #67e8f9;
  --on-accent: #06131a;
  /* 文字がのる面（ボタン等）は白文字・黒文字のコントラストを確保した色を使う */
  --btn-from: #22d3ee;
  --btn-to: #818cf8;

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);

  --code-bg: #0a0f1e;
  --code-text: #d8e2ff;
  --code-border: rgba(99, 102, 241, 0.28);
  --syn-key: #c084fc;
  --syn-str: #6ee7b7;
  --syn-num: #fbbf24;
  --syn-com: #64748b;
  --syn-fn: #67e8f9;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(34, 211, 238, 0.35);
  --glow: 0 0 22px rgba(34, 211, 238, 0.18);

  --art-1: #22d3ee;
  --art-2: #6366f1;
  --art-3: #a855f7;
  --art-surface: rgba(16, 23, 40, 0.9);

  --font-display: var(--font-sans);
  --display-spacing: 0.02em;
  --display-weight: 700;
}

/* -------------------------------------------------------------------------
   テーマ 2: ポップ（ライト・やわらかい・まるい）
   ------------------------------------------------------------------------- */
[data-theme="pop"] {
  color-scheme: light;

  --bg: #fff8f1;
  --bg-grid: rgba(249, 115, 22, 0.06);
  --surface: #ffffff;
  --surface-2: #fff3e6;
  --surface-3: #ffe8d4;
  --surface-hover: #fff1e2;
  --border: rgba(120, 83, 56, 0.16);
  --border-strong: rgba(120, 83, 56, 0.3);

  --text: #3b2a1e;
  --text-muted: #7a6354;
  --text-subtle: #7d6555;
  --text-invert: #ffffff;

  --accent: #f97316;
  --accent-2: #f43f5e;
  --accent-3: #14b8a6;
  --accent-soft: rgba(249, 115, 22, 0.13);
  --accent-border: rgba(249, 115, 22, 0.4);
  --accent-text: #c2410c;
  --on-accent: #ffffff;
  --btn-from: #c2410c;
  --btn-to: #db2777;

  --success: #15803d;
  --success-soft: rgba(21, 128, 61, 0.12);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, 0.12);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, 0.13);
  --info: #0369a1;
  --info-soft: rgba(3, 105, 161, 0.11);

  --code-bg: #2b2118;
  --code-text: #fdf0e3;
  --code-border: rgba(120, 83, 56, 0.3);
  --syn-key: #fca5a5;
  --syn-str: #86efac;
  --syn-num: #fcd34d;
  --syn-com: #a8a29e;
  --syn-fn: #7dd3fc;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(120, 83, 56, 0.12);
  --shadow-2: 0 10px 26px rgba(120, 83, 56, 0.14);
  --shadow-3: 0 22px 46px rgba(120, 83, 56, 0.18);
  --ring: 0 0 0 3px rgba(249, 115, 22, 0.32);
  --glow: 0 8px 20px rgba(249, 115, 22, 0.16);

  --art-1: #f97316;
  --art-2: #f43f5e;
  --art-3: #14b8a6;
  --art-surface: #ffffff;

  --font-display: var(--font-sans);
  --display-spacing: 0.01em;
  --display-weight: 800;
}

/* 文字サイズ設定 */
[data-textsize="sm"] { --text-scale: 0.92; }
[data-textsize="md"] { --text-scale: 1; }
[data-textsize="lg"] { --text-scale: 1.12; }

/* 動きを減らす設定（OS設定・アプリ設定の両方に対応） */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}
[data-motion="off"] { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}