/* =========================================================
   01-tokens.css
   デザイントークン。プリセットはこの変数を上書きするだけ。
   ========================================================= */

:root {
	/* color */
	--nt-color-bg: #ffffff;
	--nt-color-surface: #f8fafc;
	--nt-color-text: #111827;
	--nt-color-muted: #64748b;
	--nt-color-border: #e5e7eb;

	--nt-color-primary: #2563eb;
	--nt-color-primary-contrast: #ffffff;
	--nt-color-secondary: #0f172a;
	--nt-color-secondary-contrast: #ffffff;
	--nt-color-accent: #f97316;
	--nt-color-accent-contrast: #ffffff;

	/* font */
	--nt-font-base: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
	--nt-font-heading: var(--nt-font-base);

	/* type scale */
	--nt-fs-xs: 0.75rem;
	--nt-fs-sm: 0.875rem;
	--nt-fs-base: 1rem;
	--nt-fs-md: 1.125rem;
	--nt-fs-lg: 1.25rem;
	--nt-fs-xl: 1.5rem;
	--nt-fs-2xl: 1.875rem;
	--nt-fs-3xl: 2.25rem;
	--nt-fs-4xl: 3rem;

	/* layout */
	--nt-container: 1120px;
	--nt-container-narrow: 760px;
	--nt-container-wide: 1280px;
	--nt-container-padding: clamp(16px, 4vw, 32px);

	/* radius */
	--nt-radius-sm: 8px;
	--nt-radius-md: 16px;
	--nt-radius-lg: 24px;
	--nt-radius-pill: 999px;

	/* shadow */
	--nt-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
	--nt-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10);
	--nt-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);

	/* spacing */
	--nt-section-y: clamp(56px, 8vw, 112px);
	--nt-gap: clamp(20px, 4vw, 40px);
	--nt-stack: clamp(12px, 2vw, 20px);

	/* misc */
	--nt-header-h: 72px;
	--nt-transition: 0.25s ease;
	--nt-z-header: 100;
	--nt-z-overlay: 200;
	--nt-z-modal: 300;

	/* ----- role tokens (preset-overridable surfaces) -----
	   コンポーネント側はこれらを参照する。
	   各プリセットはここを上書きするだけで色・装飾を変えられる。 */

	/* hero */
	--nt-bg-hero: var(--nt-color-surface);
	--nt-hero-decoration-opacity: 0;

	/* CTA */
	--nt-bg-cta: var(--nt-color-secondary);
	--nt-fg-cta: var(--nt-color-secondary-contrast);

	/* footer */
	--nt-bg-footer: var(--nt-color-secondary);
	--nt-fg-footer: var(--nt-color-secondary-contrast);

	/* card */
	--nt-card-bg: var(--nt-color-bg);
	--nt-card-border: var(--nt-color-border);
	--nt-card-hover-shadow: var(--nt-shadow-md);

	/* heading */
	--nt-heading-letter-spacing: -0.01em;

	/* button */
	--nt-button-shadow: 0 0 0 transparent;
}