/*
 * セジュツノワ デザイントークン
 * 色・文字・余白・角丸はここで一元管理する。個別のCSSには値を直書きしない。
 */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/outfit-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212;
}

:root {
	/* Color */
	--snw-navy: #18324a;
	--snw-navy-700: #2a4a66;
	--snw-ivory: #f7f5ef;
	--snw-ivory-deep: #efece3;
	--snw-coral: #df7765;
	--snw-coral-ink: #b4513f; /* 白地で本文サイズの文字に使うときのコーラル（コントラスト確保用） */
	--snw-blue: #dce9ee;
	--snw-ink: #20262c;
	--snw-muted: #5b6670;
	--snw-line: #d9d5cb;
	--snw-white: #ffffff;

	--color-primary: var(--snw-navy);
	--color-accent: var(--snw-coral);
	--color-background: var(--snw-ivory);
	--color-surface: var(--snw-white);
	--color-text: var(--snw-ink);
	--color-muted: var(--snw-muted);
	--color-line: var(--snw-line);

	/* Typography */
	--font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
	--font-accent: "Outfit", var(--font-jp);

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-body: 1rem;
	--font-size-article: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--font-size-lead: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	--font-size-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--font-size-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--font-size-h1: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	--font-size-display: clamp(2.125rem, 1.4rem + 3.6vw, 4.25rem);

	--leading-tight: 1.3;
	--leading-heading: 1.45;
	--leading-body: 1.9;
	--tracking-label: 0.08em;
	--measure: 38em; /* 日本語本文の1行の長さの上限 */

	/* Space */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 48px;
	--space-xl: clamp(64px, 8vw, 112px);
	--gutter: clamp(20px, 5vw, 40px);
	--wrap: 1200px;
	--wrap-narrow: 760px;

	/* Shape */
	--radius-sm: 2px;
	--radius-md: 6px;
	--rule: 1px solid var(--color-line);
	--rule-strong: 2px solid var(--color-primary);

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration: 480ms;
	--duration-fast: 200ms;
}