/* ============================================================================
   電子契約システム — Design Token（共通の色・余白・角丸・文字・影）
   ----------------------------------------------------------------------------
   ここが色や余白の「正本」です。画面ごとに個別の色を書かず、必ずこの変数を使います。
   （docs/design.md 10-1 / 台帳 B-33）

   前提
   ・Safari 13 相当で動くこと
       CSS変数（Safari 9.1+）・Grid（10.1+）・position:sticky（13+）は使用可
       flex の gap（14.1+）・:is()・inset・aspect-ratio・clamp() は使わない
   ・外部CDNを使わない（フォントはシステムフォント、アイコンはインラインSVG）
   ============================================================================ */

:root {
  /* ---- 色：土台 ------------------------------------------------------- */
  --c-navy:        #0F172A;   /* 一番濃い文字・見出し */
  --c-sidebar:     #0B172A;   /* サイドバーの背景（完全な黒にはしない） */
  --c-sidebar-2:   #111C2F;   /* サイドバー内の区切り・ホバー */
  --c-sidebar-3:   #1B2942;   /* サイドバーのホバー背景 */

  --c-bg:          #F6F8FB;   /* 画面全体の背景 */
  --c-card:        #FFFFFF;   /* カード・パネルの背景 */
  --c-border:      #E5E7EB;   /* 標準の枠線 */
  --c-border-soft: #EEF1F5;   /* 表の罫線など、さらに薄い線 */

  --c-text:        #111827;   /* 本文 */
  --c-text-sub:    #64748B;   /* 補足・ラベル */
  --c-text-faint:  #94A3B8;   /* さらに弱い文字 */
  --c-text-invert: #FFFFFF;

  /* ---- 色：主色 ------------------------------------------------------- */
  --c-primary:       #2563EB;
  --c-primary-dark:  #1D4ED8;
  --c-primary-darker:#1E40AF;
  --c-primary-soft:  #EFF6FF;  /* 薄いブルー背景 */
  --c-primary-line:  #BFDBFE;

  /* ---- 色：状態（SaaS系の落ち着いたトーン） ---------------------------- */
  --c-success:      #16A34A;
  --c-success-soft: #ECFDF3;
  --c-success-line: #BBF7D0;

  --c-warning:      #B45309;   /* 文字用。#F59E0B は背景が明るすぎるため文字は濃く */
  --c-warning-mid:  #F59E0B;
  --c-warning-soft: #FFF8EB;
  --c-warning-line: #FDE4A8;

  --c-danger:       #DC2626;
  --c-danger-strong:#EF4444;
  --c-danger-soft:  #FEF2F2;
  --c-danger-line:  #FECACA;

  --c-info:         #2563EB;
  --c-info-soft:    #EFF6FF;
  --c-info-line:    #BFDBFE;

  --c-neutral:      #475569;
  --c-neutral-soft: #F1F5F9;
  --c-neutral-line: #D8DEE7;

  /* デモ帯（本番では出さない表示） */
  --c-demo:      #6B2FB3;
  --c-demo-soft: #F5EEFF;
  --c-demo-line: #D9C2F5;

  /* ---- 余白（4の倍数で統一） ------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- 角丸（丸すぎない） --------------------------------------------- */
  --r-sm:   6px;   /* バッジ・小さい入力 */
  --r-md:   8px;   /* ボタン・入力欄 */
  --r-lg:  12px;   /* カード・パネル */
  --r-pill: 999px; /* ステータスバッジ */

  /* ---- 線 -------------------------------------------------------------- */
  --bd:      1px solid var(--c-border);
  --bd-soft: 1px solid var(--c-border-soft);

  /* ---- 影（ごく薄く。強い影は使わない） -------------------------------- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md: 0 4px 12px rgba(16, 24, 40, .08);
  --sh-lg: 0 12px 32px rgba(16, 24, 40, .14);   /* モーダルのみ */

  /* ---- 文字 ------------------------------------------------------------ */
  /* 外部フォントは読み込まない。端末にある日本語フォントを順に使う */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Courier New", monospace;

  --fs-page:    24px;  /* ページタイトル */
  --fs-section: 16px;  /* セクション見出し */
  --fs-body:    14px;  /* 本文 */
  --fs-table:   14px;  /* 表 */
  --fs-sub:     13px;  /* 補足 */
  --fs-tiny:    12px;  /* ラベル・注記 */

  --fw-bold:   700;
  --fw-semi:   600;
  --fw-normal: 400;

  --lh-tight: 1.35;
  --lh-body:  1.7;

  /* ---- 部品の寸法 ------------------------------------------------------ */
  --h-control: 40px;   /* 入力欄・ボタンの標準の高さ */
  --h-control-lg: 44px;
  --h-header: 64px;
  --w-sidebar: 232px;

  /* ---- 動き（控えめに。意味のない動きは付けない） ---------------------- */
  --ease: .16s ease;
}

/* PC ではひとまわり大きく・余白を広く（台帳 B-33） */
@media (min-width: 1024px) {
  :root {
    --fs-page:    28px;
    --fs-section: 18px;
    --fs-body:    15px;
    --fs-table:   14px;
    --fs-sub:     13px;
    --h-control:    42px;
    --h-control-lg: 46px;
    --h-header:     68px;
  }
}