/* =====================================================================
   tokens.css — 自動生成（build-tokens.mjs）。手で編集しない。元データ: tokens.json
   命名: Figma の「コレクション / グループ / 名前」をハイフンでつないだもの
     例) Value / Spacing / Card / Medium → --spacing-card-medium
         Utility Color / Neutral / Text   → --neutral-text
         Common / Value / 16              → --common-value-16（画面から直接使わない）
   ===================================================================== */
:root {
  --common-value-0: 0px;
  --common-value-1: 1px;
  --common-value-2: 2px;
  --common-value-3: 3px;
  --common-value-4: 4px;
  --common-value-6: 6px;
  --common-value-8: 8px;
  --common-value-11: 11px;
  --common-value-12: 12px;
  --common-value-13: 13px;
  --common-value-14: 14px;
  --common-value-16: 16px;
  --common-value-18: 18px;
  --common-value-20: 20px;
  --common-value-22: 22px;
  --common-value-24: 24px;
  --common-value-26: 26px;
  --common-value-32: 32px;
  --common-value-44: 44px;
  --common-value-48: 48px;
  --common-value-64: 64px;
  --common-value-96: 96px;
  --common-value-170: 170px;
  --common-value-270: 270px;
  --common-value-280: 280px;
  --common-value-400: 400px;
  --common-value-420: 420px;
  --common-value-500: 500px;
  --common-value-1200: 1200px;
  --common-value-1280: 1280px;
  --common-value-1512: 1512px;
  --common-value-9999: 9999px;
  --common-string-font-name-japan: Noto Sans JP;
  --common-string-font-name-latin: Roboto;
  --common-string-font-weight-bold: 700;
  --common-string-font-weight-medium: 500;
  --common-string-font-weight-regular: 400;
  --spacing-item-medium: var(--common-value-4);
  --spacing-set-small: var(--common-value-8);
  --spacing-set-medium: var(--common-value-12);
  --spacing-card-medium: var(--common-value-16);
  --spacing-column-medium: var(--common-value-24);
  --spacing-content-medium: var(--common-value-32);
  --spacing-section-medium: var(--common-value-48);
  --spacing-page-medium: var(--common-value-96);
  --spacing-text-letter-spacing-small: 0.5px;
  --spacing-text-paragraph-spacing-xsmall: var(--common-value-4);
  --spacing-text-paragraph-spacing-medium: var(--common-value-8);
  --sizing-font-decoration-h1: var(--common-value-48);
  --sizing-font-decoration-h2: var(--common-value-32);
  --sizing-font-decoration-h3: var(--common-value-24);
  --sizing-font-console-h1: var(--common-value-26);
  --sizing-font-console-h3: var(--common-value-22);
  --sizing-font-console-row: var(--common-value-13);
  --sizing-font-console-meta: var(--common-value-11);
  --sizing-font-normal-h4: var(--common-value-20);
  --sizing-font-normal-h5: var(--common-value-18);
  --sizing-font-normal-h6: var(--common-value-16);
  --sizing-font-normal-p1: var(--common-value-16);
  --sizing-font-normal-p2: var(--common-value-14);
  --sizing-font-normal-p3: var(--common-value-12);
  --sizing-line-height-heading: 1.2;
  --sizing-line-height-body: 1.4;
  --sizing-border-default: var(--common-value-1);
  --sizing-border-secondary: var(--common-value-2);
  --sizing-border-tertiary: var(--common-value-3);
  --sizing-radius-badge: var(--common-value-3);
  --sizing-radius-input: var(--common-value-6);
  --sizing-radius-tab: var(--common-value-6);
  --sizing-radius-button: var(--common-value-6);
  --sizing-radius-image: var(--common-value-8);
  --sizing-radius-card: var(--common-value-8);
  --sizing-radius-column: var(--common-value-12);
  --sizing-radius-tag: var(--common-value-16);
  --sizing-radius-full: var(--common-value-9999);
  --sizing-device-width: var(--common-value-1512);
  --sizing-device-minimum: var(--common-value-1280);
  --sizing-width-content: var(--common-value-1200);
  --sizing-width-form: var(--common-value-500);
  --sizing-width-auth: var(--common-value-400);
  --sizing-component-header: var(--common-value-64);
  --sizing-component-sidebar: var(--common-value-280);
  --sizing-component-control: var(--common-value-44);
  --sizing-component-chip: var(--common-value-22);
  --sizing-component-logo: var(--common-value-22);
  --sizing-icon-small: var(--common-value-18); /* ボタン内 */
  --sizing-icon-medium: var(--common-value-20); /* セクション見出し */
  --sizing-icon-default: var(--common-value-24); /* 既定 */
  --sizing-icon-large: var(--common-value-48); /* 空状態 */
  --sizing-grid-kpi-columns: 4; /* KPI は 4 列固定（auto-fill にしない） */
  --appearance-shadow-overlay: 0 12px 30px rgba(16,24,40,0.22);
  --appearance-shadow-bar: 0 -2px 10px rgba(0,0,0,0.08);
  --animation-duration-fast: 0.2s;
  --animation-duration-standard: 0.25s;
  --animation-easing-standard: ease;
  --column-minimum-content: var(--common-value-420);
  --column-minimum-column: var(--common-value-270);
  --column-minimum-card: var(--common-value-170);
  --navy-light: #E6EAED;
  --navy-tertiary: #62798C; /* 白文字可 4.53 */
  --navy-tertiary-soft: #677F92; /* 旧 secondary.light。白文字不可 */
  --navy-secondary: #1A3F5C;
  --navy-primary: #012A4A;
  --navy-deep: #012242;
  --green-light: #E8F5E9;
  --green-primary: #2E7D32;
  --red-light: #FDECEA;
  --red-primary: #B3261E;
  --red-deep: #8F1E18;
  --amber-light: #FFF4E5;
  --amber-secondary: #C77800; /* 塗り・アイコン用。白文字不可 */
  --amber-primary: #A16100; /* 文字・白文字を載せる面 */
  --blue-primary: #1565C0;
  --opacity-black-4: rgba(0,0,0,0.04);
  --opacity-black-23: rgba(0,0,0,0.23);
  --opacity-black-35: rgba(0,0,0,0.35);
  --opacity-navy-8: rgba(1,42,74,0.08);
  --opacity-navy-12: rgba(1,42,74,0.12);
  --neutral-background: #FFFFFF; /* カード・パネル */
  --neutral-secondary: var(--navy-light);
  --neutral-panel: #F8F9FA; /* サイドバー */
  --neutral-portal: #F0F2F5; /* ポータルのヒーロー */
  --neutral-table-head: #FAFAFA;
  --neutral-annotation: #626A70; /* 補足文字 */
  --neutral-text: #1B1B1B;
  --neutral-disabled: #8D98A0; /* 無効状態（disabled）の文字・プレースホルダー・装飾。それ以外の文字には使わない */
  --neutral-footer: #828282;
  --line-default: #E0E0E0; /* 面の外枠 */
  --line-subtle: #EBEBEB; /* 面の内側 */
  --line-faint: #F2F2F2; /* 行の区切り */
  --line-control: var(--opacity-black-23);
  --line-focus: var(--navy-primary);
  --function-select: var(--navy-primary);
  --function-link: var(--navy-primary);
  --function-link-hover: var(--navy-deep);
  --function-success: var(--green-primary);
  --function-required: var(--red-primary);
  --function-caution: var(--amber-primary);
  --function-warning: var(--amber-secondary);
  --function-info: var(--blue-primary);
  --function-on-color: #FFFFFF; /* 塗りの上の白文字 */
  --base-green: var(--green-light);
  --base-red: var(--red-light);
  --base-orange: var(--amber-light);
  --base-gray: #F0F0F0;
  --base-selected: var(--opacity-navy-8);
  --base-selected-hover: var(--opacity-navy-12);
  --base-hover: var(--opacity-black-4);
  --base-scrim: var(--opacity-black-35);
  --chart-series-1: var(--navy-primary);
  --chart-series-2: var(--navy-tertiary);
  --chart-series-3: var(--blue-primary);
  --chart-series-4: var(--green-primary);
  --chart-series-5: var(--amber-secondary);
  --chart-series-6: var(--red-primary);
  --chart-grid: var(--line-subtle);
  --chart-label: var(--neutral-annotation);
}

