/* Hallmark · macrostructure: Workbench (app-shell) · tone: utilitarian · anchor hue: warm(orange)
 * theme: custom — M-CAREER brand · paper oklch(98% .004 95) · accent oklch(66% .21 46) warm · display Zen Kaku Gothic New + body Noto Sans JP
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 * これは求人ご提案書メーカーの共有デザイントークン。色/フォントは必ずこのnamed tokenを参照する。
 */

:root {
  /* --- Paper / ink（地と文字）暖かいオフホワイト × 暖色炭黒 --- */
  --color-paper:      oklch(98.6% 0.006 76);   /* 温かいオフホワイト（クリーム寄り）*/
  --color-paper-2:    oklch(97.2% 0.007 74);   /* カード地 */
  --color-paper-3:    oklch(93.8% 0.009 72);   /* hover / 帯の薄地 */
  --color-ink:        oklch(26% 0.014 55);     /* 本文：暖色寄りの炭黒 */
  --color-ink-2:      oklch(43% 0.012 55);     /* 補助文字 */
  --color-ink-3:      oklch(60% 0.010 58);     /* さらに弱い（キャプション）*/

  /* --- Brand: M-CAREER = 炭黒(ロゴのワードマーク) × オレンジ(シンボル)。ネイビーは不使用 --- */
  --color-navy:       oklch(29% 0.018 52);     /* 構造の濃色（見出し帯・マストヘッド）＝暖色炭黒 */
  --color-navy-deep:  oklch(23% 0.016 50);     /* 濃い方 */
  --color-navy-soft:  oklch(96.4% 0.010 62);   /* 推薦見解ボックスの薄地（暖色グレー）*/
  --color-accent:     oklch(64% 0.205 45);     /* #EA5504 M-CAREERオレンジ */
  --color-accent-ink: oklch(52% 0.185 43);     /* オレンジのリンク文字（AA確保）*/
  --color-accent-soft:oklch(96% 0.032 58);     /* URL枠の薄オレンジ地 */

  /* --- Functional --- */
  --color-alert:      oklch(53% 0.175 28);     /* 機密バッジ・重要注意の赤 */
  --color-alert-soft: oklch(96% 0.028 30);
  --color-ok:         oklch(54% 0.11 150);     /* ◎ の緑（合致度・完了）*/
  --color-line:       oklch(90% 0.008 72);     /* 罫線（暖色）*/
  --color-line-2:     oklch(84% 0.011 68);     /* 濃い罫線 */
  --color-focus:      oklch(38% 0.02 55);      /* フォーカス＝中立の炭黒リング（操作/状態色と非衝突）*/

  /* =========================================================
     役割ベースの意味色（1色 = 1意味。アプリUIはこれだけを使う）
     brand=構造 / action=操作 / info=進行 / ok=完了 / caution=注意
     ※ proposal.css（提案書＝成果物）は別コンテキストなので --color-* を継続使用
     ========================================================= */
  --brand:        var(--color-navy);           /* 暖色炭黒：ブランド・構造。操作/状態には使わない */
  --brand-deep:   var(--color-navy-deep);
  --brand-soft:   oklch(96.4% 0.010 62);
  --brand-ink:    oklch(33% 0.02 52);

  --action:       oklch(64% 0.205 45);         /* オレンジ：主アクション専用（1画面1つ主役）*/
  --action-hover: oklch(59% 0.205 43);
  --action-ink:   oklch(52% 0.185 43);         /* オレンジ文字（AA）*/
  --action-soft:  oklch(96% 0.032 58);

  --info:         oklch(55% 0.075 245);        /* 落ち着いたスレートブルー：進行中・情報 */
  --info-soft:    oklch(95% 0.022 245);
  --ok:           oklch(54% 0.11 150);         /* 緑：完了・達成 */
  --ok-soft:      oklch(95% 0.04 150);
  --caution:      oklch(53% 0.175 28);         /* 赤：注意・機密・エラー */
  --caution-soft: oklch(96% 0.028 30);

  /* --- Type --- */
  --font-display: "Zen Kaku Gothic New", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-body:    "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  --font-num:     "Zen Kaku Gothic New", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.9rem;
  --text-3xl:  2.4rem;

  /* --- 4pt spacing scale --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  /* --- Radius / rule --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --rule-thin: 1px;
  --rule-med:  2px;

  /* --- Motion（3種の名前付きeasing。browser default ease は使わない）--- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-sm: 0 1px 2px oklch(30% 0.02 55 / 0.06), 0 1px 1px oklch(30% 0.02 55 / 0.04);
  --shadow-md: 0 4px 16px oklch(30% 0.02 55 / 0.08), 0 1px 3px oklch(30% 0.02 55 / 0.05);
  --shadow-pop: 0 12px 40px oklch(30% 0.02 55 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 80ms;
  }
}