/* =========================================================
   言乃葉栞 デザイントークン（公開サイトと管理Dashboardで共有）

   和（藍・墨・生成り・金）× 透明感（frosted）× モダン（余白と字面）
   補助文字はWCAG AA(4.5:1)を満たす濃さを保つこと。
   ========================================================= */

:root {
  color-scheme: light dark;

  /* 面 */
  --bg: #f4f1ea;
  --bg-grad:
    radial-gradient(780px 520px at 92% -10%, color-mix(in srgb, #3a5a86 22%, transparent), transparent 70%),
    radial-gradient(620px 460px at 2% 8%, color-mix(in srgb, #b08a3e 14%, transparent), transparent 72%);
  --panel: #fffdf8;
  --panel-2: #f7f4ec;
  --line: #e3dbca;
  --line-strong: #d4c9b3;

  /* 墨 */
  --text: #1f262d;
  --muted: #58616c;
  --faint: #676159;

  /* 藍 */
  --accent: #3a5a86;
  --accent-strong: #2b466b;
  --accent-soft: #e9eef6;
  --accent-line: #c3d0e4;
  --on-accent: #ffffff;

  /* 金（栞紐） */
  --gold: #b08a3e;
  --gold-soft: #f3e7c9;

  /* 状態 */
  --danger: #a8423a;
  --danger-soft: #fbeae7;
  --danger-line: #eecac4;
  --warning: #8a5f0b;
  --warning-soft: #fbf1d8;
  --ok: #2a6f50;
  --ok-soft: #e6f2ea;

  /* 墨紺（Dashboardのサイドバー） */
  --ink: #1b2230;
  --ink-2: #222c3d;
  --side-bg: #1b2230;
  --side-bg-2: #222c3d;
  --side-text: #eef1f6;
  --side-muted: #9aa6b8;
  --side-line: #313c50;
  --side-item: #cfd7e4;
  --side-active-bg: rgba(122, 158, 214, 0.18);
  --side-active-line: #7ea2d8;

  /* ガラス（枠にだけ使う。本文が乗る面は不透明を保つ） */
  --glass: color-mix(in srgb, #ffffff 62%, transparent);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 20px 44px -26px rgba(24, 32, 45, 0.42);

  --shadow: 0 14px 32px -18px rgba(28, 34, 45, 0.28);
  --shadow-sm: 0 2px 10px -6px rgba(28, 34, 45, 0.22);

  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;

  --font:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e131b;
    --bg-grad:
      radial-gradient(780px 520px at 92% -10%, color-mix(in srgb, #7ea2d8 18%, transparent), transparent 70%),
      radial-gradient(620px 460px at 2% 8%, color-mix(in srgb, #d8b463 10%, transparent), transparent 72%);
    --panel: #161d28;
    --panel-2: #1b2431;
    --line: #28323f;
    --line-strong: #35404f;

    --text: #e9edf3;
    --muted: #9aa6b7;
    --faint: #8b95a4;

    --accent: #7ea2d8;
    --accent-strong: #a3c0ea;
    --accent-soft: #1c2739;
    --accent-line: #33465f;
    --on-accent: #0e131b;

    --gold: #d8b463;
    --gold-soft: #2a2416;

    --danger: #e79187;
    --danger-soft: #2c1f1e;
    --danger-line: #48302c;
    --warning: #dcb264;
    --warning-soft: #2a2314;
    --ok: #6cc9a0;
    --ok-soft: #16261f;

    --ink: #131922;
    --ink-2: #182131;
    --side-bg: #131922;
    --side-bg-2: #182131;
    --side-text: #e7ecf4;
    --side-muted: #94a0b1;
    --side-line: #262f3e;
    --side-item: #bcc6d4;

    --glass: color-mix(in srgb, #1b2431 68%, transparent);
    --glass-line: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.75);

    --shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  }
}