/* ============================================
 * DADS公式準拠 グローバルスタイル
 * ============================================ */

/* ============================================
 * CSS Reset & Base Styles
 * ============================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* HTML Root */
html {
	scrollbar-gutter: stable;
	font-family: var(--font-family-sans);
}

html.is-modal-open {
	overflow: hidden;
	scrollbar-gutter: auto;
}

/* Body */
body {
	font-family: var(--font-family-sans);
	color: var(--demo-text-color, var(--color-neutral-solid-gray-800));
	background: #ffffff;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	line-height: var(--line-height-170);
}

html.is-modal-open body {
	overflow: hidden;
}

html.is-modal-open #main-content {
	overflow: hidden;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	line-height: var(--line-height-140);
}

h1 {
	margin-bottom: 1.5rem;
}

/* ============================================
 * Link Styles (DADS公式4状態)
 * ============================================ */

a {
	color: var(--color-primitive-blue-900);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:visited {
	color: var(--color-primitive-magenta-900);
}

a:hover {
	color: var(--color-primitive-blue-1000);
	text-decoration-thickness: 3px;
}

a:active {
	color: var(--color-primitive-orange-900);
}

a:focus-visible {
	outline: 4px solid var(--color-neutral-black);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
}

/* ============================================
 * Common Focus Styles (DADS公式パターン)
 * ============================================ */

:focus-visible {
	outline: 4px solid var(--color-neutral-black);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
}

/* Form elements need special handling */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 4px solid var(--color-neutral-black);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
}

button:focus-visible {
	outline: 4px solid var(--color-neutral-black);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-primitive-yellow-300);
}