/*
 * サービスサイトのデザイントークン。
 *
 * 色・文字・角丸・コンテナ幅など、サイト全体で共有する値はこのファイルだけで定義する。
 * ページCSS、コンポーネントCSS、Tailwind設定側へ同じ色コードを複製しない。
 */
:root {
	/* Brand */
	--color-primary: #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-primary-dark: #1e40af;
	--color-primary-deep: #1e3a8a;
	--color-primary-deepest: #172554;
	--color-primary-muted: #93c5fd;
	--color-primary-soft: #bfdbfe;
	--color-primary-light: #dbeafe;
	--color-primary-bg: #eff6ff;

	/* Text */
	--color-heading: #0f172a;
	--color-text: #0f172a;
	--color-text-secondary: #475569;
	--color-text-inverse: #ffffff;
	--color-text-inverse-muted: #cbd5e1;
	--color-text-inverse-soft: rgb(255 255 255 / 76%);
	--font-sans: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--font-size-body: 1rem;
	--font-size-body-mobile: 0.875rem;
	--font-size-h1: clamp(2rem, 4vw, 2.85rem);
	--font-size-h1-mobile: 1.75rem;
	--font-size-h2: clamp(1.625rem, 2.8vw, 2.25rem);
	--font-size-h2-mobile: 1.375rem;
	--font-size-h3: clamp(1.25rem, 1.8vw, 1.5rem);
	--font-size-h3-mobile: 1.125rem;
	--font-size-h4: 1.125rem;
	--font-size-item-title: 1.125rem;

	/* Surface / UI */
	--color-accent: var(--color-primary);
	--color-accent-hover: var(--color-primary-hover);
	--color-background: #ffffff;
	--color-background-subtle: #f8fafc;
	--color-background-overlay: rgb(255 255 255 / 94%);
	--color-background-inverse-subtle: rgb(255 255 255 / 12%);
	--color-border: #e2e8f0;
	--color-border-strong: #94a3b8;
	--color-border-inverse: rgb(255 255 255 / 52%);
	--color-mask-opaque: #000000;
	--color-success: #2f7d5b;
	--color-warning: #a76a13;
	--color-danger: #b42318;
	--color-danger-bg: #fef3f2;
	--color-shadow-primary-soft: rgb(37 99 235 / 7%);
	--color-shadow-neutral-subtle: rgb(15 23 42 / 10%);
	--color-shadow-neutral-soft: rgb(15 23 42 / 12%);
	--color-shadow-cta: rgb(15 23 42 / 18%);

	/* WordPress login */
	--login-bg: #f4f6f8;
	--login-surface: #ffffff;
	--login-text: #1f2937;
	--login-text-secondary: #6b7280;
	--login-border: #d7dce3;
	--login-border-light: #e5e7eb;
	--login-primary: #0061c2;
	--login-primary-hover: #0061c2a3;
	--login-focus: #2563eb;
	--login-focus-ring: rgba(37, 99, 235, 0.12);

	/* Shape / Layout */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--container: 1200px;
	--reading: 760px;
}

/* スマートフォンでは本文・見出しのタイポグラフィトークンを切り替え、個別CSSで同じ値を重複定義しない。 */
@media (max-width: 768px) {
	:root {
		--font-size-body: var(--font-size-body-mobile);
		--font-size-h1: var(--font-size-h1-mobile);
		--font-size-h2: var(--font-size-h2-mobile);
		--font-size-h3: var(--font-size-h3-mobile);
	}
}