/*
 * このファイルは spec/design-system.yaml から生成されている。
 * 手で書き換えない。値を変えるときは YAML を変えて
 * ops/build-tokens.js を回す。CI が同期を検査する。
 */

:root {
	/* 色 */
	--c-primary: #0f5cbf;
	--c-primary-hover: #0c4796;
	--c-primary-bright: #4aa3f0;
	--c-primary-pale: #e8f2fe;
	--c-hero-sky: #eef4fc;
	--c-accent: #cc4a00;
	--c-accent-hover: #b84100;
	--c-accent-ink: #a83c00;
	--c-accent-pale: #fff2e8;
	--c-accent-marker: #ffd9b8;
	--c-rank-gold: #c08401;
	--c-rank-silver: #7b8794;
	--c-rank-bronze: #bd7c42;
	--c-on-rank: #2a1a05;
	--c-canvas: #f5f3ef;
	--c-background: #ffffff;
	--c-surface: #f0ece4;
	--c-surface-deep: #e7e2d8;
	--c-surface-warm: #fff8f0;
	--c-ink: #12263f;
	--c-ink-deep: #0b1a2c;
	--c-on-ink: #eef3fa;
	--c-on-ink-muted: #a6b7cc;
	--c-ink-line: rgba(255, 255, 255, 0.14);
	--c-ink-raise: rgba(255, 255, 255, 0.07);
	--c-border: #e6e1d7;
	--c-border-strong: #d4cdc0;
	--c-text-primary: #111827;
	--c-text-secondary: #4b5563;
	--c-text-muted: #5a6270;
	--c-danger: #b52020;
	--c-state-yes: #15653f;
	--c-state-yes-pale: #e3f3ea;
	--c-state-no: #5a616a;
	--c-state-unknown: #5a6270;

	/* 余白 */
	--s-2xs: 2px;
	--s-xs: 4px;
	--s-sm: 8px;
	--s-md: 12px;
	--s-lg: 16px;
	--s-xl: 24px;
	--s-2xl: 32px;
	--s-3xl: 48px;
	--s-4xl: 64px;
	--s-5xl: 96px;

	/* 角丸 */
	--r-small: 10px;
	--r-medium: 14px;
	--r-large: 20px;
	--r-xlarge: 28px;
	--r-pill: 999px;

	/* 影 */
	--sh-xs: 0 1px 2px rgba(23, 43, 77, 0.05);
	--sh-sm: 0 2px 6px rgba(23, 43, 77, 0.07);
	--sh-md: 0 6px 18px rgba(23, 43, 77, 0.09);
	--sh-lg: 0 16px 40px rgba(23, 43, 77, 0.13);
	--sh-raise: 0 3px 0 rgba(23, 43, 77, 0.12);
	--sh-focus: 0 0 0 3px rgba(15, 92, 191, 0.28);

	/* 動き */
	--motion-duration: 160ms;
	--motion-easing: cubic-bezier(0.2, 0, 0, 1);

	/* 文字 */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", meiryo, sans-serif;
	--font-numeric: ui-monospace, 'SF Mono', Consolas, monospace;
	--line-height: 1.75;
	--line-height-heading: 1.35;
	--tracking-heading: -0.02em;
	--measure: 68ch;
	--fs-body: 16px;
	--fs-h1: 30px;
	--fs-h2: 23px;
	--fs-h3: 18px;
	--fs-min: 13px;

	/* 寸法 */
	--container-max: 1240px;
	--pad-mobile: 20px;
	--pad-tablet: 24px;
	--btn-height: 44px;
	--btn-weight: 700;
	--card-image-width: 160px;
}

@media (min-width: 768px) {
	:root {
	--fs-body: 16px;
	--fs-h1: 40px;
	--fs-h2: 27px;
	--fs-h3: 19px;
	}
}