/*
  ICBN Design Tokens (CSS Custom Properties)
  ----------------------------------------------
  全HTMLファイル共通のデザイントークン。
  色・余白・タイポ・ヒーロー高さ・エフェクトを集中管理する。
  HTMLファイル側は <link rel="stylesheet" href="design-tokens.css"> で読み込む。
*/

:root {
  /* ===== Brand Colors (raw palette, 7色+ブランド ===== */
  --color-icbn-red:    #EE2D2B;
  --color-icbn-green:  #33914D;
  --color-icbn-purple: #932A63;
  --color-icbn-blue:   #2172B2;
  --color-icbn-orange: #F78C3B;
  --color-icbn-yellow: #ECE94D;
  --color-icbn-teal:   #5DC1AE;
  --color-icbn-coral:  #F4766C;

  /* 旧 `--c-*` 互換エイリアス（既存HTMLが参照している場合のため） */
  --c-red:    var(--color-icbn-red);
  --c-green:  var(--color-icbn-green);
  --c-purple: var(--color-icbn-purple);
  --c-blue:   var(--color-icbn-blue);
  --c-orange: var(--color-icbn-orange);
  --c-yellow: var(--color-icbn-yellow);

  /* ===== Semantic Color Roles ===== */
  /* CTA: coralを第一ボタン色として全ページで統一する（Phase1 合意-2） */
  --color-cta-primary:         var(--color-icbn-coral);
  --color-cta-primary-hover:   #e05c52; /* coral -10% */
  --color-cta-secondary:       var(--color-icbn-teal);
  --color-cta-secondary-hover: #4ba796; /* teal -10% */

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;
  --color-text-inverse:   #ffffff;

  /* Background */
  --color-bg-primary:  #ffffff;
  --color-bg-alt:      #f9fafb;  /* section交互用 */
  --color-bg-muted:    #f3f4f6;
  --color-footer-bg:   #1e2a38;

  /* Border */
  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-border-default: rgba(0, 0, 0, 0.1);

  /* ===== Typography ===== */
  --font-eng: 'Montserrat', sans-serif;
  --font-jp:  '"Noto Sans JP"', sans-serif;

  /* Fluid type scale */
  --text-fluid-h1: clamp(2rem, 5vw + 1rem, 4.5rem);
  --text-fluid-h2: clamp(2rem, 4vw + 0.5rem, 3rem);
  --text-fluid-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem);

  /* Hero h1 専用（index.html ヒーローのみ、whitespace-nowrap 制約あり） */
  --text-fluid-hero: clamp(1.9rem, 8vw, 4.5rem);

  /* Tracking */
  --tracking-eyebrow: 0.2em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;

  /* H1 halo drop-shadow（全ページ共通、Phase2） */
  --drop-shadow-h1: drop-shadow(0 0 40px rgba(255, 255, 255, 1));

  /* ===== Hero min-heights (3 tiers, Phase2) ===== */
  --hero-min-hero:    100vh;   /* トップヒーロー */
  --hero-min-feature: 70vh;    /* メインsubpage（about/activities/members/news/recruit/sponsors/sponsorship/faq/join-*/win-pro） */
  --hero-min-compact: 50vh;    /* ユーティリティ（contact/privacy/thanks） */

  /* ===== Section spacing (3 tiers, Phase2) ===== */
  --section-py-sm: 4rem;   /* py-16 */
  --section-py-md: 6rem;   /* py-24 */
  --section-py-lg: 8rem;   /* py-32 */

  /* ===== Container widths (3 tiers, Phase2) ===== */
  --container-large:    80rem;  /* max-w-7xl */
  --container-standard: 64rem;  /* max-w-5xl */
  --container-narrow:   48rem;  /* max-w-3xl */

  /* ===== Radii ===== */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-full: 9999px;

  /* ===== Shadow ===== */
  --shadow-card-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-card-lg: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* ===== Motion ===== */
  --transition-fast:    0.15s ease;
  --transition-default: 0.3s ease;
  --transition-slow:    0.6s ease;

  /* ===== Z-index ===== */
  --z-network-bg: 0;
  --z-content:    1;
  --z-header:    50;
  --z-modal:    100;

  /* ===== Typography C: 和文セリフ（限定使用） ===== */
  --font-jp-serif: '"Noto Serif JP"', serif;
}

/* ===== Base body tokens ===== */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* ===== Selection color (Phase2 全ページ統一) ===== */
::selection {
  background-color: var(--color-cta-primary);
  color: var(--color-text-inverse);
}

/* ===== Text wrap (改行均等化) ===== */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ===== Shared utility classes ===== */
.text-fluid-h1 {
  font-size: var(--text-fluid-h1);
  line-height: 1.1;
}
.text-fluid-hero {
  font-size: var(--text-fluid-hero);
  line-height: 1.1;
}
.text-fluid-h2 {
  font-size: var(--text-fluid-h2);
  line-height: 1.15;
}
.text-fluid-h3 {
  font-size: var(--text-fluid-h3);
  line-height: 1.2;
}

.font-jp-serif {
  font-family: var(--font-jp-serif);
}

/* ===== Phase4 写真/ロゴ代替トーン ===== */
.tone-teal-primary {
  background: linear-gradient(135deg,
    rgba(93, 193, 174, 0.20) 0%,
    rgba(244, 118, 108, 0.10) 50%,
    rgba(147, 42, 99, 0.15) 100%);
}
.tone-neutral {
  background: linear-gradient(135deg,
    rgba(229, 231, 235, 0.8) 0%,
    rgba(249, 250, 251, 0.9) 100%);
}
.tone-warm {
  background: linear-gradient(135deg,
    rgba(247, 140, 59, 0.15) 0%,
    rgba(244, 118, 108, 0.10) 50%,
    rgba(236, 233, 77, 0.15) 100%);
}
.tone-cool {
  background: linear-gradient(135deg,
    rgba(33, 114, 178, 0.15) 0%,
    rgba(93, 193, 174, 0.15) 100%);
}

/* ---- Contact CTA (全ページ統一: students→companies グラデーション切替) ---- */
.cta-contact-btn {
  background: linear-gradient(135deg, #5DC1AE 0%, #4DA89B 60%, #3E8D82 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(93, 193, 174, 0.28);
  transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-contact-btn:hover {
  background: linear-gradient(135deg, #F4766C 0%, #E55F55 60%, #C94A42 100%);
  box-shadow: 0 12px 28px rgba(244, 118, 108, 0.38);
  transform: translateY(-3px);
  color: #fff;
}

/* ---- 共通カード hover リフト（全ページ統一、Phase 2） ---- */
/* program-card / role-card / その他リスト型カードに適用 */
.card-hover-lift {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-md);
}

/* program-card と role-card に同一挙動を適用（既存class を上書き統一） */
.program-card,
.role-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.program-card:hover,
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-md);
}

/* ---- Section spacing 統一（2段階、Phase 2） ---- */
/* lg: hero隣接や主要セクション、md: 通常セクション */
.section-spacing-lg {
  padding-top: var(--section-py-lg);
  padding-bottom: var(--section-py-lg);
}
.section-spacing-md {
  padding-top: var(--section-py-md);
  padding-bottom: var(--section-py-md);
}

/* ---- Header FOUC対策: components.js が初期HTMLを書き換えるまで非表示 ---- */
/* 初期HTMLの「募集」等の旧ドロップダウンが瞬間表示されないように */
header {
  opacity: 0;
  transition: opacity 0.2s ease;
}
header.nav-ready {
  opacity: 1;
}