/*
 * Design tokens — sourced from docs/DESIGN_SYSTEM.md / design-comp-top-v2.html
 */
:root {
	--color-red: #c81e3a;
	--color-red-deep: #8f1527;
	--color-base: #faf9f7;
	--color-charcoal: #221f1c;
	--color-charcoal-soft: #6b675f;
	--color-navy: #1b3a5c;
	--color-gold: #e0a526;
	--color-gold-deep: #8a5f00;
	--color-gold-pale: #f4d77a;
	--color-gold-soft: #fff6d8;
	--color-gold-line: #e8c76a;
	--color-cream: #ffffff;
	--color-line: #e2ddd0;
	--color-footer-link: #9db3c7;
	--color-footer-muted: #8fa4b8;
	--color-footer-text: #c3d0dd;
	--color-slate: #263a44;
	--color-accent-red: #b3262e;
	--color-accent-gold: #c79a32;
	--color-bg-warm: #f7f4ee;
	--color-text: #23272a;
	--color-muted: #687076;
	--top-red: #b3262e;
	--top-red-deep: #8f1f26;
	--top-red-soft: #f7edee;
	--top-yellow: #c79a32;
	--top-yellow-soft: #f4e8c8;
	--top-bg: #faf8f3;
	--top-white: #ffffff;
	--top-text: #252525;
	--top-muted: #6a6660;
	--top-footer: #5c181c;

	--color-hero-eyebrow: #f3b9bf;
	--color-hero-copy-s: #e8c3c7;
	--color-art-tag-bg: #fbeeef;
	--color-learn-border: #ecdcdd;

	/* Phase 2 bright brand prototype controls. */
	--phase2-red: #d71920;
	--phase2-red-deep: #a8121a;
	--phase2-yellow: #f6c800;
	--phase2-soft-yellow: #fff7cc;
	--phase2-soft-red: #fff0f1;
	--phase2-warm-white: #fcfaf6;
	--phase2-charcoal: #25211e;
	--phase2-charcoal-soft: #686159;
	--phase2-border: #e8e1d8;
	--phase2-hero-yellow-inset: 24px;
	--phase2-hero-yellow-inset-mobile: 14px;
	--phase2-top-encounter-bg: var(--color-cream);
	--phase2-top-education-bg: var(--phase2-soft-red);
	--phase2-top-work-bg: var(--phase2-soft-yellow);
	--phase2-top-news-bg: var(--phase2-warm-white);
	--phase2-top-support-bg: var(--phase2-soft-red);
	--phase2-entry-primary-bg: var(--phase2-soft-red);
	--phase2-entry-travel-bg: var(--phase2-soft-yellow);
	--phase2-entry-know-bg: var(--color-cream);
	--phase2-entry-support-bg: var(--phase2-soft-red);
	--phase2-hire-purpose-bg: var(--phase2-soft-yellow);
	--phase2-hire-model-bg: var(--phase2-soft-red);
	--phase2-hire-process-bg: var(--phase2-soft-yellow);
	--phase2-hire-contact-bg: var(--phase2-soft-red);
	--phase2-footer-bg: var(--phase2-soft-yellow);

	--font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	--font-size-body: 16px;
	--font-size-caption: 13px;
	--font-size-tag: 12px;
	--font-size-section-title: 28px;
	--font-size-hero-copy-l: 29px;
	--font-size-pillar-title: 20px;
	--font-size-learn-title: 17px;

	--line-height-body: 1.78;
	--line-height-hero-copy-l: 1.55;

	--layout-max-width: 1180px;
	--layout-wide: 1180px;
	--layout-default: 1080px;
	--layout-reading: 880px;
	--header-height: 70px;
}