/* ==========================================================================
   Design tokens（Figma: iMpDttduBlLyzgfiXDnHzu から抽出）
   ※ 変数のみ。セレクタにスタイルを書かない
   ========================================================================== */
:root {
  /* ---------- Color: Figma Variables ---------- */
  --color-main: #034392;          /* メイン */
  --color-white: #ffffff;         /* ホワイト */
  --color-accent: #00c331;        /* アクセント */
  --color-text: #1a1a1a;          /* フォント */
  --color-border: #dddddd;        /* ボーダー */

  /* ---------- Color: Figma ローカル値（Variables 未登録） ---------- */
  --color-accent-divider: #009e28;  /* 緑ボタン内の区切り線 */
  --color-sky: #089ffc;             /* フッター見出しの英字 "Entry" */
  --color-navy: #002859;            /* Contents カードの英字（opacity .3 で使用） */
  --color-line: #c3d9e8;            /* 水色背景上の罫線 */
  --color-dot: #b5c7dc;             /* 社員カードの区切りドット */
  --color-line-brand: #06c755;      /* LINE 枠線 */
  --color-bg-light: #e4f4ff;        /* 水色テクスチャのベース色（書き出し画像から採色） */
  --color-deco-kv: #d2dbe4;         /* KV 英字 "IMAS CORPORATION RECRUIT 2028"（opacity .6） */
  --color-deco-contents: #bcdbf0;   /* "Get to Know Imas"（opacity .5） */
  --color-kv-fade-start: rgb(253 253 253 / 0.8); /* KV 上部グラデーション */
  --color-kv-fade-end: rgb(253 253 253 / 0);
  --color-overlay: rgb(255 255 255 / 0.98);      /* SPメニュー背景 */
  --color-bg-gray: #f7f7f7;         /* 下層 数字で見るイマス 等の背景 */
  --color-black: #000000;           /* オフィス動画サムネの下地 */
  --color-main-50: rgb(3 67 146 / 0.5); /* 選考フロー 番号の円線 */
  --color-step-1: #eaf1fa;          /* キャリアステップ 1〜8（淡→濃） */
  --color-step-2: #dcecff;
  --color-step-3: #badaff;
  --color-step-4: #80b6f6;
  --color-step-5: #0455b9;
  --color-step-6: #034392;
  --color-step-7: #002d65;
  --color-step-8: #011a3a;

  /* ---------- Font family ---------- */
  --font-base: 'Montserrat', 'Noto Sans JP', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;

  /* ---------- Font weight（Figma 使用分のみ） ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; /* Montserrat のみ */
  --fw-bold: 700;

  /* ---------- Font size（PC 1440 = max / SP 375 = min で流体化） ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  --fs-17: clamp(0.875rem, 0.805rem + 0.3vw, 1.0625rem);
  --fs-20: clamp(1.0625rem, 0.996rem + 0.282vw, 1.25rem);
  --fs-24: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
  --fs-25: clamp(1.125rem, 0.971rem + 0.657vw, 1.5625rem);
  --fs-28: clamp(1.125rem, 0.905rem + 0.939vw, 1.75rem);
  --fs-32: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
  --fs-40: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
  --fs-48: clamp(1.75rem, 1.31rem + 1.878vw, 3rem);
  --fs-64: clamp(2.25rem, 1.634rem + 2.629vw, 4rem);
  --fs-80: clamp(2.5rem, 1.62rem + 3.756vw, 5rem);
  --fs-86: clamp(2rem, 0.812rem + 5.07vw, 5.375rem);
  --fs-140: clamp(3rem, 0.976rem + 8.638vw, 8.75rem);

  /* ---------- Line height ---------- */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  --lh-loose: 2;
  --lh-deco: 0.8;

  /* ---------- Letter spacing ---------- */
  --ls-heading: 0.05em; /* 64px → 3.2px */
  --ls-label: 0.1em;    /* 16px → 1.6px, 14px → 1.4px */
  --ls-deco: 0.06em;    /* 86px → 5.16px */

  /* ---------- Spacing ---------- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-120: 7.5rem;
  --space-160: 10rem;
  --space-240: 15rem;

  /* ---------- Layout ---------- */
  --container-width: 80rem;                       /* 1280px */
  --container-gutter: clamp(1.25rem, 5.5vw, 5rem); /* 20px〜80px */
  --page-max-width: 90rem;                        /* 1440px */
  --header-offset: 6.375rem;                      /* 追従ヘッダー(top20 + h82) */
  --bp-sp: 768px;                                 /* 参照用（メディアクエリには変数が使えないため直書き） */

  /* ---------- Radius ---------- */
  --radius-xs: 1px;
  --radius-2: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 90px;

  /* ---------- Transition ---------- */
  --duration-fast: 0.3s;
  --duration-fade: 0.6s;
  --duration-marquee: 60s;
  --ease: ease;
  --ease-out: ease-out;

  /* ---------- Z-index ---------- */
  --z-bg: -1;
  --z-base: 1;
  --z-header: 100;
}