/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4
 * 従業員向けマイページ モック — design tokens
 * theme: studied-DNA (source: 参考ツール/01_抽出結果/01_従業員向け_マイページ/画面HTML/srcdoc_02.html)
 * 実画面から抽出した実トークン。固有ブランドは含めない（ダミー化）。
 * diversification: 外部DNA踏襲のため抑止（既存SaaS画面の忠実再構築）
 */
:root {
  /* ---- color: brand / accent ---- */
  --color-primary:        #007bc3;  /* メインの青：リンク・主要ボタン・アクティブ */
  --color-primary-hover:  #22aee5;
  --color-primary-deep:   #285a89;  /* 濃紺：タイムライン・見出しアクセント */
  --color-ai:             #7864dc;  /* AI系機能の紫 */
  --color-ai-deep:        #5a47b8;
  --color-teal:           #45d1c9;  /* 補助のティール */

  /* ---- color: tints / surfaces ---- */
  --color-paper:          #ffffff;  /* カード地 */
  --color-bg:             #f4f7fb;  /* ページ背景 */
  --color-bg-2:           #f1f5f8;
  --color-tint-blue:      #e7f1fd;  /* AIサマリ等の薄青面 */
  --color-tint-violet:    #e6e6fa;  /* AIマッチングの薄紫面 */
  --color-paper-2:        #f8f8f8;  /* 薄いグレー面 */

  /* ---- color: neutrals / borders ---- */
  --color-border:         #dcdcdc;
  --color-border-soft:    #e6e6e6;
  --color-border-strong:  #bfbfbf;
  --color-rule:           #c4c4c4;

  /* ---- color: text ---- */
  --color-ink:            #333333;  /* 主要テキスト */
  --color-ink-2:          #4d4d4d;
  --color-muted:          #627d98;  /* スレート系の補助テキスト */
  --color-muted-2:        #73859f;
  --color-muted-3:        #808cba;

  /* ---- color: feedback ---- */
  --color-danger:         #ed5d5d;
  --color-danger-deep:    #b64747;
  --color-danger-tint:    #fde9e9;
  --color-focus:          #007bc3;

  /* ---- typography ---- */
  --font-base: "Noto Sans JP", "Noto Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, system-ui, sans-serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;   /* 画面の基準 */
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* ---- spacing (4pt) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- radius ---- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;   /* カード */
  --radius-pill: 9999px;

  /* ---- elevation ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-pop:  0 6px 24px rgba(40, 90, 137, .16);

  /* ---- motion ---- */
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-in:  cubic-bezier(.5, 0, .8, .4);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);

  /* ---- layout ---- */
  --topbar-h: 56px;
  --rail-w:   72px;
  --maxw:     1280px;
}