:root {
  /* ============================================================
     ブランド正色（ロゴ6色）— 公益資本主義 実装センター
     ロゴ円の配置に対応：① 真上 → ⑥ 左上を時計回り
     ============================================================ */
  --color-magenta:  #E91E63;  /* ① 真上：マゼンタ・ピンク */
  --color-red:      #E60012;  /* ② 右上：レッド */
  --color-orange:   #F39800;  /* ③ 右下：オレンジ */
  --color-yellow:   #FFF100;  /* ④ 真下：イエロー */
  --color-green:    #8FC31F;  /* ⑤ 左下：グリーン */
  --color-blue:     #0068B7;  /* ⑥ 左上：ブルー */

  /* 彩度を下げた派生 — 枠線・ラインなどに使用 */
  --color-magenta-soft: #F4A0BD;
  --color-red-soft:     #F0A5A9;
  --color-orange-soft:  #FBC97B;
  --color-yellow-soft:  #FFF6A0;
  --color-green-soft:   #CCDE9D;
  --color-blue-soft:    #8DB6D5;

  /* ごく淡いトーン — 背景・ハイライト用 */
  --color-magenta-pale: #FCE4EC;
  --color-red-pale:     #FFEBEE;
  --color-orange-pale:  #FFF3E0;
  --color-yellow-pale:  #FFFDE7;
  --color-green-pale:   #F1F8E9;
  --color-blue-pale:    #E3F0FA;

  /* 濃色 — ホバー・アクティブ状態に使用 */
  --color-magenta-deep: #B71449;
  --color-red-deep:     #B5000F;
  --color-orange-deep:  #C97C00;
  --color-yellow-deep:  #D6CA00;
  --color-green-deep:   #729E18;
  --color-blue-deep:    #00558F;

  /* RGB成分（rgba()で半透明に使うため） */
  --rgb-magenta: 233, 30, 99;
  --rgb-red:     230, 0, 18;
  --rgb-orange:  243, 152, 0;
  --rgb-yellow:  255, 241, 0;
  --rgb-green:   143, 195, 31;
  --rgb-blue:    0, 104, 183;

  /* ============================================================
     基調カラー（無彩色）
     ============================================================ */
  --color-canvas-white: #ffffff;
  --color-slate-ink:    #181925;
  --color-medium-gray:  #666666;
  --color-muted-gray:   #999999;
  --color-light-gray:   #e8e8e8;

  /* ============================================================
     Surface（背景レイヤー）
     ============================================================ */
  --surface-canvas-white:   #ffffff;
  --surface-subtle-accent:  #fafafa;
  --surface-light-card:     #00000008;

  /* ============================================================
     用途別エイリアス — UIの意味に紐づく色
     6色のうちどれを「主アクション色」にするかを集中管理
     ============================================================ */
  --color-action:        var(--color-blue);       /* 主CTA・リンク */
  --color-action-hover:  var(--color-blue-deep);  /* 主CTAホバー */
  --color-action-rgb:    var(--rgb-blue);

  /* プログラム3種に正色を割り当て */
  --color-program-academy: var(--color-orange);   /* ③ アカデミー */
  --color-program-keiei:   var(--color-blue);     /* ⑥ 実践経営塾 */
  --color-program-coco:    var(--color-magenta);  /* ① Co-Co 社中 */

  /* セクション・アクセント */
  --color-section-pic: var(--color-green);        /* ⑤ 公益資本主義とは */

  /* ============================================================
     Typography
     ============================================================ */
  --font-openrunde: 'OpenRunde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --leading-caption: 1.56;
  --tracking-caption: -0.05px;
  --text-body: 14px;
  --leading-body: 1.43;
  --tracking-body: -0.025px;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.02px;
  --text-heading: 20px;
  --leading-heading: 1.22;
  --tracking-heading: -0.018px;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.17;
  --tracking-heading-lg: -0.017px;
  --text-display: 48px;
  --leading-display: 1.13;
  --tracking-display: -0.013px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ============================================================
     Spacing / Layout / Radius / Shadow
     ============================================================ */
  --spacing-unit: 4px;
  --spacing-4:  4px;
  --spacing-8:  8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  --section-gap: 64px;
  --card-padding: 16px;
  --element-gap: 16px;

  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-3xl:   24px;
  --radius-3xl-2: 32px;
  --radius-pill:  9999px;

  --shadow-subtle:   rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
}