/* =============================================================================
   鷹山堂（YOZANDO）経営ダッシュボード — Design Tokens
   Goodpatch「Sparkle Design」準拠（3層トークン：Primitive → Semantic → Component）。
   primary だけ鷹山堂のブランド色＝臙脂 #9e3b4f に差し替え（Sparkleの設定ポイント）。
   書体は Sparkle 既定の UD ゴシック（BIZ UDPGothic）。数表・財務データの可読性優先。
   ※ 旧トークン名（--th-*, --fs-*, --bg-* 等）は互換エイリアスとして温存し、
     既存ページのクラスを壊さずにスキンだけ Sparkle へ載せ替える。
   参照: https://sparkle-design.goodpatch.com/guidelines/overview
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=swap');

:root {
  /* ============================================================
     1. PRIMITIVE — 原色（GitHub Primer パレット）
     ============================================================ */
  /* 臙脂スケール = primary（鷹山堂ブランド。Sparkle の青を差し替え） */
  --color-enji-50:  #fbeff1;
  --color-enji-100: #f6dbe0;
  --color-enji-200: #eab8c2;
  --color-enji-300: #d98a9b;
  --color-enji-400: #bd5a70;
  --color-enji-500: #9e3b4f;   /* ブランド基調 */
  --color-enji-600: #843140;
  --color-enji-700: #6a2733;
  --color-enji-800: #511d27;
  --color-enji-900: #3c151c;

  /* Gray / Neutral */
  --color-gray-50:#F6F8FA; --color-gray-100:#EAEEF2; --color-gray-200:#D0D7DE;
  --color-gray-300:#AFB8C1; --color-gray-400:#8C959F; --color-gray-500:#6E7781;
  --color-gray-600:#57606A; --color-gray-700:#424A53; --color-gray-800:#32383F; --color-gray-900:#24292F;

  /* Blue（info） */
  --color-blue-50:#E5F6FF; --color-blue-100:#CEEDFF; --color-blue-300:#61B3FF;
  --color-blue-400:#218BFF; --color-blue-500:#0969DA; --color-blue-600:#0550AE; --color-blue-700:#033D8B;

  /* Green（success） */
  --color-green-50:#EDFDF0; --color-green-100:#C5F7D0; --color-green-400:#2DA44E;
  --color-green-500:#1A7F37; --color-green-600:#116329; --color-green-700:#044F1E;

  /* Yellow（warning） */
  --color-yellow-50:#FFFBE2; --color-yellow-100:#FDEDBA; --color-yellow-300:#F0B800;
  --color-yellow-400:#CC8F00; --color-yellow-500:#9A6700; --color-yellow-600:#7D4E00; --color-yellow-700:#633C01;

  /* Red（negative） */
  --color-red-50:#FFF6F5; --color-red-100:#FFE5E4; --color-red-300:#FF8182;
  --color-red-400:#FA4549; --color-red-500:#CF222E; --color-red-600:#A40E26; --color-red-700:#82071E;

  /* 差し色（データ系列用） */
  --color-orange-400:#E16F24; --color-orange-500:#BC4C00;
  --color-purple-400:#A475F9; --color-purple-500:#8250DF;

  --color-white:#ffffff; --color-black:#000000;
  --color-black-alpha-50:rgba(0,0,0,.05); --color-black-alpha-100:rgba(0,0,0,.10);
  --color-black-alpha-200:rgba(0,0,0,.16);

  /* ============================================================
     2. SEMANTIC — 役割色
     ============================================================ */
  --color-primary-50:var(--color-enji-50);   --color-primary-100:var(--color-enji-100);
  --color-primary-200:var(--color-enji-200); --color-primary-300:var(--color-enji-300);
  --color-primary-400:var(--color-enji-400); --color-primary-500:var(--color-enji-500);
  --color-primary-600:var(--color-enji-600); --color-primary-700:var(--color-enji-700);
  --color-primary-800:var(--color-enji-800); --color-primary-900:var(--color-enji-900);

  --color-success-50:var(--color-green-50);   --color-success-500:var(--color-green-500); --color-success-700:var(--color-green-700);
  --color-warning-50:var(--color-yellow-50);  --color-warning-500:var(--color-yellow-500); --color-warning-700:var(--color-yellow-700);
  --color-negative-50:var(--color-red-50);    --color-negative-500:var(--color-red-500);   --color-negative-700:var(--color-red-700);
  --color-info-50:var(--color-blue-50);       --color-info-500:var(--color-blue-500);      --color-info-700:var(--color-blue-700);

  /* Component-level（テキスト・罫線・面） */
  --color-text-high:        var(--color-gray-900);  /* 主テキスト */
  --color-text-middle:      var(--color-gray-700);  /* 副テキスト */
  --color-text-low:         var(--color-gray-500);  /* 三次テキスト */
  --color-text-disabled:    var(--color-gray-300);
  --color-divider-low:      var(--color-gray-100);  /* 最も淡い罫線 */
  --color-divider-middle:   var(--color-gray-200);  /* 既定の罫線 */
  --color-divider-high:     var(--color-gray-300);  /* 強い罫線 */
  --color-surface:          var(--color-white);     /* カード面 */
  --color-surface-hover:    var(--color-gray-50);
  --color-bg:               var(--color-gray-50);   /* ページ地 */
  --color-ring:             var(--color-enji-500);  /* フォーカスリング（ブランド） */

  /* ============================================================
     3. 互換エイリアス（旧トークン名 → Sparkle 値）
     既存のクラス／JS を壊さずにスキンを載せ替えるための橋渡し
     ============================================================ */
  /* 臙脂系 */
  --th-enji:        var(--color-primary-500);
  --th-enji-deep:   var(--color-primary-600);
  --th-enji-dark:   var(--color-primary-800);
  --th-enji-soft:   var(--color-primary-300);
  --th-enji-pale:   var(--color-primary-200);
  --th-enji-wash:   var(--color-primary-50);
  --th-enji-bg:     var(--color-primary-50);

  /* 面・地 */
  --th-kinari:      var(--color-bg);
  --th-kinari-2:    var(--color-gray-50);
  --th-paper:       var(--color-surface);
  --th-paper-2:     var(--color-gray-50);

  /* テキスト（墨→Primer gray） */
  --th-sumi:        var(--color-text-high);
  --th-sumi-2:      var(--color-text-middle);
  --th-sumi-3:      var(--color-text-low);
  --th-sumi-4:      var(--color-gray-400);

  /* 罫線 */
  --th-line:        var(--color-divider-middle);
  --th-line-soft:   var(--color-divider-low);
  --th-line-strong: var(--color-divider-high);

  /* データ系列・タグ */
  --th-ai:          var(--color-blue-500);
  --th-koke:        var(--color-green-500);
  --th-kincha:      var(--color-orange-500);
  --th-murasaki:    var(--color-purple-500);
  --th-nezu:        var(--color-gray-500);
  --th-cha:         var(--color-orange-400);

  /* 経営信号 */
  --th-good:        var(--color-success-500);
  --th-good-ink:    var(--color-success-700);
  --th-warn:        var(--color-warning-500);
  --th-warn-ink:    var(--color-warning-700);
  --th-risk:        var(--color-negative-500);
  --th-risk-ink:    var(--color-negative-700);
  --th-info:        var(--color-info-500);

  /* セマンティック（旧名・温存） */
  --bg-app:        var(--color-bg);
  --bg-paper:      var(--color-surface);
  --bg-paper-2:    var(--color-gray-50);
  --bg-wash:       var(--color-primary-50);
  --bg-sand:       var(--color-gray-50);

  --text-primary:   var(--color-text-high);
  --text-secondary: var(--color-text-middle);
  --text-tertiary:  var(--color-text-low);
  --text-disabled:  var(--color-text-disabled);
  --text-link:      var(--color-primary-600);
  --text-brand:     var(--color-primary-500);

  --border-subtle:  var(--color-divider-low);
  --border-default: var(--color-divider-middle);
  --border-strong:  var(--color-divider-high);

  /* ============================================================
     4. TYPOGRAPHY — UD ゴシック（Sparkle 既定）
     ============================================================ */
  --font-display: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-body:    "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-num:     "BIZ UDPGothic", "Hiragino Sans", system-ui, sans-serif;
  --font-icon:    "Material Symbols Rounded";

  --fs-display: 30px;
  --fs-h1:      24px;
  --fs-h2:      19px;
  --fs-h3:      16px;
  --fs-h4:      15px;
  --fs-body-lg: 16px;
  --fs-body:    14.5px;
  --fs-sm:      13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  --lh-tight:   1.28;
  --lh-heading: 1.42;
  --lh-body:    1.72;
  --lh-snug:    1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   700;   /* ゴシックは 900 を持たないため bold に寄せる */

  /* ============================================================
     5. SPACING / RADIUS / SHADOW（Sparkle）
     ============================================================ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Sparkle: notice 4 / action 6 / halfModal 8 / modal 12 / round full */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
  --radius-full: 9999px;

  /* Sparkle elevation: raise / sm / float(lg) */
  --shadow-50:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-100: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-200: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.08);

  --container:        1160px;
  --container-narrow: 880px;
  --header-h:         62px;
  --z-header:         100;
  --z-modal:          200;

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .16s;
}

/* 等幅数字（財務・予実の数表で桁を揃える） */
.num, .kpi-now, .kpi-target, [data-num], .table td.num, .fig {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Material Symbols（絵文字を使わずアイコンはこのフォントで） */
.mi {
  font-family: var(--font-icon); font-weight: 400; font-style: normal;
  font-size: 1.15em; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; vertical-align: -0.18em;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.mi.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }