/* ============================================================
   Kanana Studio — ダークモード用トークン（オプトイン・2026-08-19）
   ------------------------------------------------------------
   なぜ tokens.css に直接書かず、別ファイルにしているか。

   tokens.css は tool-style.css から @import されており、ツールページ
   （qr / pdf / exif など）も読んでいる。ところがツールページの
   インライン <style> には配色の固定値が多数残っていて（qr 78個・
   pdf 77個・exif 48個）、トークンだけ暗くすると明暗が混ざって
   読めない画面になる。

   そこで「ページ側が明示的に読み込んだときだけ暗くなる」形にした。
   ツールページの固定値を片付けたら、そのページに次の1行を足す:

     <link rel="stylesheet" href="/assets/dark.css">

   配色は showcase/style.css・articles/article.css のダーク版と同一。
   3ファイルで値がずれると同じサイト内で色が食い違うので、
   変更するときは3つとも直すこと。
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ks-bg:        #1a1917;
    --ks-surface:   #23211d;
    --ks-surface-2: #201e1b;
    --ks-border:    #3c3831;
    --ks-hair:      #33302a;
    --ks-accent:    #5fb5b6;
    --ks-accent-2:  #7cc9ca;
    --ks-soft:      #1f302f;
    --ks-ink:       #ece9e0;
    --ks-muted:     #a9a599;
    --ks-muted-2:   #969286;
    --ks-shadow:    0 4px 20px rgba(0, 0, 0, .40);
    --ks-shadow-2:  0 12px 36px rgba(0, 0, 0, .52);
  }

  /* --- 各ページのインライン <style> に残っている固定値の打ち消し ---
     ページの <style> は <link> より後に来るため、同じ詳細度だとページ側が勝つ。
     :root を前置して詳細度を1段上げてある（!important は使わない）。 */

  /* 白ベタの面。
     2026-09-02: .html-preview と table.plain をここから外した。
     .html-preview は tools/tool-style.css 側で「白い紙＋固定の濃い文字」として
     扱うようにしたので、ここで地だけ暗くすると文字色と食い違う。
     table.plain は現在どのページでも使われていない（対象ゼロのルールだった）。 */
  :root .links a { background: var(--ks-surface); }

  /* --ks-* を経由していない本文色 */
  :root p, :root li { color: var(--ks-ink); }

  /* 半透明の白（暗地では明るくする方向に効くので置き換える） */
  :root nav { background: rgba(35, 33, 29, .88); }

  /* 影 */
  :root .content { box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

  /* アクセントの淡色地は暗地では濃度を上げないと見えない */
  :root .label,
  :root .page-label { border-color: rgba(95, 181, 182, .34); }
  :root .app-list   { border-color: rgba(95, 181, 182, .28); }

  /* --- 個別ページに残っていた固定値 --- */
  /* アクセント地の上の文字 */
  :root .primary-link,
  :root .primary-link:hover { color: #10201f; }

  /* 淡い枠線 */
  :root .badge          { border-color: rgba(95, 181, 182, .34); }
  :root .nav-card:hover { border-color: #4a5550; }

  /* 影（暗地では黒を濃くしないと存在が消える） */
  :root .article-visual { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
  :root section         { box-shadow: 0 4px 20px rgba(0, 0, 0, .40); }
}

/* ダーク時のスキップリンク: アクセントが明るくなるので文字を反転する
   （白のままだと 2.4:1 で不合格。反転して約 7.1:1）*/
@media (prefers-color-scheme: dark) {
  .ks-skip { color: #10201f; }
}