/* ============================================================
   Kanoa Base CSS
   - CSS変数（カラー・タイポ・スペーシング）
   - 基本タイポグラフィ
   - 軽いリセット
   このファイルは kanoa-components.css より先に読み込まれます。
   ============================================================ */

:root {
	/* --------------------------------------------
	   Brand colors
	   -------------------------------------------- */
	--kanoa-main:        #2B7A6F;   /* メイン（深めティール） */
	--kanoa-main-dark:   #1F5A52;   /* ホバー・アクティブ */
	--kanoa-logo:        #008080;   /* ロゴ純粋ティール */
	--kanoa-accent:      #E8734A;   /* CTAアクセント（暖色） */
	--kanoa-accent-dark: #C45A33;

	/* --------------------------------------------
	   Surface
	   -------------------------------------------- */
	--kanoa-bg:          #FFFFFF;
	--kanoa-bg-soft:     #F7FAF9;   /* 淡い背景（セクション交互用） */
	--kanoa-border:      #DDEAE7;

	/* --------------------------------------------
	   Text
	   -------------------------------------------- */
	--kanoa-text:        #1E2D2B;
	--kanoa-text-muted:  #667A76;
	--kanoa-text-inverse:#FFFFFF;

	/* --------------------------------------------
	   Shadow（薄め・自然）
	   -------------------------------------------- */
	--kanoa-shadow-sm:  0 1px 3px  rgba(30, 45, 43, 0.06);
	--kanoa-shadow:     0 2px 8px  rgba(30, 45, 43, 0.08);
	--kanoa-shadow-lg:  0 4px 16px rgba(30, 45, 43, 0.12);

	/* --------------------------------------------
	   Radius
	   -------------------------------------------- */
	--kanoa-radius-sm:   6px;
	--kanoa-radius:     12px;
	--kanoa-radius-lg:  20px;
	--kanoa-radius-pill: 999px;

	/* --------------------------------------------
	   Spacing scale
	   -------------------------------------------- */
	--kanoa-space-xs:    8px;
	--kanoa-space-sm:   16px;
	--kanoa-space-md:   24px;
	--kanoa-space-lg:   40px;
	--kanoa-space-xl:   64px;
	--kanoa-space-2xl:  96px;

	/* --------------------------------------------
	   Typography
	   -------------------------------------------- */
	--kanoa-font-heading: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
	--kanoa-font-body:    "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
	--kanoa-font-en:      "Inter", "Helvetica Neue", Arial, sans-serif;

	/* font-size scale */
	--kanoa-fs-xs:    12px;
	--kanoa-fs-sm:    14px;
	--kanoa-fs-base:  16px;
	--kanoa-fs-md:    18px;
	--kanoa-fs-lg:    20px;
	--kanoa-fs-xl:    24px;
	--kanoa-fs-2xl:   32px;
	--kanoa-fs-3xl:   40px;

	/* line-height */
	--kanoa-lh-tight:  1.3;
	--kanoa-lh-normal: 1.6;
	--kanoa-lh-relaxed:1.8;

	/* --------------------------------------------
	   Layout / breakpoints
	   -------------------------------------------- */
	--kanoa-container:        1140px;
	--kanoa-container-narrow:  880px;
}


/* ============================================================
   タイポグラフィの基本
   ============================================================ */

body {
	font-family: var(--kanoa-font-body);
	color: var(--kanoa-text);
	line-height: var(--kanoa-lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 見出しは Serif で品よく */
h1, h2, h3,
.kanoa-h1, .kanoa-h2, .kanoa-h3 {
	font-family: var(--kanoa-font-heading);
	color: var(--kanoa-text);
	line-height: var(--kanoa-lh-tight);
	letter-spacing: 0.02em;
	font-weight: 700;
}

h1, .kanoa-h1 { font-size: var(--kanoa-fs-3xl); }
h2, .kanoa-h2 { font-size: var(--kanoa-fs-2xl); }
h3, .kanoa-h3 { font-size: var(--kanoa-fs-xl);  }

@media (max-width: 768px) {
	h1, .kanoa-h1 { font-size: var(--kanoa-fs-2xl); }
	h2, .kanoa-h2 { font-size: var(--kanoa-fs-xl);  }
	h3, .kanoa-h3 { font-size: var(--kanoa-fs-md);  }
}

/* 数字や英字はスッキリ Sans に */
.kanoa-en,
.kanoa-num {
	font-family: var(--kanoa-font-en);
	letter-spacing: 0.02em;
}

/* リンク */
a {
	color: var(--kanoa-main);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
	opacity: 0.8;
}

/* 画像 */
img {
	max-width: 100%;
	height: auto;
}

/* 軽いユーティリティ */
.kanoa-text-muted   { color: var(--kanoa-text-muted); }
.kanoa-text-center  { text-align: center; }
.kanoa-text-accent  { color: var(--kanoa-accent); }
.kanoa-bg-soft      { background: var(--kanoa-bg-soft); }