/* ==========================================================================
   tokens.css — APPiiS 新卒採用LP デザイントークン
   出典：ART_DIRECTION.md ／ DESIGN_LAWS_DEEP.md 第17-2（変数名は全案件で固定）
   CIカラーは appiis.com/recruit/ の computed style から実測（2026-08-01）。改変しない。
   ========================================================================== */

:root {
  /* ---- 配色（60-30-10：白60 / ネイビー30 / テーマ色10）------------------ */
  --color-bg:      #FFFFFF;   /* ベース 60% */
  --color-surface: #F9F9F9;   /* セクション地 */
  --color-ink:     #0C3664;   /* CI主色ネイビー・見出し・構造線 30% */
  --color-body:    #666666;   /* 本文（対白 5.74:1 ✓AA） */
  --color-muted:   #6B7280;   /* 小さめキャプション（対白 4.83:1 ✓AA） */
  --color-decor:   #8C8F9A;   /* CIサブグレー。装飾・大文字のみ（3.2:1のため小文字禁止） */
  --color-line:    #E5E8ED;   /* 罫線 */
  --color-ink-08:  rgba(12, 54, 100, 0.08);
  --color-ink-16:  rgba(12, 54, 100, 0.16);

  /* セクションテーマ色＝--color-ink の明度のみを動かした5段（他業種色を入れない）
     上限は「白文字を載せて 4.5:1 を満たす明度」で決めている。
     これ以上明るくすると章扉パネルの白文字がAAを割る（実測で 2.64:1 まで落ちた）。
     白地に置く .h-block__en も同じ変数を使うため、両方向で成立する範囲に収めている。 */
  --theme-1: #0C3664;   /* 01 PEOPLE     白文字 16.1:1 ／ 白地 16.1:1 */
  --theme-2: #174B82;   /* 02 WORKPLACE  白文字  8.9:1 */
  --theme-3: #2C6199;   /* 03 CRAFT      白文字  6.4:1 */
  --theme-4: #35699E;   /* 04 NUMBERS    白文字  5.7:1 */
  --theme-5: #3F72A6;   /* 05 A DAY      白文字  5.0:1 */
  --theme: var(--theme-1);          /* 各 .chapter が style="--theme:…" で上書き */

  /* 濃紺の面に載せる時だけ使う明色（band--ink 内のラベル・罫線用） */
  --theme-on-ink: #8FB4D8;   /* 対 #0C3664 で 5.9:1 */

  /* LINE ブランド色。白文字を載せると 2.26:1 でAAを割るため、
     面塗りではなく「白地＋緑の縁と字形」で識別させる（下の .btn--line 参照） */
  --line-green: #06C755;

  /* ---- タイポグラフィ（比率 1.25＝DESIGN_LAWS 第17-1 採用LP裁定）-------- */
  --font-en: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-ja: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
             'Yu Gothic', Meiryo, sans-serif;

  --fs-caption: 0.8rem;      /* 12.8px */
  --fs-small:   0.875rem;    /* 14px */
  --fs-body:    1rem;        /* 16px */
  --fs-lead:    1.25rem;     /* 20px */
  --fs-h3:      1.5625rem;   /* 25px */
  --fs-h2:      1.953rem;    /* 31px */
  --fs-h1:      2.441rem;    /* 39px */
  --fs-display: clamp(2.75rem, 7vw + 0.5rem, 6.5rem);   /* FVのみ流体 */
  --fs-giant:   clamp(9rem, 21vw, 20rem);               /* 左パネルの巨大英字 */

  --lh-body: 1.8;
  --lh-lead: 1.9;
  --lh-head: 1.28;

  --ls-en:  0.02em;    /* 英字ディスプレイは詰める */
  --ls-ja:  0.04em;    /* 和文はわずかに開ける */
  --ls-cap: 0.16em;    /* 小さい英字ラベルは大きく開ける */

  /* ---- 余白（8ptグリッド）---------------------------------------------- */
  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 40px;  --space-6: 48px;  --space-8: 64px;  --space-10: 80px;
  --space-12: 96px; --space-16: 128px;

  /* ---- 形・影 ----------------------------------------------------------- */
  --radius:    16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 12px rgba(12, 54, 100, 0.06);
  --shadow-lift: 0 12px 32px rgba(12, 54, 100, 0.14);

  /* ---- レイアウト -------------------------------------------------------- */
  --panel-w:  40%;      /* 左sticky（Tabio DNA） */
  --rail-w:   72px;     /* 右インデックスレール */
  --flow-pad: clamp(24px, 5vw, 88px);
  --content-max: 68em;  /* 和文は 1em ≒ 1字。ch は使わない（DESIGN_LAWS A項） */

  /* ---- モーション -------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      280ms;
  --dur-slow: 520ms;

  /* ---- z-index ---------------------------------------------------------- */
  --z-rail:   40;
  --z-header: 50;
  --z-cta:    60;
  --z-chat:   70;
  --z-modal:  80;
}

/* 動きを減らす設定の人にはアニメーションを一切かけない（必須・A11y） */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
}