/*
 * サービスサイトのデザイントークン。
 *
 * 色・文字・角丸・コンテナ幅など、サイト全体で共有する値はこのファイルだけで定義する。
 * ページCSS、コンポーネントCSS、Tailwind設定側へ同じ色コードを複製しない。
 */
:root {
	/* Brand */
	--color-primary: #0f62fe;
	--color-primary-hover: #0043ce;
	--color-primary-dark: #0f62fe;
	--color-primary-deep: #161616;
	--color-primary-deepest: #161616;
	--color-primary-muted: #c6c6c6;
	--color-primary-soft: #e0e0e0;
	--color-primary-light: #f4f4f4;
	--color-primary-bg: #f4f4f4;

	/* Text: corporate design-system.css の IBM Plex / Carbon パレットを共有する。 */
	--color-heading: #161616;
	--color-text: #161616;
	--color-text-secondary: #525252;
	--color-text-inverse: #ffffff;
	--color-text-inverse-muted: #c6c6c6;
	--color-text-inverse-soft: rgb(255 255 255 / 76%);
	/* コーポレートサイトと同じ IBM Plex タイポグラフィ。 */
	--font-body: "IBM Plex Sans", "IBM Plex Sans JP", sans-serif;
	--font-label: var(--font-body);
	--font-sans: var(--font-body);
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-size-body: 1rem;
	--font-size-small: 0.875rem;
	--font-size-label: 0.75rem;
	--font-size-body-mobile: 0.875rem;
	--font-size-caption-mobile: 0.75rem;
	--font-size-h1: clamp(2rem, 3vw, 3rem);
	--font-size-h1-mobile: clamp(1.75rem, 8vw, 2rem);
	--font-size-h2: clamp(1.5rem, 2.2vw, 2rem);
	--font-size-h2-mobile: 1.375rem;
	--font-size-h3: 1.125rem;
	--font-size-h3-mobile: 1rem;
	--font-size-h4: 1.25rem;
	--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: #f4f4f4;
	--color-background-overlay: rgb(255 255 255 / 94%);
	--color-background-inverse-subtle: rgb(255 255 255 / 12%);
	--color-border: #e0e0e0;
	--color-border-strong: #c6c6c6;
	--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(15 98 254 / 7%);
	--color-shadow-neutral-subtle: rgb(22 22 22 / 10%);
	--color-shadow-neutral-soft: rgb(22 22 22 / 12%);
	--color-shadow-cta: rgb(22 22 22 / 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: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--container: 1200px;
	--reading: 900px;
}

/* スマートフォンでは本文・見出しのタイポグラフィトークンを切り替え、個別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);
		--font-size-h4: 1rem;
		--font-size-item-title: 1rem;
	}
}