/*
 * TAKI AI STUDIO トンマナ適用（L Harness 管理画面用の上書き）
 *
 * 管理画面は Tailwind v4 ビルドで、色がすべて CSS 変数（--color-*）を経由する。
 * そのため変数を再定義するだけで、個別のクラスに触れずに配色を差し替えられる。
 * 元の LINE グリーン → 会員サイトの深緑（ライト）／エメラルド（ダーク）。
 *
 * 値の出どころは taki-ai-studio の src/styles.css。あちらを変えたらここも合わせる。
 * ダークは html.taki-dark で発動する（会員サイトが iframe の ?theme= で伝える）。
 */

:root {
  /* taki-theme.js がインラインスタイルの LINE グリーンをこの変数に差し替える。
     ライト／ダークで自動的に追従させたいので、緑ランプを参照する形にしている。 */
  --taki-brand: var(--color-green-500);
  --taki-brand-strong: var(--color-green-600);
  --taki-brand-soft: var(--color-green-50);

  /* ブランド: 深緑 #1d5c40 を 500 に置いたランプ */
  --color-green-50: #f1f7f3;
  --color-green-100: #e6f1ea;
  --color-green-200: #cde0d5;
  --color-green-300: #a8c7b6;
  --color-green-400: #5c8b73;
  --color-green-500: #1d5c40;
  --color-green-600: #174c35;
  --color-green-700: #143f2c;
  --color-green-800: #103324;
  --color-green-900: #0b241a;
  --color-green-950: #071710;

  /* emerald も緑系として使われるため同じ系統に寄せる */
  --color-emerald-50: #f1f7f3;
  --color-emerald-100: #e6f1ea;
  --color-emerald-500: #1d5c40;
  --color-emerald-600: #174c35;
  --color-emerald-700: #143f2c;

  /* 面と文字: 会員サイトの canvas/surface/line/ink に対応させる */
  --color-white: #ffffff;
  --color-gray-50: #f4f8f5;
  --color-gray-100: #ecf3ee;
  --color-gray-200: #dde6e0;
  --color-gray-300: #c6d4cc;
  --color-gray-400: #93a399;
  --color-gray-500: #6f8078;
  --color-gray-600: #55655b;
  --color-gray-700: #3d4b43;
  --color-gray-800: #26312b;
  --color-gray-900: #101511;
  --color-gray-950: #0a0f0c;

  /* slate も中立色として散在するので gray に揃える */
  --color-slate-50: #f4f8f5;
  --color-slate-100: #ecf3ee;
  --color-slate-200: #dde6e0;
  --color-slate-300: #c6d4cc;
  --color-slate-400: #93a399;
  --color-slate-500: #6f8078;
  --color-slate-600: #55655b;
  --color-slate-700: #3d4b43;
  --color-slate-800: #26312b;
  --color-slate-900: #101511;
}

/* ダーク: 会員サイトの .dark トークンに対応。
   管理画面側に dark 実装は無いため、同じ変数を反転させて成立させている。
   文字用の緑（text-green-700/800）は暗背景では明るくないと読めないので、
   ランプの上下を意図的に入れ替えている（500 はボタン地色なので白文字が乗る濃さを維持）。 */
html.taki-dark {
  --color-green-50: #16241d;
  --color-green-100: #1b2f25;
  --color-green-200: #24402f;
  --color-green-300: #2f5f47;
  --color-green-400: #34d399;
  --color-green-500: #1f7a55;
  --color-green-600: #1a6a49;
  --color-green-700: #6ee7b7;
  --color-green-800: #a7f3d0;
  --color-green-900: #d1fae5;
  --color-green-950: #ecfdf5;

  --color-emerald-50: #16241d;
  --color-emerald-100: #1b2f25;
  --color-emerald-500: #1f7a55;
  --color-emerald-600: #1a6a49;
  --color-emerald-700: #6ee7b7;

  --color-white: #121a15;
  --color-gray-50: #0c120e;
  --color-gray-100: #16211a;
  --color-gray-200: #223028;
  --color-gray-300: #2b3a32;
  --color-gray-400: #6d7f74;
  --color-gray-500: #93a399;
  --color-gray-600: #a8b7ad;
  --color-gray-700: #c3cec7;
  --color-gray-800: #d9e2dc;
  --color-gray-900: #e9efea;
  --color-gray-950: #f3f7f4;

  --color-slate-50: #0c120e;
  --color-slate-100: #16211a;
  --color-slate-200: #223028;
  --color-slate-300: #2b3a32;
  --color-slate-400: #6d7f74;
  --color-slate-500: #93a399;
  --color-slate-600: #a8b7ad;
  --color-slate-700: #c3cec7;
  --color-slate-800: #d9e2dc;
  --color-slate-900: #e9efea;

  /* 影は暗背景では効かないので、輪郭を締める方向に置き換える */
  --tw-shadow-color: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* body の font-family は HTML の inline style で指定されており、
   通常の指定では勝てないため !important で会員サイト側の既定スタックに合わせる。 */
body {
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji' !important;
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
}

html.taki-dark body {
  background-color: var(--color-gray-50);
}

/*
 * LINE ブランド緑だけは Tailwind の任意値記法（bg-[#06C755]）で書かれており、
 * 変数を経由しないため上の再定義が効かない。該当する 6 ルールを名指しで差し替える。
 * バージョンアップでクラスが増えたら、redeploy-admin.sh の検査が件数の変化で気づく。
 */
.bg-\[\#06C755\] {
  background-color: var(--color-green-500) !important;
}
.hover\:bg-\[\#05b64d\]:hover {
  background-color: var(--color-green-600) !important;
}
.text-\[\#06C755\] {
  color: var(--color-green-500) !important;
}
.border-\[\#06C755\],
.focus\:border-\[\#06C755\]:focus {
  border-color: var(--color-green-500) !important;
}
.bg-\[\#F1FBF5\] {
  background-color: var(--color-green-50) !important;
}

/* ダークでは「緑ベタ塗りの面」は眩しいので、面としては canvas を使い緑は縁取りに回す */
html.taki-dark .bg-\[\#F1FBF5\] {
  background-color: var(--color-gray-100) !important;
}