/* デザイントークン（CSS 変数）
   ロゴテイスト（細身・幾何学・モノトーン）に合わせた抑制パレット
   - 主役: 墨色（ロゴ色 #2A2A2A）
   - サブ: 落ち着いたティール（沖縄の海をペールに）
   - 差し色: テラコッタ（暖かみだが派手さ控えめ）
   - 全体トーン: クリーム系オフホワイト
*/

:root {
	/* カラー */
	--c-primary:        #527E80;     /* 落ち着いたティール（既存より大幅にトーンダウン） */
	--c-primary-dark:   #3A6062;
	--c-primary-light:  #A8C4C5;
	--c-primary-soft:   #EAF1F1;
	--c-accent:         #C68B58;     /* テラコッタ（既存サンセットより落ち着き） */
	--c-accent-dark:    #A06D3D;
	--c-accent-soft:    #F2E4D2;
	--c-fg:             #2A2A2A;     /* ロゴと同じ墨色 */
	--c-fg-muted:       #5E5E5C;
	--c-fg-faint:       #A09F99;
	--c-bg:             #FBF9F4;     /* 温かいオフホワイト */
	--c-bg-card:        #FFFFFF;
	--c-bg-section:     #F2EFE6;     /* サンドクリーム */
	--c-border:         #E5E1D6;
	--c-border-strong:  #C9C4B6;
	--c-success:        #5C8C5B;
	--c-error:          #B5524A;

	/* タイポ — 英字は Outfit（幾何学サンセリフ）でロゴ寄り、日本語は Zen Kaku Gothic New */
	--font-base: "Outfit", "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
	--font-display: "Outfit", "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;

	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.125rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.5rem;
	--fs-2xl:  1.875rem;
	--fs-3xl:  2.25rem;
	--fs-4xl:  3rem;
	--fs-5xl:  3.75rem;

	--lh-tight: 1.2;
	--lh-snug:  1.45;
	--lh-base:  1.8;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold:   600;       /* 全体的に細めに（700 → 600） */
	--fw-black:  700;       /* black も控えめ */

	/* スペース */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.5rem;
	--sp-6:  2rem;
	--sp-7:  3rem;
	--sp-8:  4rem;
	--sp-9:  6rem;
	--sp-10: 8rem;

	/* レイアウト */
	--container-narrow: 720px;
	--container:        1100px;
	--container-wide:   1280px;
	--header-h:         76px;
	--header-h-sp:      60px;

	/* 角丸 — ロゴのまっすぐなラインに合わせて控えめに */
	--r-sm:   2px;
	--r-md:   6px;
	--r-lg:   10px;
	--r-xl:   14px;
	--r-pill: 999px;

	/* 影 — より薄く */
	--shadow-sm: 0 1px 2px rgba(60, 50, 30, .04);
	--shadow-md: 0 2px 8px rgba(60, 50, 30, .05), 0 1px 2px rgba(60, 50, 30, .03);
	--shadow-lg: 0 8px 24px rgba(60, 50, 30, .07), 0 2px 4px rgba(60, 50, 30, .03);

	/* トランジション */
	--ease: cubic-bezier(.2, .8, .2, 1);
	--dur-fast: 120ms;
	--dur-base: 220ms;
}