/* =========================================================
   Job Hoppers Lab — Design Tokens
   Cocoon子テーマのstyle.css / assets/*.cssに載せる想定
   ========================================================= */

:root {
  /* -- Palette: Navy（保守的信頼感）-- */
  --jh-navy-900: #14263f;
  --jh-navy-800: #1e3a5f;   /* primary */
  --jh-navy-700: #2a4c74;
  --jh-navy-600: #3d628a;
  --jh-navy-400: #8ea4bd;
  --jh-navy-100: #e5ebf2;
  --jh-navy-050: #f2f5f9;

  /* -- Accent: warm orange（赤より柔らかい行動喚起色）-- */
  --jh-accent-700: #c86a3d;
  --jh-accent-600: #d97a4a;
  --jh-accent-500: #e89060;   /* accent primary */
  --jh-accent-300: #f2b693;
  --jh-accent-100: #fbe8d9;
  --jh-accent-050: #fdf4ec;

  /* -- Neutrals --*/
  --jh-bg: #f7f7f4;           /* off-white, ほんのり暖色 */
  --jh-bg-elevated: #ffffff;
  --jh-bg-sub: #eeeeea;
  --jh-line: #e4e3dd;
  --jh-line-strong: #cfcec8;

  --jh-text: #2a2a2a;
  --jh-text-body: #3a3a3a;
  --jh-text-muted: #6b6b6b;
  --jh-text-light: #8d8d8d;

  /* -- Semantic --*/
  --jh-link: var(--jh-navy-700);
  --jh-link-hover: var(--jh-navy-900);
  --jh-success: #3f8a5c;
  --jh-warning: #c18a2a;

  /* -- Type scale --*/
  --jh-font-sans: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --jh-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --jh-fs-xs: 12px;
  --jh-fs-sm: 13px;
  --jh-fs-base: 16px;
  --jh-fs-md: 17px;
  --jh-fs-lg: 19px;
  --jh-fs-xl: 22px;
  --jh-fs-2xl: 28px;
  --jh-fs-3xl: 36px;
  --jh-fs-4xl: 44px;
  --jh-fs-5xl: 56px;

  --jh-lh-tight: 1.25;
  --jh-lh-snug: 1.45;
  --jh-lh-normal: 1.75;
  --jh-lh-body: 1.9;       /* 記事本文 */

  --jh-fw-regular: 400;
  --jh-fw-medium: 500;
  --jh-fw-bold: 700;

  /* -- Spacing (4-base) --*/
  --jh-s-1: 4px;
  --jh-s-2: 8px;
  --jh-s-3: 12px;
  --jh-s-4: 16px;
  --jh-s-5: 20px;
  --jh-s-6: 24px;
  --jh-s-8: 32px;
  --jh-s-10: 40px;
  --jh-s-12: 48px;
  --jh-s-16: 64px;
  --jh-s-20: 80px;
  --jh-s-24: 96px;

  /* -- Radii --*/
  --jh-r-sm: 4px;
  --jh-r-md: 8px;
  --jh-r-lg: 12px;
  --jh-r-xl: 16px;
  --jh-r-pill: 999px;

  /* -- Elevation （控えめ。アフィ臭回避のため影は弱め） --*/
  --jh-shadow-1: 0 1px 2px rgba(20,38,63,.06), 0 1px 1px rgba(20,38,63,.04);
  --jh-shadow-2: 0 4px 14px rgba(20,38,63,.08);
  --jh-shadow-card: 0 2px 8px rgba(20,38,63,.05);

  /* -- Layout --*/
  --jh-container: 1120px;
  --jh-container-narrow: 720px;  /* 記事本文 */
  --jh-gutter: 24px;

  /* -- Motion --*/
  --jh-ease: cubic-bezier(.4,.2,.2,1);
  --jh-dur: 180ms;
}

/* --- パレット切替用のクラス（Tweaks）--- */
.palette-navy { /* デフォルト（上の:rootと同じ） */ }

.palette-gray {
  --jh-navy-900: #1f2328;
  --jh-navy-800: #2f363d;
  --jh-navy-700: #424a52;
  --jh-navy-600: #596169;
  --jh-navy-400: #9aa0a6;
  --jh-navy-100: #e7e9eb;
  --jh-navy-050: #f3f4f5;
  --jh-accent-700: #a86b3d;
  --jh-accent-600: #ba7a4a;
  --jh-accent-500: #c88a5e;
  --jh-accent-300: #e0b693;
  --jh-accent-100: #f1e2d2;
  --jh-accent-050: #f7efe6;
  --jh-bg: #f4f4f2;
  --jh-bg-sub: #ebebe8;
  --jh-line: #dedddb;
  --jh-link: var(--jh-navy-800);
}

.palette-beige {
  --jh-navy-900: #2a2620;
  --jh-navy-800: #3a332a;
  --jh-navy-700: #4c4338;
  --jh-navy-600: #685c4e;
  --jh-navy-400: #a69a88;
  --jh-navy-100: #ece6db;
  --jh-navy-050: #f5f0e6;
  --jh-accent-700: #a8572f;
  --jh-accent-600: #b86a3f;
  --jh-accent-500: #cc7f55;
  --jh-accent-300: #e3aa87;
  --jh-accent-100: #f3ddc7;
  --jh-accent-050: #faefdd;
  --jh-bg: #f6f1e7;
  --jh-bg-elevated: #fbf7ef;
  --jh-bg-sub: #ece4d3;
  --jh-line: #ded5c1;
  --jh-link: var(--jh-navy-800);
}

/* ---- base reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--jh-font-sans);
  font-size: var(--jh-fs-base);
  line-height: var(--jh-lh-normal);
  color: var(--jh-text-body);
  background: var(--jh-bg);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--jh-link); text-decoration: none; transition: color var(--jh-dur) var(--jh-ease); }
a:hover { color: var(--jh-link-hover); text-decoration: underline; text-underline-offset: 3px; }
h1,h2,h3,h4 { color: var(--jh-text); font-weight: var(--jh-fw-bold); line-height: var(--jh-lh-tight); }
p { margin: 0 0 1em; }

.jh-container { max-width: var(--jh-container); margin: 0 auto; padding: 0 var(--jh-gutter); }
.jh-container-narrow { max-width: var(--jh-container-narrow); margin: 0 auto; padding: 0 var(--jh-gutter); }

/* 汎用ユーティリティ */
.jh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--jh-fs-xs); font-weight: var(--jh-fw-medium);
  letter-spacing: .12em; color: var(--jh-navy-700);
  text-transform: uppercase;
}
.jh-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--jh-navy-700);
}
.jh-muted { color: var(--jh-text-muted); }

/* placeholder image（デザインシステム用の縞SVG代替）*/
.jh-ph {
  display: block;
  background:
    repeating-linear-gradient(135deg, rgba(30,58,95,.04) 0 8px, rgba(30,58,95,.08) 8px 16px),
    var(--jh-navy-050);
  color: var(--jh-navy-700);
  font-family: var(--jh-font-mono);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid var(--jh-line);
  border-radius: var(--jh-r-md);
}