/* =============================================================================
 * HIME BCG Platform — デザイントークン
 * =============================================================================
 * 哲学: 脱アイコン(Unicode記号のみ)、高密度表示、紙ペン基準
 * 色:  桜色+フルール12色
 * 参照: screens/README.md §共通UI要素, Studio設計言語v1.0
 * ============================================================================= */

:root {
  /* ---------------- 基本色 ---------------- */
  --c-bg:         #fafaf8;
  --c-surface:    #ffffff;
  --c-ink:        #1a1a1a;
  --c-ink-sub:    #555;
  --c-ink-faint:  #999;
  --c-line:       #d0d0d0;
  --c-line-faint: #e5e5e5;

  /* 桜色(さくら) — 基本アクセント */
  --c-sakura:       #FFB7C5;
  --c-sakura-dark:  #E896A8;
  --c-sakura-bg:    #FFF0F4;

  /* ---------------- フルール12色 ---------------- */
  /* 青トリオ(技術・インフラ・監査寄り) */
  --c-minato:       #4A90D9;   /* みなと(青) 技術 */
  --c-tsumugi:      #5FBDB0;   /* つむぎ(青緑) インフラ */
  --c-hiyori:       #7EC8E3;   /* ひより(水色) UI */

  /* 紫トリオ(法令・AI寄り) */
  --c-kohaku:       #C4A7D8;   /* こはく(薄紫) AI */
  --c-suzuna:       #9277B0;   /* すずな(紫) 法令 */
  --c-kagari:       #D94A4A;   /* かがり(赤) Shadow/監査 */

  /* 暖色4 */
  --c-soyoka:       #F2A65A;   /* そよか(山吹) HIME OS */
  --c-aoi:          #7AB874;   /* あおい(緑) マーケ */
  --c-shiori:       #A0887A;   /* しおり(褐) 調査 */
  --c-reina:        #D4AF37;   /* れいな(金) 財務 */

  /* 独自 */
  --c-yumeno:       #E8AAB8;   /* ゆめの(桃) 事業・エンタメ */
  --c-sakura-fleur: #FFB7C5;   /* さくら(桜) 総合 */

  /* ---------------- 状態色 ---------------- */
  --c-warn:        #c0392b;
  --c-alert:       #e67e22;
  --c-ok:          #16a085;
  --c-info:        #2980b9;

  /* ---------------- タイポグラフィ ---------------- */
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas,
                 "Noto Sans Mono CJK JP", monospace;
  --font-sans:   system-ui, -apple-system, "Noto Sans CJK JP",
                 "Hiragino Sans", sans-serif;

  /* 高密度表示 — HOKKAIDO SEARCH 準拠 */
  --fs-xs:    10px;
  --fs-sm:    11px;
  --fs-base:  12px;
  --fs-md:    13px;
  --fs-lg:    14px;
  --fs-xl:    16px;
  --fs-xxl:   20px;

  --pad-xs:   2px;
  --pad-sm:   4px;
  --pad-md:   6px;
  --pad-lg:   8px;
  --pad-xl:   12px;

  --line-height: 1.4;

  /* ---------------- レイアウト ---------------- */
  --topbar-h:       44px;
  --workshop-left:  110px;
  --workshop-right: 280px;
  --deck-h:         56px;
  --wire-h:         44px;

  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---------------- アニメーション ---------------- */
  --speed-fast:   120ms;
  --speed-medium: 240ms;

  /* タップターゲット(右クリック不要ドクトリン) */
  --tap-min: 44px;
}

/* ---------------- リセット ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--line-height);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  padding: var(--pad-sm) var(--pad-lg);
  border-radius: var(--radius-sm);
  min-height: 32px;
}
button:hover { background: var(--c-bg); }
button.primary {
  background: var(--c-sakura);
  border-color: var(--c-sakura-dark);
  color: var(--c-ink);
}
button.primary:hover { background: var(--c-sakura-dark); }
button:focus-visible { outline: 2px solid var(--c-sakura-dark); outline-offset: 1px; }

input, select, textarea {
  font: inherit;
  padding: var(--pad-sm) var(--pad-md);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  min-height: 28px;
}
input:focus-visible { outline: 2px solid var(--c-sakura-dark); outline-offset: -1px; border-color: var(--c-sakura-dark); }

/* Unicode-only icon rules: no SVG / no emoji */
.icon { font-family: var(--font-sans); display: inline-block; line-height: 1; }