/**
 * Model Lab Design Foundation
 *
 * This file contains constants only. Page CSS maps these primitives to local
 * semantic aliases so each surface can keep its intended visual character.
 */

:root {
	/* Brand and neutral color primitives */
	--ml-color-brand-400: #6f85ff;
	--ml-color-brand-500: #3554ff;
	--ml-color-brand-600: #263fdd;
	--ml-color-red-500: #e94b4b;
	--ml-color-kakao-500: #fee500;
	--ml-color-kakao-hover: #f5dd00;
	--ml-color-neutral-0: #ffffff;
	--ml-color-neutral-50: #f7f8fa;
	--ml-color-neutral-100: #f4f5f7;
	--ml-color-neutral-150: #e8ebf0;
	--ml-color-neutral-200: #d9dde5;
	--ml-color-neutral-400: #9da5b2;
	--ml-color-neutral-600: #596273;
	--ml-color-neutral-650: #5f6877;
	--ml-color-neutral-700: #303541;
	--ml-color-neutral-900: #15171b;
	--ml-color-neutral-950: #0b0d12;

	/* Semantic colors */
	--ml-color-accent: var(--ml-color-brand-500);
	--ml-color-accent-on-dark: var(--ml-color-brand-400);
	--ml-color-accent-hover: var(--ml-color-brand-600);
	--ml-color-danger: var(--ml-color-red-500);
	--ml-color-text-primary: var(--ml-color-neutral-950);
	--ml-color-text-body: var(--ml-color-neutral-700);
	--ml-color-text-muted: var(--ml-color-neutral-650);
	--ml-color-text-muted-strong: var(--ml-color-neutral-600);
	--ml-color-text-inverse: var(--ml-color-neutral-0);
	--ml-color-text-inverse-muted: rgba(255, 255, 255, 0.66);
	--ml-color-surface-page: var(--ml-color-neutral-100);
	--ml-color-surface-raised: var(--ml-color-neutral-0);
	--ml-color-surface-dark: var(--ml-color-neutral-900);
	--ml-color-surface-header: rgba(8, 10, 14, 0.94);
	--ml-color-surface-soft: var(--ml-color-neutral-150);
	--ml-color-surface-studio: #f2f2f2;
	--ml-color-line: rgba(11, 13, 18, 0.14);
	--ml-color-line-solid: var(--ml-color-neutral-200);
	--ml-color-line-strong: var(--ml-color-neutral-400);
	--ml-color-line-on-dark: rgba(255, 255, 255, 0.1);
	--ml-color-focus-ring: rgba(53, 84, 255, 0.12);
	--ml-color-success-surface: #ecfdf3;
	--ml-color-success-line: #bbf7d0;
	--ml-color-success-text: #14532d;
	--ml-color-error-surface: #fff1f2;
	--ml-color-error-line: #fecdd3;
	--ml-color-error-text: #991b1b;

	/* Typography */
	--ml-font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
	--ml-font-size-caption: 12px;
	--ml-font-size-label: 13px;
	--ml-font-size-body-sm: 15px;
	--ml-font-size-body: 16px;
	--ml-font-size-lead: 18px;
	--ml-font-size-body-lg: 20px;
	--ml-font-size-title-xs: 22px;
	--ml-font-size-title-sm: 30px;
	--ml-font-size-title-mobile: 32px;
	--ml-font-size-title-md: 36px;
	--ml-font-size-title-lg: 48px;
	--ml-font-size-display: 60px;
	--ml-font-size-display-mobile: 40px;
	--ml-font-size-statement: 46px;
	--ml-font-size-statement-tablet: 42px;
	--ml-font-size-statement-mobile: var(--ml-font-size-title-md);
	--ml-font-weight-regular: 400;
	--ml-font-weight-medium: 500;
	--ml-font-weight-nav: 650;
	--ml-font-weight-semibold: 700;
	--ml-font-weight-heading: 760;
	--ml-font-weight-strong: 800;
	--ml-line-height-tight: 1.12;
	--ml-line-height-heading: 1.2;
	--ml-line-height-body: 1.65;
	--ml-line-height-loose: 1.72;
	--ml-letter-spacing: 0;

	/* Spacing: 4px base scale */
	--ml-space-0: 0;
	--ml-space-1: 4px;
	--ml-space-2: 8px;
	--ml-space-3: 12px;
	--ml-space-4: 16px;
	--ml-space-5: 20px;
	--ml-space-6: 24px;
	--ml-space-8: 32px;
	--ml-space-10: 40px;
	--ml-space-12: 48px;
	--ml-space-14: 56px;
	--ml-space-16: 64px;
	--ml-space-18: 72px;
	--ml-space-20: 80px;
	--ml-space-22: 88px;
	--ml-space-24: 96px;
	--ml-space-28: 112px;
	--ml-space-32: 128px;

	/* Layout */
	--ml-layout-container: 1240px;
	--ml-layout-reading: 680px;
	--ml-layout-inset-desktop: 64px;
	--ml-layout-inset-comfortable: 80px;
	--ml-layout-inset-tablet: 48px;
	--ml-layout-inset-mobile: 40px;
	--ml-layout-header-height: 76px;
	--ml-layout-header-height-mobile: 68px;
	--ml-layout-header-height-mobile-editorial: 70px;
	--ml-layout-section-y: var(--ml-space-28);
	--ml-layout-section-y-compact: var(--ml-space-22);
	--ml-layout-section-y-mobile: var(--ml-space-16);

	/* Shape, borders, and elevation */
	--ml-radius-none: 0;
	--ml-radius-editorial: 2px;
	--ml-radius-control: 4px;
	--ml-radius-soft: 6px;
	--ml-radius-standard: 8px;
	--ml-radius-pill: 999px;
	--ml-radius-round: 50%;
	--ml-border-subtle: 1px solid var(--ml-color-line);
	--ml-border-solid: 1px solid var(--ml-color-line-solid);
	--ml-border-on-dark: 1px solid var(--ml-color-line-on-dark);
	--ml-shadow-focus: 0 0 0 3px var(--ml-color-focus-ring);
	--ml-shadow-soft: 0 18px 42px rgba(34, 46, 73, 0.08);
	--ml-shadow-raised: 0 28px 70px rgba(34, 46, 73, 0.12);
	--ml-shadow-brand: 0 16px 40px rgba(53, 84, 255, 0.28);

	/* Interactive component dimensions */
	--ml-size-touch: 44px;
	--ml-size-control: 48px;
	--ml-size-control-lg: 56px;
	--ml-size-textarea: 180px;

	/* Compact product scenes: preserve the complete product on short screens. */
	--ml-media-compact-height: 52svh;
	--ml-media-compact-height-mobile: 44svh;

	/* Motion */
	--ml-motion-duration-instant: 90ms;
	--ml-motion-duration-fast: 180ms;
	--ml-motion-duration-base: 220ms;
	--ml-motion-duration-reveal: 620ms;
	--ml-motion-ease-standard: ease;
	--ml-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* Layering */
	--ml-z-header: 1000;
	--ml-z-overlay: 1100;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ml-motion-duration-instant: 1ms;
		--ml-motion-duration-fast: 1ms;
		--ml-motion-duration-base: 1ms;
		--ml-motion-duration-reveal: 1ms;
	}
}