/* =============================================================================
   Design Tokens — single source of truth: ../../../../DESIGN.md
   ========================================================================== */

:root {
	/* ----- Color ----------------------------------------------------------- */
	--tt-bg:        #EEEEEE;             /* page background */
	--tt-surface:   #FFFFFF;             /* cards / modals */
	--tt-ink:       #000000;             /* primary text, borders, outline buttons */
	--tt-ink-soft:  rgba(0, 0, 0, 0.72); /* secondary body text */
	--tt-muted:     #69727D;             /* captions, links-on-light, meta */
	--tt-accent:    #D9534F;             /* sparing — highlight / error */
	--tt-line:      rgba(0, 0, 0, 0.12); /* hairline borders */
	--tt-overlay:   rgba(0, 0, 0, 0.55); /* hero image overlay */
	--tt-dark:      #404040;             /* footer dark charcoal */
	--tt-dark-line: rgba(255, 255, 255, 0.18); /* light hairline for dark surfaces */
	--tt-dark-text: rgba(255, 255, 255, 0.78); /* secondary text on dark bg */

	/* ----- Typography families -------------------------------------------- */
	--font-display: "Anton", "Oswald", "Impact", system-ui, sans-serif;
	--font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

	/* ----- Typography scale ----------------------------------------------- */
	--fs-display:  clamp(40px, 6vw, 96px);   /* hero display heading */
	--fs-h1:       clamp(28px, 3.4vw, 40px);
	--fs-h2:       clamp(32px, 4.5vw, 64px); /* bilingual section labels */
	--fs-h3:       20px;
	--fs-body:     16px;
	--fs-small:    13px;

	--lh-display:  1.05;
	--lh-heading:  1.2;
	--lh-body:     1.8;                       /* JP body needs generous leading */

	--fw-display:  400;                       /* Anton is single-weight */
	--fw-heading:  600;
	--fw-body:     400;
	--fw-bold:     700;

	--tracking-display: 0.02em;
	--tracking-heading: 0.04em;
	--tracking-body:    0;

	/* ----- Spacing scale (baseUnit = 4) ----------------------------------- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;
	--space-9:  96px;                         /* between sections */

	/* ----- Radius / shadow ------------------------------------------------ */
	--radius-button: 5px;
	--radius-card:   8px;
	--shadow-none:   none;
	--shadow-card:   0 2px 12px rgba(0, 0, 0, 0.06);
	--shadow-hover:  0 4px 20px rgba(0, 0, 0, 0.12);

	/* ----- Layout --------------------------------------------------------- */
	--container:     1200px;  /* 汎用 (ヘッダー / フッター / 通常セクション) */
	--container-sm:  720px;   /* 本文系の読み幅 */
	--container-lg:  1440px;  /* 広いコンテンツ用 (legal page hero など) */
	--gutter:        24px;
	--gutter-sm:     16px;

	/* ----- Motion --------------------------------------------------------- */
	--ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast:      120ms;
	--dur-base:      200ms;
	--dur-slow:      400ms;

	/* ----- Z-index -------------------------------------------------------- */
	--z-header:      100;
	--z-drawer:      200;
	--z-modal:       300;
	--z-toast:       400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}