/* Accent Color: 給与シミュレーターの内側だけ */
.ss-root {
  --simulator-blue: #2F80ED; /* 塗り・グラフのみ */
  --simulator-blue-strong: #1F6FE0; /* 白文字を載せる青 */
  --simulator-green: #27AE60; /* 塗り・グラフのみ */
  --simulator-green-text: #1D8248;
  --simulator-text: #1B1B1B;
  --simulator-text-light: #6B7280;
  --simulator-text-subtle: #6E7377;
  --simulator-muted: #9AA0A6; /* 装飾のみ */
  --simulator-line: #E6E8EB;
  --simulator-row: #F7F8FA;
  --simulator-head: #EEF2F7;
  --simulator-foot: #F1F5FB;
  --rank-s: #765DF4;
  --rank-a: #1F6FE0;
  --rank-b: #1D8248;
  --rank-c: #F5A623; /* 文字は Text */
  --rank-d: #9AA0A6; /* 文字は Text */
}

/* ---- 互換エイリアス（v2.1 までの名前）。新しいコードでは使わない ---- */
:root {
  --color-primary: var(--function-select);
  --color-primary-hover: var(--function-link-hover);
  --color-secondary: var(--navy-secondary);
  --color-accent: var(--navy-tertiary);
  --surface-page: var(--neutral-secondary);
  --surface-card: var(--neutral-background);
  --surface-panel: var(--neutral-panel);
  --surface-portal: var(--neutral-portal);
  --surface-table-head: var(--neutral-table-head);
  --text-body: var(--neutral-text);
  --text-subtle: var(--neutral-annotation);
  --text-disabled: var(--neutral-disabled);
  --state-success: var(--function-success);
  --state-error: var(--function-required);
  --state-warning: var(--function-warning);
  --state-warning-text: var(--function-caution);
  --state-info: var(--function-info);
  --state-success-surface: var(--base-green);
  --state-error-surface: var(--base-red);
  --state-warning-surface: var(--base-orange);
  --state-neutral-surface: var(--base-gray);
  --state-hover: var(--base-hover);
  --state-selected: var(--base-selected);
  --rule-card: var(--sizing-border-default) solid var(--line-default);
  --rule-divider: var(--sizing-border-default) solid var(--line-subtle);
  --rule-row: var(--sizing-border-default) solid var(--line-faint);
  --rule-control: var(--sizing-border-default) solid var(--line-control);
  --rule-focus: var(--sizing-border-secondary) solid var(--line-focus);
  --rule-selected: var(--sizing-border-tertiary) solid var(--line-focus);
  --font-core: 'Noto Sans JP', Roboto, -apple-system, sans-serif;
  --space-0-5: var(--spacing-item-medium);
  --space-1: var(--spacing-set-small);
  --space-1-5: var(--spacing-set-medium);
  --space-2: var(--spacing-card-medium);
  --space-3: var(--spacing-column-medium);
  --space-4: var(--spacing-content-medium);
  --space-6: var(--spacing-section-medium);
  --space-12: var(--spacing-page-medium);
  --radius-badge: var(--sizing-radius-badge);
  --radius-control: var(--sizing-radius-button);
  --radius-card: var(--sizing-radius-card);
  --radius-card-lg: var(--sizing-radius-column);
  --radius-pill: var(--sizing-radius-tag);
  --radius-round: var(--sizing-radius-full);
  --control-min-height: var(--sizing-component-control);
  --chip-height: var(--sizing-component-chip);
  --content-max-width: var(--sizing-width-content);
  --form-max-width: var(--sizing-width-form);
}