/* ============================================================
   skin.css — デザイントークン(色・角丸・フォント)
   カンプ(mockups/)の :root をそのまま移植。
   色味・角丸などの微調整は後工程でこのファイルの値のみ変更する。
   core.css 側には色・角丸・フォントの生値を書かないこと。
   ============================================================ */
:root{
  /* ブランドカラー
     primary はロゴのグリーン。旧 --cyan(#00A0E9)から全面的に移行した。
     NEW バッジの黄色と、お気に入りのオレンジ(--fav)は対象外。 */
  --yellow:#FFEF3E;
  --yellow-soft:#FFF9C9;
  --brand:#00b480;
  --brand-dark:#009468;
  /* 小さな文字をブランドグリーンで出すとき用。#00b480 は白地で 2.68:1 しかなく
     本文サイズの文字には不足するため、色相を保ったまま暗くして 4.53:1 を確保する。 */
  --brand-ink:#008760;
  /* カード hover や絞り込み中の帯に使う、ごく薄いグリーン */
  --brand-soft:#E6F6EF;
  /* ヒーロー背景のミント。白よりわずかに色を持たせる程度 */
  --brand-tint:#F3FAF7;
  --ink:#1E2933;
  --ink-soft:#5A6672;
  --line:#E8E8E8;
  --bg:#FFFFFF;
  --white:#FFFFFF;
  --black:#000000;
  /* CTA の背景。DOTO JOB の「明るい・活発・若々しい」印象を優先し、ブランドの明るい緑に
     白文字を載せる(白文字で 2.68:1。WCAG AA より見た目を優先した判断)。
     白文字はボタン・バッジなど限られた箇所だけに使い、本文や小さな説明文には使わない。
     hover は大きく暗くせず少しだけ濃くする(影・位置の変化は各ボタン側)。 */
  --cta:var(--brand);
  --cta-hover:#00a877;

  /* 「公開中」「募集中」など、緑系の小さな状態表示。CTA(明るい緑の塗り)と見分けるため
     薄い緑の地に濃い緑の文字にする(4.80:1。小さな文字なのでコントラストは落とさない)。
     審査中=薄い黄、終了=薄いグレーと同じ作り。 */
  --status-ok-bg:var(--brand-soft);
  --status-ok-fg:#007a56;

  /* お気に入り。ブランドカラーとは別系統のまま維持する
     (「保存した」状態を primary CTA と見分けられるようにするため)。
     明るいオレンジに白文字(件数バッジ・押下中のボタン)。hover は少しだけ濃く。 */
  --fav:#ff8a3d;
  --fav-hover:#f57c2c;
  --fav-bg:#fdf4ee;

  /* 汎用アクセント(hover / focus / 件数バッジ)。ブランドカラーに追従する */
  --dj-accent:var(--brand);
  --dj-accent-bg:var(--brand-soft);

  /* 汎用背景・状態色(カンプ内の個別指定色をトークン化) */
  --gray-bg:#F8FAFB;
  --gray-chip:#F4F6F8;
  --placeholder-fg:#9AA5AF;
  --required:#E0245E;

  /* 薄いブルー背景(CMYK 8/0/0/0相当)。1日のスケジュール等のパネル背景に使用 */
  --schedule-bg:#EBFFFF;

  /* シャドウ */
  --shadow-primary:rgba(0,180,128,.28);
  --shadow-card:rgba(30,41,51,.08);

  /* フッター(ライトトーン) */
  --footer-bg:#F0F4F7;
  --footer-text:var(--ink);
  --footer-text-soft:var(--ink-soft);
  --footer-border:rgba(30,41,51,.12);

  /* 角丸 */
  --radius-card:16px;
  --radius-md:12px;
  --radius-lg:24px;
  --radius-pill:100px;

  /* フォント */
  --font-en:"Plus Jakarta Sans",sans-serif;
  --font-jp:"Noto Sans JP",sans-serif;

  /* レイアウト(サイズ寄りだが構造横断で使うためトークン化) */
  --section-pad:clamp(64px,10vw,112px);
  --inner:1120px;

  /* アイコン(SVGデータURI内のfillはCSS変数を参照できないため、色値はここに集約) */
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300b480'/%3E%3C/svg%3E");
}