/*
  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(2.5rem, 5vw + 1rem, 4.5rem);
  --text-fluid-h2: clamp(2rem, 4vw + 0.5rem, 3rem);
  --text-fluid-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem);

  /* 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);
}

/* ===== Shared utility classes ===== */
.text-fluid-h1 {
  font-size: var(--text-fluid-h1);
  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%);
}