/*
 * デザイントークン（色・文字・角丸・余白）。色はここ以外に書かない。
 *
 * ダーク：旧サイトの配色をそのまま整理したもの（濃紺 #0f172a 基調・アクセント青 #3b82f6）
 * ライト：ブタキングカラー（Pig Pink / Crown Gold / Server Blue / Off-white）
 *   4色はブタキングサイト画像設定資料（Visual Style Guide）とアイコン画像から実測した値。
 *   文字やボタンに使うときは読みやすさ（コントラスト比 4.5 以上）のため、同じ色相で濃くした値を使う
 *
 * テーマの決まり方：<html data-theme="dark|light"> があればそれ、無ければ端末の設定（prefers-color-scheme）
 */

:root {
  /* ブタキングカラー（スタイルガイド実測） */
  --bk-pig-pink: #f0a3aa;
  --bk-crown-gold: #e0b43c;
  --bk-server-blue: #607789;
  --bk-off-white: #f7f5ee;
  --bk-outline: #875551;          /* キャラクターの線の色 */
  /* 文字・ボタン用に濃くした色（白文字・オフホワイト背景でコントラスト比 4.5 以上） */
  --bk-pig-pink-deep: #b8505f;
  --bk-pig-pink-deeper: #a04352;
  --bk-server-blue-deep: #4a6074;

  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --container: 960px;
  /* アプリメニューのアイコンの地（アイコンの絵の地に合わせ、どちらのテーマでも生成り） */
  --c-apps-icon-bg: var(--bk-off-white);
}

/* ダーク（既定） */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0f172a;
  --c-surface: #1e293b;
  --c-surface-2: #273449;
  --c-border: #334155;
  --c-text: #f8fafc;
  --c-text-muted: #94a3b8;
  --c-accent: #3b82f6;
  --c-accent-text: #ffffff;
  --c-accent-hover: #2563eb;
  --c-link: #7cb3ff;
  --c-highlight: #fbbf24;
  --c-ok: #10b981;
  --c-warn: #f59e0b;
  --c-danger: #ef4444;
  --c-ok-bg: rgba(16, 185, 129, .14);
  --c-warn-bg: rgba(245, 158, 11, .14);
  --c-danger-bg: rgba(239, 68, 68, .14);
  --c-info-bg: rgba(59, 130, 246, .14);
  --c-focus: #93c5fd;
  --shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* ライト（ブタキングカラー） */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: var(--bk-off-white);
  --c-surface: #ffffff;
  --c-surface-2: #fbeeee;
  --c-border: #e6d8d3;
  --c-text: #2b1d22;
  --c-text-muted: #7a6670;
  --c-accent: var(--bk-pig-pink-deep);
  --c-accent-text: #ffffff;
  --c-accent-hover: var(--bk-pig-pink-deeper);
  --c-link: var(--bk-server-blue-deep);
  --c-highlight: var(--bk-crown-gold);
  --c-ok: #0f8a5f;
  --c-warn: #a86b00;
  --c-danger: #c53030;
  --c-ok-bg: #e5f6ee;
  --c-warn-bg: #fdf3dc;
  --c-danger-bg: #fde8e8;
  --c-info-bg: #e7eff9;
  --c-focus: var(--bk-server-blue-deep);
  --shadow: 0 6px 20px rgba(135, 85, 81, .12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --c-bg: var(--bk-off-white);
    --c-surface: #ffffff;
    --c-surface-2: #fbeeee;
    --c-border: #e6d8d3;
    --c-text: #2b1d22;
    --c-text-muted: #7a6670;
    --c-accent: var(--bk-pig-pink-deep);
    --c-accent-text: #ffffff;
    --c-accent-hover: var(--bk-pig-pink-deeper);
    --c-link: var(--bk-server-blue-deep);
    --c-highlight: var(--bk-crown-gold);
    --c-ok: #0f8a5f;
    --c-warn: #a86b00;
    --c-danger: #c53030;
    --c-ok-bg: #e5f6ee;
    --c-warn-bg: #fdf3dc;
    --c-danger-bg: #fde8e8;
    --c-info-bg: #e7eff9;
    --c-focus: var(--bk-server-blue-deep);
    --shadow: 0 6px 20px rgba(135, 85, 81, .12);
  }
}