/* AI Security Recruit Design System v2.0 — tokens.css（ds_tokens.py から生成。手で編集しない） */
:root {
  /* 色 */
  --ink-900: #0b1b26;
  --ink-700: #26324a;
  --ink-500: #4a5970;
  --ink-400: #5a6b85;
  --ink-300: #a5b5d2;
  --line: #e7ebf2;
  --line-soft: #f0f3f8;
  --mist: #f5f7fa;
  --paper: #ffffff;
  --on-fill: #ffffff;
  --teal-50: #f1f8fa;
  --teal-100: #e9f5f8;
  --teal-200: #d6edf2;
  --teal-300: #8fe6ef;
  --teal-400: #4fd6e4;
  --teal-500: #1bb8cc;
  --teal-600: #12a5ba;
  --teal-700: #0e7490;
  --teal-800: #0f4c5c;
  --teal-900: #0b3e4c;
  --green-700: #047857;
  --green-400: #34d399;
  --indigo-600: #4f46e5;
  --indigo-400: #818cf8;
  --aurora-mint: #b9f1df;
  --aurora-cyan: #a6e6ee;
  --aurora-sky: #bbd2ff;
  --aurora-lav: #d9ccf9;
  --risk: #e63946;
  --risk-soft: #fdecee;
  --risk-ink: #b5222e;
  --ok: var(--green-700);
  --fill-key: var(--teal-700);
  /* グラデーション */
  --grad-brand: linear-gradient(120deg, #047857 0%, #0e7490 50%, #4f46e5 100%);
  --grad-hero: linear-gradient(135deg, #0e7490 0%, #0f4c5c 60%, #0b3e4c 100%);
  --grad-dark: linear-gradient(135deg, #0f4c5c 0%, #0b3e4c 100%);
  --grad-pillar-1: linear-gradient(90deg, #1f8497, #1ba3b7);
  --grad-pillar-2: linear-gradient(90deg, #1ba3b7, #27bdce);
  --grad-pillar-3: linear-gradient(90deg, #27bdce, #4fd6e4);
  /* 書体 */
  --font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;
  /* 文字サイズ */
  --fs-display-xxl: clamp(96px, 16vw, 240px);
  --fs-display-xl: clamp(56px, 9.4vw, 142px);
  --fs-display-l: clamp(44px, 6.3vw, 96px);
  --fs-h1: clamp(32px, 3.7vw, 56px);
  --fs-h2: clamp(26px, 2.8vw, 42px);
  --fs-h3: clamp(21px, 1.9vw, 28px);
  --fs-h4: clamp(17px, 1.3vw, 20px);
  --fs-lead: clamp(16px, 1.2vw, 18px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-label: 11px;
  --fs-number: clamp(40px, 4.8vw, 72px);
  /* 行間・字間 */
  --lh-display: 0.9;
  --lh-heading: 1.4;
  --lh-lead: 1.9;
  --lh-body: 2.0;
  --ls-display: 0.01em;
  --ls-heading: 0.06em;
  --ls-label: 0.18em;
  /* 間隔 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 136px;
  /* レイアウト */
  --maxw: 1200px;
  --maxw-text: 40em;
  --gutter: clamp(16px, 4vw, 48px);
  --sp-section: clamp(72px, 9vw, 136px);
  --sp-block: clamp(40px, 4.4vw, 64px);
  --header-h: 74px;
  --pagenav-h: 56px;
  --sp-anchor: 146px;
  --col: 78px;
  /* 角丸 */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  /* 影 */
  --shadow-card: 0 1px 2px rgba(11,27,38,0.04), 0 12px 32px rgba(11,27,38,0.08);
  --shadow-hover: 0 2px 4px rgba(11,27,38,0.05), 0 22px 48px rgba(11,27,38,0.14);
  --shadow-hero: 0 18px 48px rgba(15,76,92,0.28);
  /* モーション */
  --dur-micro: 200ms;
  --dur-reveal: 600ms;
  --dur-count: 1200ms;
  --dur-hero: 1100ms;
  --dur-draw: 1600ms;
  --stagger: 80ms;
  --d1: 0ms;
  --d2: 200ms;
  --d3: 400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-fast: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 400ms;
  --dur-title: 900ms;
  --dur-hero-line: 1000ms;
  --dur-aperture: 1200ms;
  --dur-roll: 1400ms;
  --dur-page-out: 250ms;
  --dur-page-in: 450ms;
  --stagger-line: 90ms;
  --stagger-hero-line: 120ms;
  --parallax-photo: 6%;
  --parallax-photo-sm: 3%;
  --grain-opacity: 0.06;
  --aurora-speed: 0.035;
  --aurora-scale: 1.35;
  --aurora-warp: 0.85;
  --aurora-res: 0.5;
  --aurora-res-sm: 0.35;
  /* 層 */
  --z-header: 100;
  --z-menu: 200;
  --z-progress: 300;
}
/* 暗転セクション：セクション要素に data-ground="dark" を付ける。サイト全体のダークモードは持たない（data-theme はホストのテーマ切り替えと衝突するため使わない） */
[data-ground="dark"], .theme-dark, .dark {
  --ink-900: #ffffff;
  --ink-700: #e6f1f4;
  --ink-500: #bfe9ef;
  --ink-400: #9ed6df;
  --ink-300: #6fb5c2;
  --line: #3a6e7c;
  --line-soft: #2c5f6c;
  --mist: #1d5a68;
  --paper: #0f4c5c;
  --teal-700: #8fe6ef;
  --shadow-card: none;
}
/* 文字スタイル（tokens.json の type.groups と同じ） */
.t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 0.9; font-weight: 500; letter-spacing: 0.01em; }
.t-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: 0.9; font-weight: 500; letter-spacing: 0.01em; }
.t-sec-num { font-family: var(--font-display); font-size: 120px; line-height: 1.0; font-weight: 400; font-style: italic; }
.t-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.3; font-weight: 500; letter-spacing: 0.06em; }
.t-h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.4; font-weight: 500; letter-spacing: 0.06em; }
.t-h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.4; font-weight: 500; letter-spacing: 0.06em; }
.t-nav { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.0; font-weight: 500; letter-spacing: 0.02em; }
.t-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.9; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 2.0; font-weight: 400; }
.t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: 1.6; font-weight: 700; }
.t-button { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.0; font-weight: 500; letter-spacing: 0.04em; }
.t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.8; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.7; font-weight: 400; }
.t-label { font-family: var(--font-ui); font-size: var(--fs-label); line-height: 1.0; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.t-annot { font-family: var(--font-ui); font-size: 11px; line-height: 1.0; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; }
.t-number { font-family: var(--font-ui); font-size: var(--fs-number); line-height: 1.0; font-weight: 300; letter-spacing: -0.01em; }
.t-numdot { font-family: var(--font-ui); font-size: 13px; line-height: 1.0; font-weight: 500; }