/* ui-kit から配った写し。ここを直さない（正本 key3media/ui-kit tokens/kit-tokens.css、版 6495e9a） */
/* ===========================================================
   kit-tokens ― 色と形の正本（土台の合意 1回目 A・B、2026-11-05 矢吹さん）
   -----------------------------------------------------------
   ・色の実体（#rrggbb）はこのファイルにだけ書く。アプリの CSS は var(--…) で読むだけ。
   ・名前は中心の約30だけ（A4）。古い別名は legacy-alias.css に分け、全画面を移したら消す。
   ・白と黒は <html data-theme="light|dark">（kit-theme.js が書く）。
   ・Velzon（--vz-*）にも同じ値を渡すので、Velzon の部品もこの色になる。
   ・値を変えたら tools/contrast.js で白黒の読みやすさ（WCAG AA）を測り直す。
   =========================================================== */

/* ---------- 白 ---------- */
:root{
  /* 面（奥から手前へ）。地は少し灰色にして白いカードを浮かせる（A6） */
  --kit-bg:        #f3f6f9;
  --kit-surface:   #ffffff;
  --kit-surface-2: #eef2f6;   /* 一段沈んだ帯・表の見出し・縞 */
  --kit-hover:     #f3f7fc;

  /* 字（濃いほうから） */
  --kit-heading:   #232a37;
  --kit-ink:       #1b202a;
  --kit-ink-2:     #454c58;   /* 少し弱い本文 */
  --kit-muted:     #5a6170;   /* 補足。ここが下限 */
  --kit-placeholder:#6b7487;

  /* 線 */
  --kit-line:        #dfe3e8;
  --kit-line-strong: #c4ccd8;

  /* 主の色は青（A1）。塗りと字で同じ値（白地で 5.4:1） */
  --kit-accent:      #1573ad;
  --kit-accent-text: #1573ad;
  --kit-accent-ink:  #ffffff;   /* 主の色の塗りに乗せる字 */
  --kit-accent-soft: #e8f3fa;

  /* 状態の色（A2）。名前は ok・warn・bad・info の4つ */
  --kit-ok:   #16794f;  --kit-ok-soft:   #e2f4ec;
  --kit-warn: #8a5e00;  --kit-warn-soft: #fdf3d9;  --kit-warn-ink: #6e4c03;  /* フロント画面の #9a6b05 は灰色の地で 4.2:1 しかないので、管理画面の値に寄せた。淡い黄の地に乗せる字は一段濃く */
  --kit-bad:  #b5331f;  --kit-bad-soft:  #fde9e5;
  --kit-info: #0e6f9e;  --kit-info-soft: #e1f3fb;
  /* 承認・差し戻しの塗り。白い字が乗る濃さで、白黒どちらでも同じ */
  --kit-fill-ink: #ffffff;   /* 承認・差し戻しの塗りに乗せる字 */
  --kit-go-fill: #0b7a43;  --kit-go-fill-h: #09663a;
  --kit-ng-fill: #c0392b;  --kit-ng-fill-h: #a93226;

  /* ジャンルの色（A3）。全アプリ共通 */
  --kit-g-movie: #3049a8;  --kit-g-movie-soft: #e3e8fa;
  --kit-g-anime: #a8255a;  --kit-g-anime-soft: #f9e2ec;
  --kit-g-manga: #23703a;  --kit-g-manga-soft: #e0f1e4;
  --kit-g-book:  #8a4f08;  --kit-g-book-soft:  #f7ead6;
  --kit-g-music: #5b3bb8;  --kit-g-music-soft: #ebe5fa;
  --kit-g-art:   #0d6670;  --kit-g-art-soft:   #dcf0f1;
  --kit-g-mix:   #4b5466;  --kit-g-mix-soft:   #e7eaf0;

  /* 形（A5）。角丸は 小4・中6・大10 の3つだけ。情報の箱は小 */
  --kit-r-sm: 4px;
  --kit-r:    6px;
  --kit-r-lg: 10px;
  --kit-panel-r: var(--kit-r-sm);

  --kit-shadow:    0 1px 2px rgba(56, 65, 74, .08);
  --kit-shadow-lg: 0 10px 40px rgba(30, 32, 37, .25);
  --kit-scrim:     rgba(30, 32, 37, .45);
}

