/**
 * variables.css — デザイントークン（色・余白・角丸・影）
 * bar-price-manager のダークテーマ思想を継承しつつ、
 * このアプリ（売上・経営・給与）はエメラルド系アクセントで差別化する。
 * ★色はここが唯一の真実。JS/HTML/他CSSに色値を直書きしない。
 */

:root {
  /* --- 背景 --- */
  --bg-base: #0D0D12;       /* アプリ最下層 */
  --bg-surface: #16161D;    /* カード・パネル */
  --bg-surface-2: #1E1E27;  /* 一段上のパネル・入力欄 */
  --bg-elevated: #24242F;   /* モーダル・ポップ */

  /* --- 文字 --- */
  --text-primary: #F2F4F5;
  --text-secondary: #A9B0B8;
  --text-tertiary: #6B7280;
  --text-on-accent: #05130D;

  /* --- アクセント（このアプリの identity＝お金・分析のエメラルド） --- */
  --accent: #34D399;
  --accent-strong: #10B981;
  --accent-dim: rgba(52, 211, 153, 0.14);

  /* --- 状態色 --- */
  --danger: #FF4D4F;
  --warning: #FBBF24;
  --info: #60A5FA;

  /* --- 罫線 --- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* --- 余白（4pxグリッド） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* --- 角丸 --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- 影 --- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* --- レイアウト --- */
  --header-h: 56px;
  --content-max: 960px;
}