/* ============================================================
   variables.css — Design Tokens (Deep Automate Ver.2)
   06-design-system.md のトークンを CSS Variables として定義。
   ここを変更すると全コンポーネントに反映される（単一の真実の源）。
   ============================================================ */
:root {

	/* -------- Color: Primary (Brand Blue) -------- */
	--da-primary-50:  #EEF4FF;
	--da-primary-100: #DBE6FE;
	--da-primary-500: #2563EB;
	--da-primary-600: #1E4FD1;
	--da-primary-700: #1A44B8;

	/* -------- Color: Secondary (Ink / Navy) & Accent -------- */
	--da-secondary:     #0F1B33;
	--da-secondary-700: #1B2A47;
	--da-accent:        #12B5B0;

	/* -------- Color: Background / Surface / Border -------- */
	--da-bg:            #FFFFFF;
	--da-bg-subtle:     #F7F9FC;
	--da-surface:       #FFFFFF;
	--da-border:        #E4E8EF;
	--da-border-strong: #CBD5E1;

	/* -------- Color: Semantic -------- */
	--da-success: #16A34A; --da-success-bg: #DCFCE7;
	--da-warning: #F59E0B; --da-warning-bg: #FEF3C7;
	--da-error:   #DC2626; --da-error-bg:   #FEE2E2;
	--da-info:    #0EA5E9; --da-info-bg:    #E0F2FE;

	/* -------- Color: Gray Scale -------- */
	--da-gray-50:  #F8FAFC;
	--da-gray-100: #F1F5F9;
	--da-gray-200: #E2E8F0;
	--da-gray-300: #CBD5E1;
	--da-gray-400: #94A3B8;
	--da-gray-500: #64748B;
	--da-gray-600: #475569;
	--da-gray-700: #334155;
	--da-gray-800: #1E293B;
	--da-gray-900: #0F172A;

	/* -------- Text roles -------- */
	--da-text:        var(--da-gray-700);
	--da-text-strong: var(--da-gray-900);
	--da-text-muted:  var(--da-gray-500);
	--da-text-invert: #FFFFFF;
	--da-link:        var(--da-primary-600);
	--da-link-hover:  var(--da-primary-700);

	/* -------- Typography -------- */
	--da-font-base: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--da-fw-regular: 400;
	--da-fw-medium:  500;
	--da-fw-bold:    700;

	/* font-size（PC基準。SP は responsive.css で調整） */
	--da-fs-h1:      44px;
	--da-fs-h2:      32px;
	--da-fs-h3:      24px;
	--da-fs-h4:      20px;
	--da-fs-h5:      18px;
	--da-fs-h6:      13px;   /* Overline */
	--da-fs-body:    16px;
	--da-fs-small:   14px;
	--da-fs-caption: 12px;
	--da-fs-button:  15px;

	/* line-height */
	--da-lh-tight:   1.25;
	--da-lh-heading: 1.4;
	--da-lh-snug:    1.6;
	--da-lh-body:    1.8;

	/* letter-spacing */
	--da-ls-tight:   -0.02em;
	--da-ls-heading: -0.01em;
	--da-ls-body:    0.01em;
	--da-ls-wide:    0.08em;

	/* -------- Spacing (8px grid) -------- */
	--da-space-2:   2px;
	--da-space-4:   4px;
	--da-space-8:   8px;
	--da-space-12:  12px;
	--da-space-16:  16px;
	--da-space-24:  24px;
	--da-space-32:  32px;
	--da-space-40:  40px;
	--da-space-48:  48px;
	--da-space-64:  64px;
	--da-space-80:  80px;
	--da-space-96:  96px;
	--da-space-120: 120px;

	/* -------- Border Radius -------- */
	--da-radius-sm:   4px;
	--da-radius-md:   8px;
	--da-radius-lg:   12px;
	--da-radius-xl:   16px;
	--da-radius-2xl:  24px;
	--da-radius-full: 9999px;

	/* -------- Shadow -------- */
	--da-shadow-sm:    0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
	--da-shadow-md:    0 4px 12px rgba(15, 23, 42, .08);
	--da-shadow-lg:    0 12px 32px rgba(15, 23, 42, .12);
	--da-shadow-hover: 0 8px 24px rgba(15, 23, 42, .12);

	/* -------- Transition / Motion -------- */
	--da-dur-fast:  120ms;
	--da-dur-base:  200ms;
	--da-dur-slow:  320ms;
	--da-ease-out:      cubic-bezier(.16, 1, .3, 1);
	--da-ease-standard: cubic-bezier(.4, 0, .2, 1);
	--da-transition-fast: all var(--da-dur-fast) var(--da-ease-standard);
	--da-transition-base: all var(--da-dur-base) var(--da-ease-standard);

	/* -------- Container width -------- */
	--da-container:        1200px;
	--da-container-narrow: 800px;
	--da-container-wide:   1280px;

	/* -------- 可変（responsive.css で上書き） -------- */
	--da-gutter:    16px;  /* 左右余白: 16(SP) / 24(Tab) / 32(PC) */
	--da-section-y: 64px;  /* セクション上下: 64(SP) / 80(Tab) / 120(PC) */
}