/* ---------- 黒（青みのある黒。B5） ---------- */
html[data-theme="dark"]{
  --kit-bg:        #0e141e;
  --kit-surface:   #151d2a;
  --kit-surface-2: #121a26;
  --kit-hover:     #1a2433;

  --kit-heading:   #e3e8ef;
  --kit-ink:       #dfe4ec;
  --kit-ink-2:     #b9c1cf;
  --kit-muted:     #a3acbd;
  --kit-placeholder:#8f98a8;

  --kit-line:        #263142;
  --kit-line-strong: #344155;

  /* 黒地では明るい青。塗りに乗せる字は濃い色にする */
  --kit-accent:      #4fb3ea;
  --kit-accent-text: #6cb8e8;
  --kit-accent-ink:  #0b1a24;
  --kit-accent-soft: rgba(79, 179, 234, .14);

  --kit-ok:   #5fcf9b;  --kit-ok-soft:   rgba(95, 207, 155, .14);
  --kit-warn: #e8c05a;  --kit-warn-soft: rgba(232, 192, 90, .14);  --kit-warn-ink: #f0d58f;
  --kit-bad:  #f0806c;  --kit-bad-soft:  rgba(240, 128, 108, .14);
  --kit-info: #64bce8;  --kit-info-soft: rgba(100, 188, 232, .14);

  --kit-g-movie: #a9b8f5;  --kit-g-movie-soft: #262f4d;
  --kit-g-anime: #f3a3c4;  --kit-g-anime-soft: #42253a;
  --kit-g-manga: #94d6a6;  --kit-g-manga-soft: #1f3a29;
  --kit-g-book:  #ecc184;  --kit-g-book-soft:  #3d311f;
  --kit-g-music: #c6b5f5;  --kit-g-music-soft: #31284d;
  --kit-g-art:   #8fd8de;  --kit-g-art-soft:   #1c3a3d;
  --kit-g-mix:   #cfd6e2;  --kit-g-mix-soft:   #2a303b;

  --kit-shadow:    0 1px 2px rgba(0, 0, 0, .3);
  --kit-shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
  --kit-scrim:     rgba(0, 0, 0, .55);
}

/* ---------- Velzon へ渡す ----------
   両アプリとも部品は Velzon。Velzon の変数をここの値に向けると、Velzon の部品もこの色・字になる。 */
:root, html[data-theme="dark"]{
  --vz-body-bg: var(--kit-bg);
  --vz-secondary-bg: var(--kit-surface);
  --vz-tertiary-bg: var(--kit-surface-2);
  --vz-body-color: var(--kit-ink);
  --vz-heading-color: var(--kit-heading);
  --vz-secondary-color: var(--kit-muted);
  --vz-tertiary-color: var(--kit-muted);
  --vz-border-color: var(--kit-line);
  --vz-input-placeholder-color: var(--kit-placeholder);
  --vz-primary: var(--kit-accent);
  --vz-link-color: var(--kit-accent-text);
  --vz-primary-bg-subtle: var(--kit-accent-soft);
  --vz-success: var(--kit-ok);    --vz-success-bg-subtle: var(--kit-ok-soft);
  --vz-warning: var(--kit-warn);  --vz-warning-bg-subtle: var(--kit-warn-soft);
  --vz-danger:  var(--kit-bad);   --vz-danger-bg-subtle:  var(--kit-bad-soft);
  --vz-info:    var(--kit-info);  --vz-info-bg-subtle:    var(--kit-info-soft);
  --vz-body-font-family: var(--kit-f);
  --vz-font-sans-serif: var(--kit-f);
  --vz-body-font-size: var(--kit-fs);
  --vz-border-radius: var(--kit-r-sm);
}
/* Velzon は rgb の数字も別に持つ（rgba で薄めるとき用）。値は上と同じ色 */
:root{ --vz-primary-rgb: 21, 115, 173; --vz-body-color-rgb: 27, 32, 42; --vz-link-color-rgb: 21, 115, 173;
  --vz-success-rgb: 22, 121, 79; --vz-warning-rgb: 138, 94, 0; --vz-danger-rgb: 181, 51, 31; --vz-info-rgb: 14, 111, 158; }
html[data-theme="dark"]{ --vz-primary-rgb: 79, 179, 234; --vz-body-color-rgb: 223, 228, 236; --vz-link-color-rgb: 108, 184, 232;
  --vz-success-rgb: 95, 207, 155; --vz-warning-rgb: 232, 192, 90; --vz-danger-rgb: 240, 128, 108; --vz-info-rgb: 100, 188, 232; }
/* rgb の数字が上の色と食い違わないことは tools/contrast.js が確かめる */

body{ background:var(--kit-bg); color:var(--kit-ink); font-family:var(--kit-f); font-size:var(--kit-fs); line-height:var(--kit-lh); }